NavTabs

A link-based tab bar for page-level navigation. Each tab is a real anchor, so pair it with server-driven routing (e.g. a ?tab= query param) to keep tabs bookmarkable and the back button working.

Basic NavTabs

<NavTabs>
  <NavTabsLink href="?tab=applications" active>Applications</NavTabsLink>
  <NavTabsLink href="?tab=questionnaire" badge={2}>Questionnaire</NavTabsLink>
  <NavTabsLink href="?tab=faq" disabled>FAQ</NavTabsLink>
</NavTabs>

With a Next.js Link

<NavTabs>
  <NavTabsLink asChild active>
    <Link href="?tab=applications">Applications</Link>
  </NavTabsLink>
  <NavTabsLink asChild>
    <Link href="?tab=faq">FAQ</Link>
  </NavTabsLink>
</NavTabs>

NavTabsLink API

Prop	Type	Default	Description
`active`	`boolean`	—	Marks this tab as the current one — draws the underline and sets aria-current="page".
`disabled`	`boolean`	—	Dims the tab and blocks interaction (aria-disabled).
`badge`	`React.ReactNode`	—	Optional trailing count or status pill.
`asChild`	`boolean`	`false`	Merge props onto the child element (e.g. a Next.js <Link>) instead of rendering an <a>, so the tab keeps soft navigation.