Prepared Docs

Navbar is a stateless application-chrome container from @prepared911/ui-core. Compose its start and end regions explicitly, then connect NavbarTabs and multi-app NavbarBrand variants to app-owned routing and selection state. Responsive overflow is enabled by default and keeps every destination reachable. NavbarTabs first measures the complete tab row without reserving space for More, then reserves the More trigger only after that row is established to overflow.

Name	Type	Default	Description
`ariaLabel`	`string`	—	Accessible name for the navigation landmark. Consumer-localized.
`children`	`ReactNode`	—	Composed chrome, typically `NavbarStart` and `NavbarEnd`.
`className`	`string`	—	Additional CSS class name applied to the navbar root.

Storybook

Interactive examples and edge cases for this component are in Storybook.

Prepared911 Top Nav

Whitelabel

Multi App

Import

Composition components

Name	Type	Default	Description
`NavbarStart`	`{ children: ReactNode }`	`—`	Shrinkable start region for branding and primary destinations.
`NavbarEnd`	`{ children: ReactNode }`	`—`	Content-sized end region for selectors, account controls, and actions.
`NavbarGroup`	`{ children: ReactNode }`	`—`	Full-height trailing action cluster with a leading separator.

NavbarBrand

Name	Type	Default	Description
`children`	`ReactNode`	`—`	Logo mark or whitelabel name.
`ariaLabel`	`string`	`—`	Accessible name for a logo mark. Required for the logo variant.
`variant`	`"logo" \| "text"`	`"logo"`	Renders a logo container or constrained text brand.
`multiApp`	`false \| true`	`false`	Discriminator that enables the app switcher props.

When multiApp is true, provide the complete controlled app-switcher contract:

Name	Type	Default	Description
`apps`	`readonly NavbarAppItem[]`	`—`	Ordered destinations shown as radio menu items.
`currentApp`	`string`	`—`	Selected app key.
`onSelectApp`	`(key: string) => void`	`—`	Called when a different app is selected.
`appMenuLabel`	`string`	`—`	Localized action phrase, such as "Switch app," combined with the visible current app name.

NavbarTabs

Name	Type	Default	Description
`items`	`readonly NavbarTabItem[]`	`—`	Ordered app-owned primary destinations.
`currentPath`	`string`	`—`	Current pathname used for active-state matching.
`navigate`	`(path: string) => void`	`—`	SPA navigation callback shared by inline and overflow destinations.
`matchPath`	`MatchPathFn`	`TabNav fallback`	Optional custom route matcher.
`overflowMenuLabel`	`string`	`"More"`	Localized visible label for the overflow trigger. Defaults to "More".
`overflow`	`boolean`	`true`	Measures the complete tab row first. Reserves More only after real overflow is established, then moves destinations into a menu.
`overflowMenuOpenOnHover`	`boolean`	`false`	Opens the overflow menu on hover. Click remains available. Default is click-only.
`slidingAnimation`	`boolean`	`true`	Enables the animated active-tab underline.

NavbarTabItem

Name	Type	Default	Description
`key`	`string`	`—`	Stable destination identifier.
`to`	`string`	`—`	Path passed to the underlying TabNavItem.
`label`	`string`	`—`	Localized visible label.
`counter`	`number \| string`	`—`	Optional attention counter.
`extraRouteMatchers`	`TabNavItemProps['extraRouteMatchers']`	`—`	Additional routes that mark the destination active.
`leadIcon`	`SVGAsset`	`—`	Optional icon on the default tab.
`onClick`	`() => void`	`—`	Optional callback that runs before navigation.
`onClickReplacesNavigation`	`boolean`	`false`	Lets onClick replace default path navigation.
`renderTab`	`() => ReactNode`	`—`	Replaces the complete TabNavItem in the visible row only; the renderer owns link, routing, current-state, and keyboard semantics.
`renderMeasurementTab`	`() => ReactNode`	`—`	Replaces the hidden measurement node. Must be a single element whose width matches the visible tab. It does not need to be an anchor. Avoid interactive side effects. When omitted, measurement uses an inert default TabNavItem.
`renderOverflowMenuItem`	`({ active, onInteractingChange, onSelect }) => ReactNode`	`—`	Custom overflow row that receives active state, onInteractingChange for retaining More during portaled UI, and onSelect for destination activation that also dismisses the menu.

When renderTab is present, Navbar does not wrap its result in TabNavItem and does not call that renderer from the hidden measurement row. The visible renderer must close over the item and routing state and provide the complete interactive destination, including href, activation, current-state, modifier-click, focus, and keyboard behavior. Provide renderMeasurementTab when the custom visible tab's width differs from the default TabNavItem; that output must be a single width-matched element, not necessarily an anchor, and stay free of interactive side effects. Overflow measures every measurement-list child, so a non-anchor stand-in still occupies a slot.

Custom overflow rows that open secondary UI in a portal call onInteractingChange(true) while pointer or focus remains in the row or its portaled UI. Interaction ending alone does not dismiss More. Outside events are suppressed while interaction is active; onSelect, Escape, or a deferred hover dismiss closes the menu. Call onInteractingChange(false) when the interaction ends and during unmount cleanup. Wire onSelect to the in-menu NavMenuItem for destination activation; Navbar dismisses More when onSelect runs. Do not call onSelect from portaled close actions.

Custom overflow with portaled UI

The pattern below mirrors a production Archive row: the in-menu NavMenuItem calls onSelect for navigation, while a hover-opened popover reports onInteractingChange and closes without selecting the destination.

Account composition

