## Overview [#overview]
The `Navigation Menu` component helps build adaptive, multi-level navigation bars using Base UI primitives. It pairs triggers with popup content, supports complex layouts, and keeps interactions accessible with full keyboard support.
## Usage [#usage]
```tsx
import {
NavigationMenu,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
} from "@tilt-legal/cubitt-components/primitives";
```
```tsx
Products
...
```
## Examples [#examples]
### Basic [#basic]
```tsx
import {
NavigationMenu,
NavigationMenuArrow,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuPopup,
NavigationMenuPositioner,
NavigationMenuTrigger,
} from "@tilt-legal/cubitt-components/primitives";
const resourceLinks = [
{ title: "Changelog", href: "#" },
{ title: "Blog", href: "#" },
{ title: "Docs", href: "#" },
{ title: "Community", href: "#" },
{ title: "Help", href: "#" },
{ title: "Workshops", href: "#" },
{ title: "Forum", href: "#" },
{ title: "Careers", href: "#" },
];
export function NavigationMenuBasicExample() {
return (
About
Resources
{resourceLinks.map((item) => (
-
{item.title}
))}
Support
);
}
```
## API Reference [#api-reference]
### NavigationMenu [#navigationmenu]
The root component that provides context for all navigation menu components.
| Prop | Type | Default | Description |
| ----------- | ----------- | ------- | ------------------------------------ |
| `className` | `string` | - | Additional CSS classes for the root. |
| `children` | `ReactNode` | - | Menu list and positioner components. |
### NavigationMenuList [#navigationmenulist]
Container for navigation menu items. Renders as a `` element.
| Prop | Type | Default | Description |
| ----------- | ----------- | ------- | ------------------------------------ |
| `className` | `string` | - | Additional CSS classes for the list. |
| `children` | `ReactNode` | - | Navigation menu items. |
### NavigationMenuItem [#navigationmenuitem]
Individual item within the navigation menu list. Renders as a `- ` element.
| Prop | Type | Default | Description |
| ----------- | ----------- | ------- | ------------------------------------ |
| `className` | `string` | - | Additional CSS classes for the item. |
| `children` | `ReactNode` | - | Trigger and content components. |
### NavigationMenuTrigger [#navigationmenutrigger]
Button that toggles the visibility of the associated content popup.
| Prop | Type | Default | Description |
| ----------- | ----------- | ------- | --------------------------------------- |
| `className` | `string` | - | Additional CSS classes for the trigger. |
| `children` | `ReactNode` | - | Trigger button content. |
### NavigationMenuContent [#navigationmenucontent]
Container for the popup content associated with a trigger. Supports animated transitions based on activation direction.
| Prop | Type | Default | Description |
| ----------- | ----------- | ------- | ----------------------------------- |
| `className` | `string` | - | Additional CSS classes for content. |
| `children` | `ReactNode` | - | Content to display in the popup. |
### NavigationMenuLink [#navigationmenulink]
Styled link component for navigation items. Supports polymorphic rendering via the `render` prop.
| Prop | Type | Default | Description |
| ----------- | -------------------------------- | ------- | -------------------------------------------------------- |
| `className` | `string` | - | Additional CSS classes for the link. |
| `render` | `React.ReactElement \| function` | - | Polymorphic rendering (e.g., Next.js Link). |
| `active` | `boolean` | `false` | Whether the link represents the current active location. |
| `children` | `ReactNode` | - | Link content. |
### NavigationMenuPositioner [#navigationmenupositioner]
Handles positioning of the popup relative to the trigger. Wraps the popup with collision detection.
| Prop | Type | Default | Description |
| ------------------ | ------------------------------ | -------------------------------------------- | ----------------------------------------- |
| `className` | `string` | - | Additional CSS classes. |
| `sideOffset` | `number` | `10` | Distance from trigger in pixels. |
| `collisionPadding` | `{ top, bottom, left, right }` | `{ top: 5, bottom: 5, left: 20, right: 20 }` | Viewport padding for collision detection. |
| `children` | `ReactNode` | - | NavigationMenuPopup component. |
### NavigationMenuPopup [#navigationmenupopup]
The popup surface that contains the content and viewport. Appears when a trigger is activated.
| Prop | Type | Default | Description |
| ----------- | ----------- | ------- | --------------------------------- |
| `className` | `string` | - | Additional CSS classes for popup. |
| `children` | `ReactNode` | - | Popup content. |
### NavigationMenuArrow [#navigationmenuarrow]
Optional arrow indicator that points from the popup to the active trigger.
| Prop | Type | Default | Description |
| ----------- | -------- | ------- | --------------------------------- |
| `className` | `string` | - | Additional CSS classes for arrow. |