Components / Layout
Navbar
A top bar with a brand (optionally a home link), start, centre and end regions and a collapsible menu; optionally aligned to the Container width. Extra attributes go to the header; startAttrs, centerAttrs and endAttrs go to the regions.
@ruckc/truss-ui Layout
Import
import { Navbar } from '@ruckc/truss-ui';Playground
variant
API
| Prop | Type | Default | Description |
|---|---|---|---|
brand snippet | Snippet | — | Identity (logo, product name) at the very start, before `start`, in the display font. With `brandHref` it is wrapped in a home link. |
brandHref | string | — | Renders the brand inside `<a href>` (a home link). Ignored without `brand`. |
start snippet | Snippet | — | Start of the range. |
center snippet | Snippet | — | Map centre as `[lon, lat]`. Bind it to track panning. |
end snippet | Snippet | — | End of the range. |
sticky | boolean | true | Stay pinned to the top while scrolling. |
variant | 'solid' | 'translucent' | 'solid' | `translucent` blends the surface with the content scrolling beneath it (blurred where supported; solid under reduced transparency). |
elevated | boolean | true | Drop the shadow and keep only the bottom border. |
collapseBelow | string | number | — | Viewport width (px, or any CSS length such as `48rem`) at or below which `menu` moves into a drawer behind a menu button. |
menu snippet | Snippet | — | Primary navigation (usually a `<NavList>`). Shown in the centre region (or at the end, see `menuAlign`) when wide, in a drawer when collapsed. |
menuAlign | 'center' | 'end' | 'center' | Where `menu` sits when the bar is wide: the centre region, or at the trailing edge just before the `end` content. |
contained | boolean | 'sm' | 'md' | 'lg' | false | Align the content to the `Container` max-width and gutters while the background stays full-bleed. `true` is `lg`; sizes match `Container`. |
menuLabel | string | 'Menu' | Accessible name of the menu button and the drawer title. |
startAttrs | HTMLAttributes<HTMLElement> | — | Extra attributes for the start, centre and end region wrappers (e.g. `data-testid`). Attributes on the component itself go to the `<header>`. |
centerAttrs | HTMLAttributes<HTMLElement> | — | |
endAttrs | HTMLAttributes<HTMLElement> | — | |
class | string | — |