## Overview [#overview]
`NavigationMenu` builds an accessible navigation bar with top-level links, triggers, and floating popup content. The trigger and top-level link styles use Cubitt link-button behavior, while popup links use menu-style contextual hover states.
Popup content is surface-aware: the popup lands at `parent +2`, its border and arrow edge match that surface level, and links inside the popup highlight at the next surface level.
## Usage [#usage]
```tsx
import {
NavigationMenu,
NavigationMenuArrow,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuPopup,
NavigationMenuPositioner,
NavigationMenuTrigger,
} from "@tilt-legal/cubitt-components/navigation-menu";
```
```tsx
About
Resources
Docs
```
## Examples [#examples]
### Basic [#basic]
```tsx
import {
NavigationMenu,
NavigationMenuArrow,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuPopup,
NavigationMenuPositioner,
NavigationMenuTrigger,
} from "@tilt-legal/cubitt-components/navigation-menu";
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: "#" },
];
About
Resources
{resourceLinks.map((item) => (
-
{item.title}
))}
Support
;
```
## API Reference [#api-reference]
### NavigationMenu [#navigationmenu]
| Prop | Type | Default | Description |
| ------------ | ----------- | ------- | -------------------------------------- |
| `delay` | `number` | `0` | Delay before opening popup content. |
| `closeDelay` | `number` | `0` | Delay before closing popup content. |
| `className` | `string` | – | Additional classes for the root. |
| `children` | `ReactNode` | – | Menu list and popup positioner pieces. |
### NavigationMenuList [#navigationmenulist]
| Prop | Type | Default | Description |
| ----------- | ----------- | ------- | -------------------------------- |
| `className` | `string` | – | Additional classes for the list. |
| `children` | `ReactNode` | – | Navigation menu items. |
### NavigationMenuItem [#navigationmenuitem]
| Prop | Type | Default | Description |
| ----------- | ----------- | ------- | ----------------------------------- |
| `className` | `string` | – | Additional classes for the item. |
| `children` | `ReactNode` | – | Trigger, link, or content children. |
### NavigationMenuTrigger [#navigationmenutrigger]
| Prop | Type | Default | Description |
| ------------- | ----------- | ------- | ----------------------------------------- |
| `showChevron` | `boolean` | `false` | Show a rotating chevron beside the label. |
| `className` | `string` | – | Additional classes for the trigger. |
| `children` | `ReactNode` | – | Trigger content. |
### NavigationMenuContent [#navigationmenucontent]
| Prop | Type | Default | Description |
| ----------- | ----------- | ------- | ---------------------------------------------- |
| `className` | `string` | – | Additional classes for the content transition. |
| `children` | `ReactNode` | – | Content rendered into the popup viewport. |
### NavigationMenuLink [#navigationmenulink]
Top-level links render with link-button styling. Links inside `NavigationMenuContent` render with menu-item hover behavior.
| Prop | Type | Default | Description |
| ----------- | ----------- | ------- | -------------------------------------------- |
| `href` | `string` | – | Link destination. |
| `active` | `boolean` | `false` | Marks the link as representing current page. |
| `className` | `string` | – | Additional classes for the link. |
| `children` | `ReactNode` | – | Link content. |
### NavigationMenuPositioner [#navigationmenupositioner]
| Prop | Type | Default | Description |
| ------------------ | ------------------------------ | -------------------------------------------- | ---------------------------------------- |
| `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 handling. |
| `className` | `string` | – | Additional classes for the positioner. |
| `children` | `ReactNode` | – | Popup component. |
### NavigationMenuPopup [#navigationmenupopup]
| Prop | Type | Default | Description |
| ----------- | ----------- | ------- | ------------------------------------ |
| `className` | `string` | – | Additional classes for the popup. |
| `children` | `ReactNode` | – | Popup adornments, usually the arrow. |
### NavigationMenuArrow [#navigationmenuarrow]
| Prop | Type | Default | Description |
| ----------- | -------- | ------- | --------------------------------- |
| `className` | `string` | – | Additional classes for the arrow. |