NavigationMenu · amezquita design system

Import

import { NavigationMenu } from '@amezquita/design-system/components/composition/NavigationMenu'

Live render

Props

Prop	Type	Description
`items`	`NavItem[]`	The header's navigation. Each item is a link `{ id, label, href, icon? }` or a group `{ id, label, icon?, items: NavLink[] }`, which renders as a dropdown of links. Two levels at most. Type it with `import type { NavItem } from '@amezquita/design-system/components/composition/NavigationMenu'` — the same type SideNav exports. Pass the same array to SideNav's `headerItems` so the links are in the mobile drawer, since NavigationMenu hides itself below 1024px.
`currentHref?`	`string`	Your router's current pathname. An exact match sets `aria-current="page"` on that link and marks its group active.
`LinkComponent?`	`NavLinkComponent`	Component to render links with, called with `href` (a string), `className`, `aria-current`, `onClick` and `children`. `next/link` can be passed as-is (`LinkComponent={NextLink}`); another router's Link must forward its ref and pass those props through to the `<a>`. Defaults to a plain `<a>`.
`aria-label?`	`string`	Names the `<nav>` landmark. Defaults to "Main"; give each `<nav>` on a page a different name.

Also accepts all props of: Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'defaultValue' | 'dir'>

Usage example

tsx

<NavigationMenu
  currentHref="/work"
  items={[
    { id: 'work', label: 'Work', href: '/work' },
    {
      id: 'writing',
      label: 'Writing',
      items: [
        { id: 'essays', label: 'Essays', href: '/writing/essays' },
        { id: 'notes', label: 'Notes', href: '/writing/notes' },
        { id: 'talks', label: 'Talks', href: '/writing/talks' },
      ],
    },
    { id: 'about', label: 'About', href: '/about' },
    { id: 'contact', label: 'Contact', href: '/contact' },
  ]}
/>

Accessibility

Built on Radix NavigationMenu: a <nav> landmark, groups open from a real <button> with aria-expanded
Keyboard: Tab moves between top-level items; Enter/Space opens a group and Tab moves into its links; Escape closes and returns focus to the trigger; arrow keys move between top-level items
Hover also opens a group, after Radix's short delay
Every top-level item is at least 44px tall (--size-touch-target)
The dropdown renders inside its own item rather than in a portal, so it carries --z-dropdown to stay above later page content