# NavigationMenu

> A horizontal row of triggers that each open a rich, multi-column panel below the row — disclosure-pattern site navigation, not an application menu.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Navigation
- Tags: navigation, menu, disclosure, mega menu, dropdown, header
- Docs: https://fancy-ui.rama.app/docs/components/navigation-menu
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/navigation-menu

## Import

```svelte
<script lang="ts">
  import { NavigationMenu } from 'fancy-ui-svelte';
</script>
```

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { NavigationMenu } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` | `""` | The open item's value, bindable. Empty string when every panel is closed. |
| `onValueChange` | `(value: string) => void` | — | Called whenever the open item changes, from any trigger. |
| `label` | `string` | `"Main"` | Accessible name for the nav landmark. |
| `openDelay` | `number` | `150` | Delay in ms before a hovered trigger opens its panel. |
| `closeDelay` | `number` | `200` | Delay in ms before a panel closes after the pointer leaves it and its trigger. |
| `class` | `string` | — | Additional CSS classes for the nav. |
| `ref` | `HTMLElement \| null` | `null` | Bindable reference to the nav element. |

## Snippets

| Snippet | Description |
| --- | --- |
| `children` | Typically a single NavigationMenuList. Snippet<[]> — the compound's own sub-components (NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink) are exported from the same module and used inside it. |

## Examples

### Basic Usage

Two triggers, each opening a two-column panel with a feature tile and link rows.

```svelte
<script lang="ts">
	import {
		NavigationMenu,
		NavigationMenuList,
		NavigationMenuItem,
		NavigationMenuTrigger,
		NavigationMenuContent,
		NavigationMenuLink,
	} from "fancy-ui-svelte";
</script>

<NavigationMenu label="Product">
	<NavigationMenuList>
		<NavigationMenuItem value="products">
			<NavigationMenuTrigger>Products</NavigationMenuTrigger>
			<NavigationMenuContent>
				<NavigationMenuLink href="#components" class="ft-navigation-menu-feature">
					<div class="flex items-center gap-1.5 text-[13px] font-semibold">
						<svg
							class="size-3.5"
							viewBox="0 0 24 24"
							fill="none"
							stroke="currentColor"
							stroke-width="2"
							stroke-linecap="round"
							stroke-linejoin="round"
							aria-hidden="true"
						>
							<path d="m12 3 1.9 4.8L19 9l-4.8 1.9L12 16l-1.9-4.8L5 9l4.8-1.9L12 3Z" />
						</svg>
						Components
					</div>
					<span class="text-muted-foreground text-[11px]">Browse the full UI library</span>
				</NavigationMenuLink>
				<div class="flex flex-col gap-0.5">
					<NavigationMenuLink
						href="#themes"
						title="Themes"
						description="Generate custom color palettes"
					/>
					<NavigationMenuLink
						href="#templates"
						title="Templates"
						description="Ready-to-use page starters"
					/>
				</div>
			</NavigationMenuContent>
		</NavigationMenuItem>

		<NavigationMenuItem value="resources">
			<NavigationMenuTrigger>Resources</NavigationMenuTrigger>
			<NavigationMenuContent>
				<NavigationMenuLink href="#docs" class="ft-navigation-menu-feature">
					<div class="flex items-center gap-1.5 text-[13px] font-semibold">
						<svg
							class="size-3.5"
							viewBox="0 0 24 24"
							fill="none"
							stroke="currentColor"
							stroke-width="2"
							stroke-linecap="round"
							stroke-linejoin="round"
							aria-hidden="true"
						>
							<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
							<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2Z" />
						</svg>
						Documentation
					</div>
					<span class="text-muted-foreground text-[11px]">Guides and API reference</span>
				</NavigationMenuLink>
				<div class="flex flex-col gap-0.5">
					<NavigationMenuLink
						href="#changelog"
						title="Changelog"
						description="What shipped recently"
					/>
					<NavigationMenuLink
						href="#support"
						title="Support"
						description="Get help from the community"
					/>
				</div>
			</NavigationMenuContent>
		</NavigationMenuItem>

		<!-- A plain link that isn't a disclosure — it has no panel — sits in the same row, wrapped in its own <li> like every NavigationMenuItem already is. -->
		<li>
			<a
				href="#pricing"
				class="text-muted-foreground hover:bg-accent hover:text-accent-foreground inline-flex items-center rounded-[8px] px-[14px] py-[8px] text-[13px] font-medium no-underline transition-colors"
			>
				Pricing
			</a>
		</li>
	</NavigationMenuList>
</NavigationMenu>
```

### Simple Links

A single trigger opening a plain, single-column stack of links.

```svelte
<script lang="ts">
	import {
		NavigationMenu,
		NavigationMenuList,
		NavigationMenuItem,
		NavigationMenuTrigger,
		NavigationMenuContent,
		NavigationMenuLink,
	} from "fancy-ui-svelte";
</script>

<!--
	A panel doesn't have to be the mockup's two-column feature layout — it's a
	plain snippet, so a single trigger opening a plain, single-column stack of
	links is just as valid. Override the grid with `class` on
	NavigationMenuContent.
-->
<NavigationMenu label="Company">
	<NavigationMenuList>
		<NavigationMenuItem value="company">
			<NavigationMenuTrigger>Company</NavigationMenuTrigger>
			<NavigationMenuContent class="w-56 grid-cols-1">
				<NavigationMenuLink href="#about" title="About" description="Our story and team" />
				<NavigationMenuLink href="#careers" title="Careers" description="Open positions" />
				<NavigationMenuLink href="#blog" title="Blog" description="Product updates and notes" />
			</NavigationMenuContent>
		</NavigationMenuItem>
	</NavigationMenuList>
</NavigationMenu>
```

### With Current Page

A panel where one link is marked as the current page.

```svelte
<script lang="ts">
	import {
		NavigationMenu,
		NavigationMenuList,
		NavigationMenuItem,
		NavigationMenuTrigger,
		NavigationMenuContent,
		NavigationMenuLink,
	} from "fancy-ui-svelte";

	// In a real app this would come from the current route, not a fixed value —
	// `current` never infers "the current page" from the URL for you.
	const currentPath: string = "#themes";
</script>

<NavigationMenu label="Product">
	<NavigationMenuList>
		<NavigationMenuItem value="products">
			<NavigationMenuTrigger>Products</NavigationMenuTrigger>
			<NavigationMenuContent class="w-56 grid-cols-1">
				<NavigationMenuLink
					href="#components"
					title="Components"
					description="Browse the full UI library"
					current={currentPath === "#components"}
				/>
				<NavigationMenuLink
					href="#themes"
					title="Themes"
					description="Generate custom color palettes"
					current={currentPath === "#themes"}
				/>
				<NavigationMenuLink
					href="#templates"
					title="Templates"
					description="Ready-to-use page starters"
					current={currentPath === "#templates"}
				/>
			</NavigationMenuContent>
		</NavigationMenuItem>
	</NavigationMenuList>
</NavigationMenu>
```