Multi-level Nested Navigation Navigation Menu for React

Categories are headings, subcategories are links with a chevron, and their items sit below in a column with ms-4, ps-4 and a start border, so the nesting reads in both directions.

Not in this demo: every level is visible at once, which is easier to use than nested hover menus. For deeper trees, link the subcategory to its own page.

The panel is w-[600px] with max-w-full, so it never grows past the screen, but its columns get tight. Below the md breakpoint, show the same links in a Sheet or a Drawer instead.

Each link is your router's link rendered through NavigationMenuLink, so it keeps the menu's styles and focus handling. NavigationMenuLink takes the Next.js Link through render, as in render={<Link href="#" />}.

Tab moves between the triggers and the links, Enter or Space opens a trigger's panel, and Escape closes it and returns focus to the trigger. The root is a nav, so screen readers list it as a navigation landmark.

Set aria-current="page" on the NavigationMenuLink that matches the route, and style it with the aria-[current=page]: variant. active on NavigationMenuLink sets it for you.