Sub navigation

SubNavigation is the second column of a two-column app shell — it pairs a collapsed primary SidebarNavigation with a panel of section-specific links. It takes an items array and renders each entry as a NavItem inside a <nav> landmark, with optional header and footer slots. For a single-sidebar shell, use SidebarNavigation directly.

Use it for

• The section-nav column in a two-column app shell (collapsed rail + sub-nav + content)
• Grouping the pages of one product area behind a shared section header
• Any vertical list of section links that needs a header, footer, or a panel divider

Import

import { SubNavigation } from '@brikdesigns/bds';

Variants

Default

items is an array of { label, href, active?, icon?, disabled? }. Each becomes a NavItem; mark the current page with active.

<SubNavigation
  ariaLabel="Settings navigation"
  items={[
    { label: 'Profile', href: '/settings/profile', active: true },
    { label: 'Security', href: '/settings/security' },
    { label: 'Billing', href: '/settings/billing' },
  ]}
/>

Header and footer

header and footer render above and below the item list — a section title up top, a secondary action or account row at the bottom.

<SubNavigation
  header={<span>Settings</span>}
  footer={<NavItem label="Sign out" href="/logout" />}
  items={items}
/>

Borderless

bordered (default true) draws the right-side divider between the sub-nav panel and the content column. Set false when the shell supplies its own separation — only the right border is removed; header/footer dividers are unaffected.

<SubNavigation bordered={false} items={items} />

Custom width and routing

width overrides the default 194px. linkComponent forwards a router-aware component to every NavItem for client-side routing. See ADR-012.

import Link from 'next/link';

<SubNavigation width="220px" linkComponent={Link} items={items} />

When not to use

• Don't use it for in-page tabs. Switching panels within a single page is TabBar.
• Don't hand-build the rows. Each item is a NavItem — pass the items array rather than composing children.
• Don't nest SubNavigation inside SubNavigation, or stack two on one route. One section-nav column per shell — further drill-down is PageHeader's tabs (TabBar) or inline sections in the content column.

Accessibility

• Renders an <aside> wrapping a <nav> landmark. Pass ariaLabel (defaults to "Section navigation") — required when more than one nav landmark is on the page, e.g. this SubNavigation alongside the primary SidebarNavigation, so each is distinguishable. It does not license stacking two SubNavigations.
• Active state and keyboard/focus behavior come from the underlying NavItem — the current item carries aria-current="page".

API

Each SubNavItem is { label, href, active?, icon?, disabled? }.

Related

• SidebarNavigation — the primary rail SubNavigation pairs with
• NavItem — the link primitive each row renders as
• TabBar — in-page panel switching
• Storybook playground