Nav & tabs
Navigation link lists built from Nav, NavItem, and
NavLink — styled as base links, bordered tabs, or
filled pills — plus a stateful Tabs component that
switches panels.
Import
import { Nav, NavItem, NavLink, Tabs, Tab } from '@metatoy/bootstrap-styled';Base nav
NavLink takes active and disabled and is polymorphic via as (render it
as a router link while keeping the styling).
Tabs & pills
Set variant="tabs" for bordered tabs or variant="pills" for filled active
pills.
Fill & justify
fill grows items proportional to their content; justified makes every item
exactly equal width.
Interactive tabs
The Tabs component renders a tablist plus the active panel and manages the
selection. Each child Tab takes an eventKey, a title, and optional
disabled; use defaultActiveKey (uncontrolled) or activeKey + onSelect
(controlled).
Props
Nav
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "tabs" | "pills" | — | Style variant → Bootstrap `.nav-tabs` (bordered tabs) / `.nav-pills` (filled active pill). |
| fill | boolean | — | `.nav-fill` — items grow to fill the width, proportional to their content. |
| justified | boolean | — | `.nav-justified` — items grow to fill the width, all equal. |
| as | React.ElementType | — | — |
NavLink
| Prop | Type | Default | Description |
|---|---|---|---|
| active | boolean | — | — |
| disabled | boolean | — | — |
| as | React.ElementType | — | — |
Tabs
| Prop | Type | Default | Description |
|---|---|---|---|
| activeKey | string | — | Controlled active key. |
| defaultActiveKey | string | — | Uncontrolled initial active key. |
| onSelect | (key: string) => void | — | — |
| children● | React.ReactNode | — | — |
Tab
| Prop | Type | Default | Description |
|---|---|---|---|
| eventKey● | string | — | — |
| title● | React.ReactNode | — | — |
| disabled | boolean | — | — |
| children | React.ReactNode | — | — |
NavItem is a styled <li> and accepts native list-item attributes. Tab is a
marker component — it renders nothing on its own; Tabs reads its props.
Theming
Nav and NavLink read the Bootstrap --bs-nav-link-* tokens
(--bs-nav-link-color, --bs-nav-link-hover-color,
--bs-nav-link-disabled-color, --bs-nav-link-padding-x/y). Tabs use
--bs-border-color and --bs-body-bg for the active-tab border/fill; pills use
the theme’s link and primary colors. These are the same custom properties the
Navbar cascades into, so link theming stays consistent between the two.
Accessibility
The Tabs component renders role="tablist", role="tab" with
aria-selected, and role="tabpanel", and skips disabled tabs. For a plain
Nav used as site navigation, wrap it in a <nav> landmark and mark the
current NavLink with active. Disabled NavLinks render as non-interactive.