Overlays · Application UI
Navigation Menu
Accessible site navigation with animated dropdown panels.
@byronwade/foundation@byronwade/utils@base-ui/reactclass-variance-authority@phosphor-icons/react
Feature showcase
Installation
Features
4 examples
Default, Simple Links, With Descriptions, With Icons.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| align | "start" | "center" | "end" | "start" | Alignment of the dropdown panel under its trigger. |
| value | string | null | - | Controlled value of the item whose panel is open. |
| defaultValue | string | null | null | Uncontrolled initial open item. |
| onValueChange | (value: string | null) => void | - | Fires when the open item changes. |
| delay | number | 50 | Delay in ms before opening on hover. |
| orientation | "horizontal" | "vertical" | "horizontal" | Layout axis of the menu. |
Dependencies
| Package | Kind | Description |
|---|---|---|
| @byronwade/foundation | registry | Installed through the byronwade/ui registry. |
| @byronwade/utils | registry | Installed through the byronwade/ui registry. |
| @base-ui/react | npm | Installed from npm. |
| class-variance-authority | npm | Installed from npm. |
| @phosphor-icons/react | npm | Installed from npm. |
Source and related
| File | Path |
|---|---|
| Component | registry/ui/navigation-menu.tsx |
| Default example | content/examples/navigation-menu/default.tsx |
| Simple Links example | content/examples/navigation-menu/simple-links.tsx |
| With Descriptions example | content/examples/navigation-menu/with-descriptions.tsx |
| With Icons example | content/examples/navigation-menu/with-icons.tsx |