Tabs — Counted links with More menu

Navigation links with count pills share an underline row, and extra destinations move into a More disclosure on narrow screens. Use it for page navigation with counts when some secondary destinations should collapse on mobile.

ReactHTML

1440 × 480

Open in new tab

Component.tsx27 lines

export default function TabsLinkOverflow() {
  return (
    <div className="relative h-64 w-72 bg-white text-neutral-900 sm:h-48 sm:w-[32rem]">
      <nav aria-label="Collection views" className="flex items-start justify-between gap-2 border-b border-neutral-200">
        <a href="#" aria-current="page" className="-mb-px flex h-10 items-center gap-2 border-b-2 border-neutral-900 px-1 text-sm font-medium text-neutral-900 transition-colors hover:border-neutral-900 hover:text-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">All<span className="rounded-full bg-neutral-100 px-1.5 text-xs tabular-nums text-neutral-600">24</span></a>
        <a href="#" className="-mb-px flex h-10 items-center gap-2 border-b-2 border-transparent px-1 text-sm font-medium text-neutral-500 transition-colors hover:border-neutral-300 hover:text-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Open<span className="rounded-full bg-neutral-100 px-1.5 text-xs tabular-nums text-neutral-600">12</span></a>
        <a href="#" className="-mb-px hidden h-10 items-center gap-2 border-b-2 border-transparent px-1 text-sm font-medium text-neutral-500 transition-colors hover:border-neutral-300 hover:text-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 sm:flex">Closed<span className="rounded-full bg-neutral-100 px-1.5 text-xs tabular-nums text-neutral-600">8</span></a>
        <a href="#" className="-mb-px hidden h-10 items-center gap-2 border-b-2 border-transparent px-1 text-sm font-medium text-neutral-500 transition-colors hover:border-neutral-300 hover:text-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 sm:flex">Drafts<span className="rounded-full bg-neutral-100 px-1.5 text-xs tabular-nums text-neutral-600">4</span></a>
        <details open className="group relative -mb-px">
          <summary className="flex h-10 cursor-pointer list-none items-center gap-1 border-b-2 border-transparent px-1 text-sm font-medium text-neutral-500 transition-colors hover:border-neutral-300 hover:text-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 [&::-webkit-details-marker]:hidden">
            More
            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4 transition-transform group-open:rotate-180"><path d="m6 9 6 6 6-6" /></svg>
          </summary>
          <div className="absolute top-full right-0 mt-2 w-48 rounded-md border border-neutral-200 bg-white p-1 shadow-lg">
            <ul role="list">
              <li className="sm:hidden"><a href="#" className="flex h-9 items-center rounded-md px-3 text-sm text-neutral-900 transition-colors hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Closed</a></li>
              <li className="sm:hidden"><a href="#" className="flex h-9 items-center rounded-md px-3 text-sm text-neutral-900 transition-colors hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Drafts</a></li>
              <li><a href="#" className="flex h-9 items-center rounded-md px-3 text-sm text-neutral-900 transition-colors hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Archived</a></li>
              <li><a href="#" className="flex h-9 items-center rounded-md px-3 text-sm text-neutral-900 transition-colors hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Assigned</a></li>
              <li><a href="#" className="flex h-9 items-center rounded-md px-3 text-sm text-neutral-900 transition-colors hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Following</a></li>
            </ul>
          </div>
        </details>
      </nav>
    </div>
  )
}

Pattern notes

When to use: Use for page navigation with counts and secondary destinations. Choose tabs-underline-panels for local radio-controlled content or dropdowns-action-menu for commands. Variations: replace counts with short status pills, select a different current page, or reduce the permanent overflow destinations.
Hierarchy: The current page is All, marked by aria-current and a dark underline. Each visible page link has a one-word label and short count. More opens additional one-word destinations. These are navigation links, so they retain link semantics and do not switch content panels.
Responsive: Below 640px All and Open remain in the row, while Closed and Drafts join the three permanent destinations in More. At 640px all four count links show in the row and More contains three destinations. Mobile height is increased to 256px so all five menu links fit within the 256px-high layout.
Layout: A relative 288px (w-72) root reserves 256px (h-64) height for the open mobile menu; at 640px it becomes 512px (sm:w-[32rem]) by 192px (sm:h-48). A flex navigation row with 8px minimum gaps and space-between alignment sits on a 1px divider. Links and More are 40px high with 2px bottom indicators. Counts are 12px tabular figures in neutral-100 pills. The right-aligned 192px menu sits 8px below More, with rounded-md corners, a border, shadow-lg, 4px padding and 36px links.
States: More is open on entry; its chevron rotates 180 degrees when open with a 150ms transition. Summary activation closes and reopens the panel. Links hover to neutral-700 with a neutral-300 underline; the current link keeps neutral-900 text and underline. Menu links hover neutral-100. All links and summary show a 2px neutral-900 focus outline offset 2px. No disabled links are shown.

Desktop wireframe

┌──────────────────────────────────────────────────────┐
│ [All 24] [Open 12] [Closed 8] [Drafts 4] [More ^]    │
│ ──────────                                           │
│                                 ┌───────────────┐    │
│                                 │ [Archived]    │    │
│                                 │ [Assigned]    │    │
│                                 │ [Following]   │    │
│                                 └───────────────┘    │
└──────────────────────────────────────────────────────┘

View all

Tabs — Bottom bar with icons
Layout tags: stacked,icons,media,compact
Tabs — Centered period choices and a metric
Layout tags: centered,stacked,numbers,compact
Tabs — Counted views beneath a toolbar
Layout tags: stacked,row,numbers,compact

Tabs — Counted links with More menu

Pattern notes

More in Tabs

Tabs — Bottom bar with icons

Tabs — Centered period choices and a metric

Tabs — Counted views beneath a toolbar