Navigation

Section nav

A page's own sections, such as a settings page's: a button or a link per section, with an icon and a trailing count. Its own width sets the layout: a column in a rail, rows that wrap across a narrow page. Rows grow to 44 px on touch screens.

Live example

Import

Each family is its own entry point, so a page loads only what it uses.

tsx

import { CountBadge } from "@nibapp/ui/components/badge";import { SectionNavItem, SectionNavList, SectionNavSeparator } from "@nibapp/ui/components/section-nav";

Props

Each component's own props and variants, read from its source. What it also takes from an element or a Base UI part is named below its table.

CountBadge

Numeric pill for unread/pending counts. The number rolls softly when it changes.

Prop	Type	Default	Description
tone	"neutral" \| "ink" \| "warning" \| "danger"	"neutral"	neutral Gray pill — unread counts in sidebars. ink Ink pill — draws the eye without color. warning Something waits on the person (needs-you counts). danger Errors or blocking items only.
count (required)	number	—
max	number	99	Values above `max` render as `max+`.
showZero	boolean	false	Render a `0` instead of nothing.

Also takes the props of a <span> element, except children.

SectionNavItem

One section: a button by default; `render={<Link to="…" />}` when the section has an address of its own (copying the link works, and hovering can start its reads).

Prop	Type	Default	Description
icon	ReactNode	—	The section's glyph, sized and toned for you.
active	boolean \| undefined	false	The section on screen: it takes the selection and `aria-current="page"`.
trailing	ReactNode	—	At the row's end: a count or a status (`CountBadge`).

Also takes .

SectionNavList

A page's own sections (a settings page's): put it in the page's `<nav>`, beside whatever else the nav holds (a search field, a group's heading, a hint). Several lists may share one nav, one per group.

Also takes the props of a <ul> element.

SectionNavSeparator

A hairline between groups of sections in one list: across the column, or upright between rows' items.

Also takes the props of a <li> element, except children.