Navigation

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.

Sourcesrc/components/ui/nav-tabs.tsx

Import

import {
  NavTabs,
  NavTabsLink,
} from "@mikenotthepope/substrateui"

Composition

NavTabs
└── NavTabsLink

With a Next.js Link

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.
`render`	`ReactElement`	`—`	Render a different element instead of an <a> (e.g. render={<Link href=… />}), so the tab keeps soft navigation.