Navigation with Descriptions Navigation Menu for React

The link takes items-start, so the icon lines up with the title, and the title and description stack in a column beside it. The description uses the muted text color.

Each item's icon is a Lucide component stored in the data, rendered inside the link and hidden from assistive tech, since the label beside it names the link.

w-80 on the column inside NavigationMenuContent, room for a title and a short description per line.

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.