Skip to main content
MACAW

TabNav

Moleculebeta@macaw-ds/ui · since 0.1.0

Page-level tabs where each tab is its own URL. Not for switching panels in place; that is Tabs (not in the system yet).

Open gallery

Navigation tabs for the sections of a page: Overview, Usage, Accessibility, Code. Each item is a link, so tabs can be bookmarked, shared and opened in a new tab. The current tab sets aria-current="page". Usually rendered by PageHeader's tabs slot.

Playground

Controls are generated from the manifest; the snippet is what the CLI prints. Show focus and Reduced motion appear only when they apply.

Frame theme

What moves: Underline and text colour ease on hover. Hover transitions are 100 ms, so the difference is subtle by design.

Examples
import { TabNav } from '@macaw-ds/ui';

<TabNav aria-label="Page sections">
  <TabNav.Item asChild>
    <Link href="/invoices/inv-0041">Overview</Link>
  </TabNav.Item>
  <TabNav.Item asChild>
    <Link href="/invoices/inv-0041/payments">Payments</Link>
  </TabNav.Item>
</TabNav>

Controls

Names the navigation landmark, e.g. "Invoice sections".

On TabNav.Item: the current page.

Examples

The named exports of the examples file, rendered as they ship.