Top Nav
Dashboard top navigation. Collapses to two rows at ≤ --bp-md. Shown inline here; normally fixed to the top of the viewport.
Default
Trailing
Avatar or other global actions sit on the right.
Developer
import { TopNav } from "@financial-tracking/design-system"API reference
Brand label and primary links are provided by the product app — TopNav only owns chrome, active styles, and scroll blur. Optional trailing slot (e.g. avatar) is right-aligned. --header-height includes safe-area inset on notched devices.
| Prop | Type | Default |
|---|---|---|
brandProduct name (and optional home href) rendered in the logo slot. | TopNavBrand | — |
itemsPrimary nav links. Use matchPrefixes when one item covers multiple path trees (e.g. /accounts and /account). | TopNavItem[] | — |
pathnamePath used for active matching. Defaults to usePathname(). Pass a demo path in docs previews. | string | — |
trailingRight-aligned slot for profile menu, avatar, or global actions. | ReactNode | — |