Orbit

Subnav

A horizontal row of links for switching between the sections of a page.

Basic

Items wrap the consumer's link element. The active item reads in the primary text color and carries a round indicator dot centered beneath it; the rest are muted until hovered.

import Link from 'next/link'
import { Subnav, SubnavItem } from '@polar-sh/orbit'

<Subnav label="Customer sections">
  <SubnavItem active={pathname === overviewHref}>
    <Link href={overviewHref}>Overview</Link>
  </SubnavItem>
  <SubnavItem active={pathname === topHref}>
    <Link href={topHref}>Top Customers</Link>
  </SubnavItem>
</Subnav>

Page placement

Typically placed between the page header and the content it switches.

<Box flexDirection="column" rowGap="xl">
  <Subnav label="Customer sections">…</Subnav>
  {content}
</Box>

Subnav props

label

stringdefault: 'Secondary'

Accessible name for the navigation landmark, distinguishing it from the primary navigation.

children

ReactNode

required

One or more SubnavItem elements.

SubnavItem props

active

booleandefault: false

Marks the item as the section currently shown. Emphasised and exposed via aria-current="page".

children

ReactNode

required

The link for the section. Pass your router's link element so client-side navigation is preserved; color and typography are inherited from the item.