TopNavbar with inline links
Full bar with items prop
Full bar with inline links
Embedded link list
Embedded link list
Link row inside your own header layout
Browse components
TopNavbar
Top bar with brand, optional link list, theme toggle and a responsive mobile menu. Use embedded for a link-only strip inside your own header.
organisms 3 variants
Variants / states: headersidebarembedded
Live example
Default usage you can copy and adapt.
Props
The props you are most likely to need, with types and defaults.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| brand | string | No | "" | Brand text shown beside the logo area |
| brandHref | string | No | undefined | When set, the brand is a link |
| items | TopNavbarNavItem[] | No | [] | Built-in nav links (ignored when a nav snippet is provided) |
| navVariant | "header" | "sidebar" | No | "header" | Layout for built-in link list |
| embedded | boolean | No | false | Render only the link list (or nav snippet) inside a nav landmark |
| currentPath | string | No | "" | Active route for built-in links |