Loading navigation…
User
Accessibility
Navbar from @prepared911/ui-core provides a named application navigation landmark and composes link-based destinations with menu-based overflow and app switching. The component handles landmark, measurement, and menu primitives; your job is to supply meaningful localized names, accurate route state, and accessible custom content.
role="navigation" with the required ariaLabel. Nested TabNav roots used for destinations and overflow measurement are not additional landmarks.TabNavItem, preserving native link focus, activation, modifier-click, and current-route semantics.aria-hidden, so assistive technology encounters only the interactive destinations.ariaLabel exposes role="img" and the supplied accessible name.appMenuLabel. Account triggers composed in NavbarEnd must include the visible account name in their accessible name.Navbar ariaLabel to the product or navigation region, such as "Dispatch" or "Supervisor Hub." If a page has multiple navigation landmarks, give each a distinct name.NavbarBrand ariaLabel whenever variant="logo". Name the product, not the image file or visual treatment.overflowMenuLabel, appMenuLabel, account controls, and icon-only action names.currentPath synchronized with the router. Add extraRouteMatchers when nested routes belong to one destination.appMenuLabel. Do not repeat the current app name in that prop; the component combines them.renderTab replaces the complete interactive link in the visible row, so it must implement native link focus and activation, routing, current-state, modifier-click, and keyboard semantics. Use renderMeasurementTab for a single width-matched, non-interactive measurement element; it does not need to be an anchor. A custom renderOverflowMenuItem must return a focusable menu item that calls the supplied onSelect from the in-menu row for destination activation and communicates the supplied active state. If that row opens secondary UI in a portal, call onInteractingChange(true) while pointer or focus remains in the row or portaled UI, call onInteractingChange(false) when the interaction ends and during unmount cleanup, and do not call onSelect from portaled close actions. 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.NavbarEnd needs a tooltip or accessible name that states its action.navigation landmark.TabNav roots are presentation-only so they do not split that landmark.TabNav.menuitemradio choices.aria-current="page" on its menu row.--pr-navbar-account-name-max-width (12rem default); keep the full name in the accessible name.NavbarGroup is visual grouping only. If an action cluster needs a group name, provide it through the interactive controls or a higher-level labeled pattern.When resizing moves destinations between the inline row and overflow menu, the destination remains reachable. Avoid changing width while a person is interacting with the Navbar unless the viewport or surrounding content genuinely changed. After route navigation, move focus to the new page heading or main content according to the app routing policy; do not leave focus in global chrome indefinitely.
When app selection replaces the destination model, update the route to a valid destination in the selected app. Keep focus on the switcher trigger after the menu closes, then let subsequent navigation follow the app focus policy.
renderTab replaces TabNavItem in the visible row only. Keep that output semantically equivalent to a current-aware destination link. Measurement uses renderMeasurementTab or an inert default TabNavItem and reads every list child, so a non-anchor stand-in still occupies a slot. Do not put interactive side effects in the measurement renderer.onInteractingChange(true) while engaged and false when the interaction ends and during unmount cleanup; every true call must be balanced so the menu cannot remain retained. Wire onSelect to the in-menu destination row only; Navbar dismisses More when onSelect runs.onClickReplacesNavigation to turn primary navigation into an unrelated command. Put actions in NavbarEnd or a menu.