CatalystNavigation Menuv1.0.7Ready for Production
A collection of links for navigating internal applications with accessible multi-level dropdown support and customizable styling.
Prefer AI-assisted development?
Catalyst Navigation Menu wraps Radix UI Navigation Menu to provide an accessible, keyboard-navigable menu bar with multi-level dropdowns, smooth animations, active-page tracking, and Catalyst design token styling out of the box.
Installation
npm install @pmi/catalyst-navigation-menuimport {
NavigationMenuRoot,
NavigationMenuList,
NavigationMenuItem,
NavigationMenuTrigger,
NavigationMenuContent,
NavigationMenuLink,
NavigationMenuSub,
NavigationMenuViewport,
NavigationMenuIndicator,
} from '@pmi/catalyst-navigation-menu';Examples
Default
A complete navigation menu with certification cards and dropdown content:
Default Opened
A menu with an item opened by default:
Responsive behavior
The examples switch orientation to vertical below 640px. This is suitable for simple menus. For complex mobile navigation (many items, nested dropdowns), collapse the menu into a drawer or a hamburger button that reveals the navigation instead of stretching the dropdown viewport vertically.
API Reference
Navigation Menu is a compound component built on Radix UI primitives. Each part forwards ref and merges className via Catalyst's cn() utility.
NavigationMenuRoot
Root container that manages which menu is open and provides Radix context to all children.
NavigationMenuList
Horizontal (or vertical) list of menu items. Renders as <ul> with Radix list semantics.
NavigationMenuItem
Wraps a single trigger + content pair, or a standalone link.
NavigationMenuTrigger
Button that opens a dropdown. Ships with Catalyst default styles — override via className.
NavigationMenuContent
Dropdown panel shown inside NavigationMenuViewport. Includes slide-in/out animations driven by data-[motion=*] attributes.
NavigationMenuLink
A navigational link — use standalone inside NavigationMenuItem or nested inside dropdown content. Supports asChild for custom link components (e.g. React Router <Link>).
NavigationMenuViewport
Animated viewport container that hosts the open NavigationMenuContent. Place it below the list, wrapped in a positioning <div>.
NavigationMenuIndicator
Optional animated arrow that tracks the active trigger. Typically contains a styled <div> rotated 45°.
NavigationMenuSub
Creates a nested sub-navigation structure within dropdown content.
Accepts all standard Radix NavigationMenu Sub props (value, defaultValue, onValueChange, orientation).
Accessibility
Navigation Menu follows the Disclosure Navigation Menu pattern and is designed to meet WCAG 2.2 AA standards.
Keyboard Interactions
| Key | Action |
|---|---|
Tab / Shift + Tab | Moves focus forward or backward through top-level NavigationMenuTrigger and NavigationMenuLink items. When a dropdown is open, moves through its links before continuing to the next top-level item. |
Arrow Left / Right | Moves focus to the previous or next item in the current focus group (top-level items or links inside an open dropdown). Reversed in RTL. Vertical (below 640px in the examples) with an open trigger: the arrow matching the text direction (Arrow Right in LTR, Arrow Left in RTL) moves focus into NavigationMenuContent. |
Arrow Up / Down | Moves focus to the previous or next item in the current focus group (top-level items or links inside an open dropdown). Horizontal with an open trigger: Arrow Down moves focus into NavigationMenuContent. |
Home / End | Moves focus to the first or last item in the current focus group. Arrow keys do not wrap — use Home / End to jump to either end. |
Enter / Space | When focus is on a NavigationMenuTrigger, opens or closes its dropdown. |
Enter | When focus is on a NavigationMenuLink, activates the link. Space does not activate links. |
Escape | Closes the open dropdown and returns focus to its trigger. |
ARIA
NavigationMenuRootrenders a<nav>element. Provide anaria-labelto describe the navigation region when needed.NavigationMenuTriggerreceivesaria-expandedandaria-controls, which are managed automatically by Radix.- Use
aria-current="page"on theNavigationMenuLinkorNavigationMenuTriggerthat represents the current page. - Decorative chevron icons inside triggers should have
aria-hidden="true". NavigationMenuViewportexposes--radix-navigation-menu-viewport-widthand--radix-navigation-menu-viewport-heightfor size-aware animations.- All animations respect the
prefers-reduced-motionmedia query.
See the Radix Navigation Menu accessibility docs for full inherited behavior.
Choosing the Right Component
Use NavigationMenu for persistent, multi-level site navigation bars. Reach for a different primitive when:
| If you need… | Use instead |
|---|---|
| A dropdown from a single button | Dropdown Menu |
| A menu triggered by right-clicking | Context Menu |
Related
Footer
A responsive Footer Component is a structured layout element designed for displaying copyright notices, legal information, navigation links, and branding. It is composed of multiple subcomponents for better modularity and flexibility.
Pagination
A navigation component for traversing paged content. Built on Radix UI Slot with CVA variants, accessible ARIA semantics, and full asChild polymorphic composition.