Feature Categories Navigation Menu for React

The panel is a grid with grid-flow-col and three rows, so the first three categories fill the first column and the next three the second.

No. They are h4 headings with an icon in the primary color; only the two entries under each are NavigationMenuLinks.

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.