UI & Components

Navbar and Navigation Menu

Navbar and Navigation Menu: anatomy, keyboard behavior, state, and theming in Askr.

Example

import { NavigationMenu, NavigationMenuItem, NavigationMenuLink, NavigationMenuList } from '@askrjs/themes/components';

<NavigationMenu aria-label="Primary navigation">
  <NavigationMenuList>
    <NavigationMenuItem><NavigationMenuLink href={projectsRoute}>Projects</NavigationMenuLink></NavigationMenuItem>
    <NavigationMenuItem><NavigationMenuLink href={reportsRoute}>Reports</NavigationMenuLink></NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Despite the page title, the only export at `@askrjs/themes/navigation-menu` is `NavigationMenu` and its parts — there's no separate `Navbar` primitive on this subpath. Use these pieces to build a horizontal menu bar with flyout content: a top-level list of items, each optionally opening a panel of links. If you actually want the responsive app-header component (with a collapsing hamburger state), that's `Navbar` from the general themes component barrel, not this one.

Install and import

```tsx import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuViewport, NavigationMenuIndicator, } from '@askrjs/themes/navigation-menu'; ``` This subpath is an alias into the shared components barrel, so importing the same names from `@askrjs/themes/components` works identically.

Live examples

The example composes `NavigationMenu` with a `NavigationMenuList` of `NavigationMenuItem`/`NavigationMenuLink` pairs, and passes route destinations rather than hand-written path strings. Note the `aria-label` on the menu itself: with more than one navigation landmark on a page, each needs its own name for that landmark list to be usable.

Anatomy

`NavigationMenu` renders a `<nav>`, `NavigationMenuList` an `<ul>`, and `NavigationMenuItem` an `<li>` — a plain nested list under the hood. `NavigationMenuTrigger` is a real `<button type="button">` (with the `nav-item` class baked in), while `NavigationMenuContent`, `NavigationMenuLink`, `NavigationMenuViewport`, and `NavigationMenuIndicator` are generic slotted elements (a div, an anchor, a div, and a div respectively) that only exist to give you stable markup and `data-slot` hooks for the flyout panel, its links, the clipping viewport, and an active-tab indicator strip.

State model

None of these components track open/closed state, active item, or hover intent — there's no internal store or context here at all. You decide which trigger's content is visible, typically with a bit of local state or by composing `NavigationMenuTrigger`/`NavigationMenuContent` with the interaction primitives from `@askrjs/ui`. The themed `Navbar` gives you two different worked examples of that pattern, for two different jobs: its mobile hamburger collapse is built on `Collapsible`/`CollapsibleTrigger`/`CollapsibleContent`, while a per-item flyout (`NavDropdown`) is built on `Dropdown`/`DropdownTrigger`/`DropdownContent` — pick whichever matches what you're building rather than assuming one mechanism covers both. Treat this package as markup, not behavior.

Keyboard and accessibility

Because `NavigationMenu` is a `<nav>` and `NavigationMenuTrigger` is a genuine `<button>`, you get landmark navigation and native Tab/Enter/Space activation for free. What you don't get automatically is `aria-expanded`, `aria-controls`, or Escape-to-close on the trigger/content pair, or arrow-key movement across items — those are your responsibility to wire up if you're building a real dropdown-style flyout rather than a flat link list.

Styling and tokens

Every part carries a `data-slot` attribute — `navigation-menu`, `navigation-menu-list`, `navigation-menu-item`, `navigation-menu-trigger`, `navigation-menu-content`, `navigation-menu-link`, `navigation-menu-viewport`, `navigation-menu-indicator` — and the trigger additionally gets the `nav-item` class. Style off those hooks instead of assuming a fixed DOM shape, since `as`/`asChild` let consumers swap the underlying element.

API

`NavigationMenu`, `NavigationMenuList`, and `NavigationMenuItem` accept the shared `CatalogComponentProps` shape, including `as` to render a different tag. `NavigationMenuTrigger` is built on the same internal button-part helper as the rest of the catalog's button-flavored components, and that helper accepts `asChild` but silently discards `as` — passing it has no effect, it always renders a real `<button>` unless you use `asChild`. `asChild` itself hands rendering off to a `Slot` (useful for wrapping your router's `Link`) on every part, plus `class`, `children`, `ref`, and arbitrary passthrough attributes are supported throughout. `NavigationMenuTrigger` also accepts a `type` override, though it defaults to `"button"` so it never accidentally submits a form.

Edge cases

Multi-level or mega-menu content is entirely on you to lay out inside `NavigationMenuContent` — there's no built-in positioning or collision handling in `NavigationMenuViewport`, it's just a slotted div. Since there's no shipped open state, SSR is trivially safe (everything renders closed/static by default), but that also means client hydration has to attach whatever interaction logic you add. If you need real click-outside dismissal or focus trapping for a flyout, reach for `@askrjs/ui`'s dropdown primitives rather than assuming this package provides it.

See Sidebar and Menubar for the other two navigation-chrome building blocks, Application Chrome for how these fit into a full page shell, and Breadcrumb and Pagination for the smaller wayfinding controls that often sit alongside a nav bar.