Component

Nav

Responsive top-level navigation assembled from Concrete layout and link primitives.

Use Nav for product or docs chrome when links are known data. It owns item mapping and current-link semantics, not route policy or app state.
navigation
DOM renderImage render
NavDefault

Playground

Controls update query params directly. Complex slots use item-owned examples so component states stay deterministic, linkable, and screenshot-ready.

Loading playground

Rendered matrix

Every state maps to the same component render route through the state query param.

Default

Primary navigation with Concrete brand.
Render state

Actions

Navigation with package and source links.
Render state

Slot

Navigation with an explicit brand slot.
Render state

Sticky

Sticky top-level navigation chrome.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
items *readonly NavItem[]-Primary navigation items.
actionsreadonly NavItem[]-Optional trailing navigation or external action links.
activeIdstring-Marks the matching item current.
brandReactNode-Optional brand slot. Defaults to Concrete mark and word.
brandHrefstring/Brand destination.
density'compact' | 'comfortable' | 'editorial'compactContainer and cluster density.
labelstringPrimaryAccessible nav landmark label.
placement'static' | 'sticky'staticOptional top-level sticky placement.