Navigation Core Stable
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.
Preview
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>Installation
pnpm add fancy-ui-svelte
import { NavigationMenu } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { NavigationMenu } from 'fancy-ui-svelte';
</script>
<NavigationMenu />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 "$lib/fancy-ui/navigation-menu";
</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 "$lib/fancy-ui/navigation-menu";
</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 "$lib/fancy-ui/navigation-menu";
// 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>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. |
Slots
| Slot | 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. |
Links
Related components
Br
Breadcrumb
A data-driven trail of links with automatic truncation, a decorative separator, and the current page marked for assistive tech.
Navigation Stable
Co
CommandMenu
A modal search palette over a flat vocabulary of items — grouped results, diacritic-insensitive filtering, match highlighting, and full keyboard navigation with focus that never leaves the search field.
Navigation Stable
Co
ContextMenu
A menu that opens at the pointer on right-click, sharing DropdownMenu's item, submenu and keyboard behaviour but anchored to a virtual point instead of a trigger element.
Navigation Stable