# NavigationMenu

> A row of top-level navigation triggers, each either a plain link or a button that opens a floating panel of related links.

```ts
import { NavigationMenu } from "@sdxc/ui";
```

Renders the menu's root host: a native `<nav>` landmark establishing a
positioning context for whatever floating panels its
NavigationMenu.Content instances anchor against.

## Examples

```tsx
<NavigationMenu aria-label={t("nav.primary")}>
	<NavigationMenu.List>
		<NavigationMenu.Item>
			<NavigationMenu.Link href="/">{t("nav.home")}</NavigationMenu.Link>
		</NavigationMenu.Item>
	</NavigationMenu.List>
</NavigationMenu>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `children?` | `RemixNode` | The menu's own NavigationMenu.List, and anything else rendered alongside it (a NavigationMenu.Viewport, for instance). |

Also accepts everything in `TagProps<"nav">`.


### NavigationMenu.List

Renders the row of top-level triggers: a native `<ul>` laying its NavigationMenu.Items out horizontally by default, switching to a single start-aligned column when `orientation` is `"vertical"`.

| Prop | Type | Description |
| --- | --- | --- |
| `orientation?` | `"horizontal" \| "vertical"` | Layout axis. Defaults to DEFAULT_ORIENTATION. |
| `children?` | `RemixNode` | One or more NavigationMenu.Items. |

Also accepts everything in `TagProps<"ul">`.


### NavigationMenu.Item

Renders a single top-level entry: a native `<li>` holding either a standalone NavigationMenu.Link or a NavigationMenu.Trigger paired with the NavigationMenu.Content it opens.

| Prop | Type | Description |
| --- | --- | --- |
| `children?` | `RemixNode` | Either a standalone NavigationMenu.Link, or a NavigationMenu.Trigger followed by the NavigationMenu.Content it opens. |

Also accepts everything in `TagProps<"li">`.


### NavigationMenu.Trigger

Renders a native `<button>` that opens the enclosing NavigationMenu.Item's NavigationMenu.Content through the Invoker Commands API, so `aria-expanded` reflects the panel automatically.

Also accepts everything in `TagProps<"button">`.


### NavigationMenu.Content

Renders NavigationMenu.Content, the floating panel a NavigationMenu.Trigger opens: a Popover that fades and scales itself using the platform's own `:popover-open` state.

| Prop | Type | Description |
| --- | --- | --- |
| `id?` | `string` | Stable id matched against a NavigationMenu.Trigger's `commandfor`. Defaults to the enclosing NavigationMenu.Item's generated id. |
| `placement?` | `Popover.Placement` | Side of the trigger to render against. Defaults to DEFAULT_CONTENT_PLACEMENT. |
| `size?` | `"default" \| "wide"` | Panel width. Defaults to DEFAULT_CONTENT_SIZE. |

Also accepts everything in `Omit<Popover.Props, "id" | "placement">`.


### NavigationMenu.Link

Renders NavigationMenu.LinkProps.children as a native `<a>`.

Takes no props of its own.

### NavigationMenu.Viewport

Renders a shared, animated surface that swaps in the active NavigationMenu.Item's content, sized by the custom properties a pairing mixin writes as it measures the active panel and toggles visibility.

| Prop | Type | Description |
| --- | --- | --- |
| `children?` | `RemixNode` | The currently active item's content, mirrored in from wherever it actually renders. |

Also accepts everything in `TagProps<"div">`.


### NavigationMenu.ContentList

Renders NavigationMenu.ContentListProps.children as a plain vertical run of NavigationMenu.Links inside NavigationMenu.Content, for a dropdown that's just a short list.

| Prop | Type | Description |
| --- | --- | --- |
| `children?` | `RemixNode` | One or more NavigationMenu.Links. |

Also accepts everything in `TagProps<"div">`.


### NavigationMenu.ContentGrid

Renders NavigationMenu.ContentGridProps.children as a multi-column layout inside NavigationMenu.Content: a single column while the panel's own container is narrower than `40rem`, else two columns.

| Prop | Type | Description |
| --- | --- | --- |
| `children?` | `RemixNode` | Two or more NavigationMenu.ContentColumns. |

Also accepts everything in `TagProps<"div">`.


### NavigationMenu.ContentColumn

Renders NavigationMenu.ContentColumnProps.children as one column of stacked NavigationMenu.Links inside a NavigationMenu.ContentGrid.

| Prop | Type | Description |
| --- | --- | --- |
| `children?` | `RemixNode` | One or more NavigationMenu.Links. |

Also accepts everything in `TagProps<"div">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Orientation` | `"horizontal" \| "vertical"` | Axis NavigationMenu.List lays its triggers out along: a single row, or a single column. |
| `ContentSize` | `"default" \| "wide"` | Panel width NavigationMenu.Content renders at: sized to its own content (`"default"`), or a fixed, generously wide measure that still clamps to the viewport on narrow screens (`"wide"`). |