Accessibility
Navbar from @prepared911/ui/navbar 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.
header. Set landmark to a nav and pass label only when this bar is not the page banner. The route tabs are a labelled nav inside the bar.TabsTrigger, preserving native link focus, activation, modifier-click, and current-route semantics.aria-hidden, so assistive technology encounters only the interactive destinations.href, label names the link and the mark is decorative. With only label, the mark is an image with that name.appMenuLabel. Account triggers composed in NavbarEnd must include the visible account name in their accessible name.landmark to a nav. Then label must name that nav.NavbarBrand label when the mark is a link or the only product name. Name the product, not the image file.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.Tabs roots are presentation-only so they do not split that landmark.Tabs.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.renderTab replaces TabsTrigger in the visible row only. Keep that output semantically equivalent to a current-aware destination link. Measurement uses renderMeasurementTab or an inert default TabsTrigger 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.