Skip to content
EN KO VI NE KM ID
Design business cards Character collection 16 designs · PNG / SVG / PDF

Scrollable tabs

For when there are more categories than fit the screen, so people swipe sideways to pick one.

Navigation

Live preview

Source

<nav class="dc-st" aria-label="카테고리">
  <ul class="dc-st__track">
    <li><a class="dc-st__tab" href="#" aria-current="page">추천</a></li>
    <li><a class="dc-st__tab" href="#">신상품</a></li>
    <li><a class="dc-st__tab" href="#">인기순</a></li>
    <li><a class="dc-st__tab" href="#">할인중</a></li>
    <li><a class="dc-st__tab" href="#">리뷰 많은</a></li>
    <li><a class="dc-st__tab" href="#">빠른 배송</a></li>
    <li><a class="dc-st__tab" href="#">브랜드관</a></li>
  </ul>
</nav>
.dc-st {
  padding-top: var(--dc-safe-top);
  background: var(--dc-surface);
  border-bottom: 1px solid var(--dc-line);
  font-family: var(--dc-font);
}
.dc-st__track {
  display: flex; align-items: stretch; gap: var(--dc-1);
  padding: 0 var(--dc-3);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.dc-st__track::-webkit-scrollbar { display: none; }
.dc-st__track > li { flex: 0 0 auto; display: flex; }
.dc-st__tab {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--dc-1);
  min-height: 48px; padding: 0 var(--dc-3);
  border-bottom: 2px solid transparent;
  color: var(--dc-text-mute); text-decoration: none;
  font-size: 15px; font-weight: 600; white-space: nowrap;
  transition: color var(--dc-fast), border-color var(--dc-fast);
}
.dc-st__tab[aria-current="page"] {
  color: var(--dc-text); font-weight: 800;
  border-bottom-color: var(--dc-brand);
}
.dc-st__num {
  min-width: 18px; padding: 0 5px;
  border-radius: var(--dc-r-full);
  background: var(--dc-sunken); color: var(--dc-text-sub);
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.dc-st__tab[aria-current="page"] .dc-st__num {
  background: var(--dc-brand-soft); color: var(--dc-brand-text);
}
.dc-st--pill .dc-st__track { padding: var(--dc-2) var(--dc-3); gap: var(--dc-2); }
.dc-st--pill .dc-st__tab {
  min-height: 44px; padding: 0 var(--dc-4);
  border-bottom: 0; border-radius: var(--dc-r-full);
  background: var(--dc-sunken);
}
.dc-st--pill .dc-st__tab[aria-current="page"] {
  background: var(--dc-brand); color: var(--dc-text-on);
}

How to use it

  • Make the first tab the broad one ("All") and select it by default
  • Scroll the selected tab toward the centre; tapping the rightmost tab should reveal the next one
  • With five categories or fewer, a segmented control is the better fit
  • Keep names to one or two words — long ones leave room for only two tabs

Watch out for

  • Let the last visible tab be clipped so there is a hint of more; a clean edge reads as the end
  • The scrollbar is hidden, so every tab must be a real link or button for keyboard users
  • Drop --dc-safe-top and the tabs slide under the notch

Next