Navbar does not export an account primitive. Compose Menu or NavMenu in NavbarEnd with an avatar, a visible name that truncates only after --pr-navbar-account-name-max-width (12rem default), and a decorative ChevronDown that rotates 180 degrees when open. Use the same Icon rotation as the overflow More trigger, and keep the chevron from shrinking so it stays visible in every variation. Include the visible name in the trigger accessible name. Use click-open by default and NavMenu only when hover-open is an explicit product choice. Keep ChevronUpDown on the app switcher and drive it with IconMorphTechnique.PivotRotate so each arrow path-morphs to the inverted chevron in place while the menu is open, the same interpolator as SortAscending ↔ SortDescending. Do not use whole-glyph rotation on that asset: it is visually a no-op.

NavbarAppItem

Name	Type	Default	Description
`key`	`string`	`—`	Stable app identifier and radio value.
`label`	`string`	`—`	Localized app name.
`disabled`	`boolean`	`false`	Prevents selection while preserving the destination in the menu.

Default

Whitelabel

Constrained width and overflow

Overflow evaluates the full destination row against available start-region width before reserving the More trigger. When every destination fits, More stays hidden. The preview below constrains the chrome so overflow is visible.

Multi-app

Navbar / Usage

Navbar / Accessibility

Navbar

Storybook

Import

Composition components

NavbarBrand

NavbarTabs

NavbarTabItem

Custom overflow with portaled UI

Constrained width and overflow

Multi-app

View Source

Submit Issue

Name	Type	Default	Description
`ariaLabel`	`string`	—	Accessible name for the navigation landmark. Consumer-localized.
`children`	`ReactNode`	—	Composed chrome, typically `NavbarStart` and `NavbarEnd`.
`className`	`string`	—	Additional CSS class name applied to the navbar root.

Storybook

Interactive examples and edge cases for this component are in Storybook.

Prepared911 Top Nav

Whitelabel

Multi App

Import

Composition components

Name	Type	Default	Description
`NavbarStart`	`{ children: ReactNode }`	`—`	Shrinkable start region for branding and primary destinations.
`NavbarEnd`	`{ children: ReactNode }`	`—`	Content-sized end region for selectors, account controls, and actions.
`NavbarGroup`	`{ children: ReactNode }`	`—`	Full-height trailing action cluster with a leading separator.

NavbarBrand

Name	Type	Default	Description
`children`	`ReactNode`	`—`	Logo mark or whitelabel name.
`ariaLabel`	`string`	`—`	Accessible name for a logo mark. Required for the logo variant.
`variant`	`"logo" \| "text"`	`"logo"`	Renders a logo container or constrained text brand.
`multiApp`	`false \| true`	`false`	Discriminator that enables the app switcher props.

When multiApp is true, provide the complete controlled app-switcher contract:

Name	Type	Default	Description
`apps`	`readonly NavbarAppItem[]`	`—`	Ordered destinations shown as radio menu items.
`currentApp`	`string`	`—`	Selected app key.
`onSelectApp`	`(key: string) => void`	`—`	Called when a different app is selected.
`appMenuLabel`	`string`	`—`	Localized action phrase, such as "Switch app," combined with the visible current app name.

NavbarTabs

Name	Type	Default	Description
`items`	`readonly NavbarTabItem[]`	`—`	Ordered app-owned primary destinations.
`currentPath`	`string`	`—`	Current pathname used for active-state matching.
`navigate`	`(path: string) => void`	`—`	SPA navigation callback shared by inline and overflow destinations.
`matchPath`	`MatchPathFn`	`TabNav fallback`	Optional custom route matcher.
`overflowMenuLabel`	`string`	`"More"`	Localized visible label for the overflow trigger. Defaults to "More".
`overflow`	`boolean`	`true`	Measures the complete tab row first. Reserves More only after real overflow is established, then moves destinations into a menu.
`overflowMenuOpenOnHover`	`boolean`	`false`	Opens the overflow menu on hover. Click remains available. Default is click-only.
`slidingAnimation`	`boolean`	`true`	Enables the animated active-tab underline.

NavbarTabItem

Name	Type	Default	Description
`key`	`string`	`—`	Stable destination identifier.
`to`	`string`	`—`	Path passed to the underlying TabNavItem.
`label`	`string`	`—`	Localized visible label.
`counter`	`number \| string`	`—`	Optional attention counter.
`extraRouteMatchers`	`TabNavItemProps['extraRouteMatchers']`	`—`	Additional routes that mark the destination active.
`leadIcon`	`SVGAsset`	`—`	Optional icon on the default tab.
`onClick`	`() => void`	`—`	Optional callback that runs before navigation.
`onClickReplacesNavigation`	`boolean`	`false`	Lets onClick replace default path navigation.
`renderTab`	`() => ReactNode`	`—`	Replaces the complete TabNavItem in the visible row only; the renderer owns link, routing, current-state, and keyboard semantics.
`renderMeasurementTab`	`() => ReactNode`	`—`	Replaces the hidden measurement node. Must be a single element whose width matches the visible tab. It does not need to be an anchor. Avoid interactive side effects. When omitted, measurement uses an inert default TabNavItem.
`renderOverflowMenuItem`	`({ active, onInteractingChange, onSelect }) => ReactNode`	`—`	Custom overflow row that receives active state, onInteractingChange for retaining More during portaled UI, and onSelect for destination activation that also dismisses the menu.

Custom overflow with portaled UI

Account composition

NavbarAppItem

Name	Type	Default	Description
`key`	`string`	`—`	Stable app identifier and radio value.
`label`	`string`	`—`	Localized app name.
`disabled`	`boolean`	`false`	Prevents selection while preserving the destination in the menu.