Navigation Menu
A collection of links for navigating websites, featuring dropdown mega menus with hover interactions, keyboard navigation, and automatic close on route change.
Default
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.Simple Links
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.With Keyboard Navigation
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.Custom Variant
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.Mega Menu
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.