<NavigationMenu aria-label="Primary">
	<NavigationMenu.List>
		<NavigationMenu.Item>
			<NavigationMenu.Trigger>Products</NavigationMenu.Trigger>
			<NavigationMenu.Content size="wide">
				<NavigationMenu.ContentGrid>
					<NavigationMenu.ContentColumn>
						<NavigationMenu.Link href="/products/uptime">Uptime monitoring</NavigationMenu.Link>
						<NavigationMenu.Link href="/products/status">Status pages</NavigationMenu.Link>
						<NavigationMenu.Link href="/products/alerts">On-call alerting</NavigationMenu.Link>
					</NavigationMenu.ContentColumn>
					<NavigationMenu.ContentColumn>
						<NavigationMenu.Link href="/products/auth">Hosted auth</NavigationMenu.Link>
						<NavigationMenu.Link href="/products/analytics">Analytics</NavigationMenu.Link>
						<NavigationMenu.Link href="/products/changelog">Changelog hosting</NavigationMenu.Link>
					</NavigationMenu.ContentColumn>
				</NavigationMenu.ContentGrid>
			</NavigationMenu.Content>
		</NavigationMenu.Item>

		<NavigationMenu.Item>
			<NavigationMenu.Trigger>Developers</NavigationMenu.Trigger>
			<NavigationMenu.Content>
				<NavigationMenu.ContentList>
					<NavigationMenu.Link href="/docs">Documentation</NavigationMenu.Link>
					<NavigationMenu.Link href="/docs/packages/ui">Component catalogue</NavigationMenu.Link>
					<NavigationMenu.Link href="/docs/packages">Packages</NavigationMenu.Link>
					<NavigationMenu.Link href="https://github.com/sergiodxa" target="_blank" rel="noreferrer">
						Source on GitHub
					</NavigationMenu.Link>
				</NavigationMenu.ContentList>
			</NavigationMenu.Content>
		</NavigationMenu.Item>

		<NavigationMenu.Item>
			<NavigationMenu.Link href="/pricing">Pricing</NavigationMenu.Link>
		</NavigationMenu.Item>

		<NavigationMenu.Item>
			<NavigationMenu.Link href="/docs/packages/ui/navigation-menu" aria-current="page">
				Catalogue
			</NavigationMenu.Link>
		</NavigationMenu.Item>

		<NavigationMenu.Item>
			<NavigationMenu.Trigger aria-disabled="true">Enterprise</NavigationMenu.Trigger>
			<NavigationMenu.Content>
				<NavigationMenu.ContentList>
					<NavigationMenu.Link href="/enterprise">Talk to sales</NavigationMenu.Link>
				</NavigationMenu.ContentList>
			</NavigationMenu.Content>
		</NavigationMenu.Item>
	</NavigationMenu.List>
</NavigationMenu>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui

import "@sdxc/ui/theme.css";

Usage

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.

Composition

The parts the component publishes, each a static property of the host.

NavigationMenu
NavigationMenu.ListRenders 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".
NavigationMenu.ItemRenders 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.
NavigationMenu.TriggerRenders a native <button> that opens the enclosing NavigationMenu.Item's NavigationMenu.Content through the Invoker Commands API, so aria-expanded reflects the panel automatically.
NavigationMenu.ContentRenders NavigationMenu.Content, the floating panel a NavigationMenu.Trigger opens: a Popover that fades and scales itself using the platform's own :popover-open state.
NavigationMenu.LinkRenders NavigationMenu.LinkProps.children as a native <a>.
NavigationMenu.ViewportRenders 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.
NavigationMenu.ContentListRenders NavigationMenu.ContentListProps.children as a plain vertical run of NavigationMenu.Links inside NavigationMenu.Content, for a dropdown that's just a short list.
NavigationMenu.ContentGridRenders 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.
NavigationMenu.ContentColumnRenders NavigationMenu.ContentColumnProps.children as one column of stacked NavigationMenu.Links inside a NavigationMenu.ContentGrid.

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

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

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

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

Also accepts everything in TagProps<"button">.

NavigationMenu.Content

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

NavigationMenu.Viewport

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

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

Also accepts everything in TagProps<"div">.

NavigationMenu.ContentGrid

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

Also accepts everything in TagProps<"div">.

NavigationMenu.ContentColumn

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"`).