Tab Navigation (link tabs)

Page-level navigation that looks like tabs but is a list of links (aria-current="page"), for routed sections.

Import

import { TabNav } from '@marbleui/ui'

Props

<TabNav>

Prop	Type	Default	Description
current *required	`string`	`—`	href of the current page.
items *required	`TabNavItem[]`	`—`
aria-label	`string`	`—`
className	`string`	`—`
variant	`'underline' \| 'pill'`	`'underline'`

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitive: React Aria Link. Follow the primitive's docs for the full keyboard map.

Usage notes

Tab-styled navigation for routed sections, rendered as links with aria-current="page". For panels that switch in place without a URL change use Tabs.

<TabNav
  aria-label="Settings"
  current="/settings/billing"
  items={[
    { href: '/settings', label: 'General' },
    { href: '/settings/billing', label: 'Billing', count: 2 },
  ]}
/>

current is the href of the active page; it must match an item’s href exactly.
It has no tablist keyboard model: items are ordinary links reached with Tab.
aria-label defaults to “Sections”; set a more specific one when a page has several navs.
variant is underline (default) or pill.

Example source · show

import { useState } from 'react'
import { RouterProvider } from 'react-aria-components'
import { TabNav } from './tab-nav'

const items = [
  { href: '/overview', label: 'Overview' },
  { href: '/issues', label: 'Issues', count: 12 },
  { href: '/pulls', label: 'Pull requests', count: 3 },
  { href: '/settings', label: 'Settings' },
]

// RouterProvider makes the links navigate client-side; here it just updates local state.
function Demo({ variant }: { variant: 'underline' | 'pill' }) {
  const [path, setPath] = useState('/issues')
  return (
    <RouterProvider navigate={setPath}>
      <TabNav items={items} current={path} variant={variant} className="w-[30rem]" />
    </RouterProvider>
  )
}

export const styles = { Underline: () => <Demo variant="underline" />, Pill: () => <Demo variant="pill" /> }

Source: packages/ui/src/tab-nav/tab-nav.tsx

Catalog

Category: navigation
Priority: Core
Primitive: react-aria
React Aria: Tabs (href items)
Base UI: Tabs