A beautiful animated dropdown menu for navigation with support for icons, descriptions, and custom layouts.
Command Palette
Search for a command to run...
Search for a command to run...
A beautiful animated dropdown menu for navigation with support for icons, descriptions, and custom layouts.
This is the complete implementation showing how the navbar menu works within an actual navbar, mimicking real-world behavior. Hover over the navigation items to see the dropdown menus.
A simple navbar with expandable menu and icons.
A navbar with both dropdown menus and static links (no expanding menu).
The skeleton of the app. Fast navigation between Chat, Mail, and Settings.
npx shadcn@latest add https://ui.heygaia.io/r/navbar-menu.json| Prop | Type | Default | Description |
|---|---|---|---|
| activeMenu | string | - | The ID of the currently active menu section |
| sections | NavbarMenuSection[] | - | Array of menu sections with links |
| onClose | () => void | undefined | Optional callback when menu should close |
| Property | Type | Description |
|---|---|---|
| id | string | Unique identifier for the section |
| links | NavbarMenuLink[] | Array of links in this section |
| gridLayout | string | Optional custom grid layout classes (default: 2 columns) |
| Property | Type | Description |
|---|---|---|
| label | string | Link text |
| href | string | Link URL |
| icon | React.ReactNode | Optional icon component |
| external | boolean | Whether link opens in new tab |
| description | string | Optional description text |
| backgroundImage | string | Optional background image URL for featured items |
| rowSpan | number | Optional row span for grid layout (2 for featured) |