NavigationAvailable
Navigation Menu
Website navigation with linked destinations and expandable sections.
Installation
Add the component and its dependencies from the registry running on your computer.
terminal
npx shadcn@latest add https://brutallab.facilito.dev/r/navigation-menu.jsonUsage
Import the component into your project and keep the source code under your control.
tsx
'use client';
import {
NavigationMenu,
NavigationMenuList,
NavigationMenuItem,
NavigationMenuTrigger,
NavigationMenuContent,
NavigationMenuLink,
} from '@/components/ui/navigation-menu';
export default function Demo() {
return (
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>Components</NavigationMenuTrigger>
<NavigationMenuContent>
<div className="grid w-64 gap-2 p-3">
<NavigationMenuLink href="/en/docs/components/button">
Button
</NavigationMenuLink>
<NavigationMenuLink href="/en/docs/components/card">
Card
</NavigationMenuLink>
</div>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink href="/en/docs/foundations">
Foundations
</NavigationMenuLink>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>
);
}
States & interaction
Appearance, behavior and keyboard checks.
- Check closed, open, highlighted, selected and disabled states where supported.
- Dialogs and menus must open from the keyboard. Escape closes non-persistent overlays and returns focus to the trigger. Tooltips and hover cards must also appear on focus.
- Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.
API Reference
BrutalLab-specific properties. Native attributes are supported as well.
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | ? | Extends the root visual styles without changing its semantics. |
| children | ReactNode | ? | Compose the exported subcomponents as shown in the runnable example. |
Accessibility
Rules that should remain intact when adapting the component to a product.
Use real links for destinations; keep the trigger for opening navigation content.
Retain keyboard focus styles and test the composition with keyboard navigation.
Use className for visual customization; preserve the primitive ARIA attributes.