Simple Navigation Navigation Menu for React

NavigationMenu and NavigationMenuList hold one NavigationMenuItem per entry. A dropdown is a NavigationMenuTrigger with a NavigationMenuContent of NavigationMenuLinks; Pricing is a NavigationMenuLink on its own.

It takes navigationMenuTriggerStyle() as its class, so a plain link lines up with the dropdown triggers beside it.

Two sections at the top of the file, each a trigger label and its links, mapped to one item each. Edit that list to change the menu.

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.