Navigation
Navigation Menu
Animated mega-menu with animated content panels. Built on Radix NavigationMenu.
Install
pnpm add @codefast/ui
Import path
@codefast/ui/navigation-menu
Examples
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import {
NavigationMenu, NavigationMenuList, NavigationMenuItem,
NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink,
} from "@codefast/ui/navigation-menu";
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>Menu</NavigationMenuTrigger>
<NavigationMenuContent>…</NavigationMenuContent>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>
API reference
Props for each part of the component. All native element props are also forwarded.
NavigationMenu
Site navigation with animated content panels.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | A NavigationMenuList of items, each a trigger + content or a plain link. |
NavigationMenuLink
| Prop | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | — | Render your router’s Link while keeping menu semantics. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
| Key | Function |
|---|---|
| Tab | Moves between top-level items. |
| Enter | Opens the focused item’s panel. |
| Esc | Closes the open panel. |
- Implements the ARIA navigation pattern; panels open on hover and focus.
- Use real links inside; render router Links via asChild.
- Touch users can’t hover — ensure links are reachable by tap too.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Use for primary site navigation with grouped destinations.
- Keep panels shallow and scannable.
Don’t
- Don’t put forms or complex controls in a nav panel.
- Don’t bury key links several levels deep.