Navigation Menu

A NavigationMenu with dropdown content panels that open on hover or click. Each NavigationMenuItem with a Value and NavigationMenuTrigger creates a dropdown, while items without a trigger render as plain links. The content panels support any layout including grids and cards.

Navigation menu with simple link items using NavigationMenuLink without any dropdown triggers. The Match parameter controls active state matching: Prefix highlights the link when the URL starts with the href, while All requires an exact match. This is ideal for flat navigation structures.

Set EnableKeyboardNavigation="true" on the NavigationMenu to enable full arrow-key navigation within dropdown content. When enabled, ArrowDown moves focus into the dropdown, ArrowUp / ArrowDown navigates between items, and Escape closes the panel and returns focus to the trigger.

Use the Class parameter on NavigationMenu, NavigationMenuTrigger, and NavigationMenuContent to create custom themed navigation. Apply gradient backgrounds, colored borders, or brand-specific colors to match your application's design system beyond the default theme.

A real-world mega menu composition with a featured section alongside a grid of navigation links. This pattern is commonly used for marketing sites and SaaS dashboards where you need to showcase a primary product alongside categorized navigation. The featured card uses a gradient background for visual emphasis.