NavigationMenu
Basic composition
Item value is required for the Trigger + Content pair. For direct links use Link.
tsx
import { NavigationMenu } from "~/components/ui/base/navigation-menu";
<NavigationMenu.Root class="justify-start">
<NavigationMenu.List>
<NavigationMenu.Item value="produkty">
<NavigationMenu.Trigger>Products</NavigationMenu.Trigger>
<NavigationMenu.Content>
<ul class="grid min-w-[200px] gap-1 p-1">
<li>
<a class="block rounded-md px-3 py-2 text-callout hover:bg-surface-overlay" href="#">
Library
</a>
</li>
<li>
<a class="block rounded-md px-3 py-2 text-callout hover:bg-surface-overlay" href="#">
Templates
</a>
</li>
</ul>
</NavigationMenu.Content>
</NavigationMenu.Item>
<NavigationMenu.Item>
<NavigationMenu.Link href="#">Pricing</NavigationMenu.Link>
</NavigationMenu.Item>
</NavigationMenu.List>
</NavigationMenu.Root>
Separator in the bar
A separator between items of a horizontal bar — NavigationMenu.Separator.
tsx
import { NavigationMenu } from "~/components/ui/base/navigation-menu";
<NavigationMenu.Root>
<NavigationMenu.List>
<NavigationMenu.Item value="dokumentace">
<NavigationMenu.Trigger>Documentation</NavigationMenu.Trigger>
<NavigationMenu.Content>
<p class="px-2 py-1 text-caption-1 text-secondary-label">Getting started</p>
<a class="block rounded-md px-3 py-2 text-callout hover:bg-surface-overlay" href="#">
Introduction
</a>
</NavigationMenu.Content>
</NavigationMenu.Item>
<NavigationMenu.Separator />
<NavigationMenu.Item>
<NavigationMenu.Link href="#">Blog</NavigationMenu.Link>
</NavigationMenu.Item>
</NavigationMenu.List>
</NavigationMenu.Root>
Custom look and colors
Main row: „More“ with contentAlign="start" (panel below the trigger's left edge). Below it more bars — **compact** size vs. **larger**, palettes **teal** / **orange** / **purple** (tokens from COLORS).
Q
Toolsbeta
More bars — sizes and colors
Compact (smaller trigger and panel)
Teal — larger panel
Orange accent bar
Purple / larger typography
tsx
import { NavigationMenu } from "~/components/ui/base/navigation-menu";
<div class="flex flex-col gap-6 overflow-visible">
<div class="flex flex-wrap items-center gap-3 rounded-xl border border-system-indigo/30 bg-system-indigo/10 px-3 py-2 shadow-sm">
<div class="flex items-center gap-2">
<span class="flex h-8 w-8 items-center justify-center rounded-lg bg-system-indigo/25 text-callout font-semibold text-system-indigo">
Q
</span>
<div class="flex flex-col gap-0.5">
<span class="text-caption-1 font-medium text-label">Tools</span>
<span class="inline-flex w-max items-center rounded-full bg-system-green/20 px-2 py-px text-caption-2 text-system-green">
beta
</span>
</div>
</div>
<NavigationMenu.Root class="min-w-0 flex-1 justify-end overflow-visible">
<NavigationMenu.List>
<NavigationMenu.Item value="vice-hlavni">
<NavigationMenu.Trigger class="rounded-lg text-system-indigo hover:bg-system-indigo/20 focus-visible:ring-system-indigo data-[state=open]:bg-system-indigo/25">
More
</NavigationMenu.Trigger>
<NavigationMenu.Content
contentAlign="start"
class="!mt-2 !overflow-y-auto w-[min(100vw-1.5rem,22rem)] max-h-[min(70vh,32rem)] rounded-xl border border-system-teal/35 bg-grouped-surface p-0 shadow-xl ring-offset-grouped-background"
>
<div class="border-b border-separator-opaque px-3 py-2">
<div class="flex items-center justify-between gap-2">
<p class="text-caption-1 font-medium text-label">Quick actions</p>
<span class="rounded-md bg-system-orange/15 px-1.5 py-0.5 text-caption-2 text-system-orange">3 new</span>
</div>
<p class="mt-1 text-caption-2 text-secondary-label">The popup aligns `start` — the left edge below the left edge of „More“.</p>
</div>
<div class="grid gap-2 p-3 sm:grid-cols-2">
<a
class="rounded-lg border border-separator bg-surface-raised p-3 text-callout text-label transition hover:border-system-teal/50 hover:bg-fill-secondary/30"
href="#"
>
<span class="block font-medium">Guide</span>
<span class="mt-1 block text-caption-2 text-secondary-label">Interactive introduction</span>
</a>
<a
class="rounded-lg border border-separator bg-surface-raised p-3 text-callout text-label transition hover:border-system-teal/50 hover:bg-fill-secondary/30"
href="#"
>
<span class="block font-medium">Templates</span>
<span class="mt-1 block text-caption-2 text-secondary-label">Start from an example</span>
</a>
</div>
<div class="h-px bg-separator-opaque" role="presentation" />
<ul class="p-2">
<li>
<a class="block rounded-md px-2 py-2 text-callout text-label hover:bg-fill-secondary/40" href="#">
Documentation
</a>
</li>
<li>
<a class="block rounded-md px-2 py-2 text-callout text-label hover:bg-fill-secondary/40" href="#">
Support
</a>
</li>
</ul>
</NavigationMenu.Content>
</NavigationMenu.Item>
<NavigationMenu.Separator />
<NavigationMenu.Item>
<NavigationMenu.Link class="rounded-lg text-system-indigo no-underline hover:bg-system-indigo/20" href="#">
Overview
</NavigationMenu.Link>
</NavigationMenu.Item>
</NavigationMenu.List>
</NavigationMenu.Root>
</div>
<div class="space-y-3">
<p class="text-caption-1 font-medium text-label">More bars — sizes and colors</p>
<div class="flex flex-col gap-4 overflow-visible">
<div>
<p class="mb-1.5 text-caption-2 text-tertiary-label">Compact (smaller trigger and panel)</p>
<div class="inline-flex max-w-full overflow-visible rounded-md border border-separator-opaque bg-surface-raised px-1.5 py-1">
<NavigationMenu.Root class="justify-start">
<NavigationMenu.List>
<NavigationMenu.Item value="vice-kompakt">
<NavigationMenu.Trigger class="h-8 rounded-md px-2 text-caption-1 text-secondary-label hover:bg-fill-secondary/40">
More
</NavigationMenu.Trigger>
<NavigationMenu.Content contentAlign="start" class="!mt-1.5 min-w-[10rem] max-w-[16rem] p-1.5 text-caption-2">
<a class="block rounded px-2 py-1.5 text-label hover:bg-surface-overlay" href="#">
Item A
</a>
<a class="block rounded px-2 py-1.5 text-label hover:bg-surface-overlay" href="#">
Item B
</a>
</NavigationMenu.Content>
</NavigationMenu.Item>
</NavigationMenu.List>
</NavigationMenu.Root>
</div>
</div>
<div>
<p class="mb-1.5 text-caption-2 text-tertiary-label">Teal — larger panel</p>
<div class="overflow-visible rounded-xl border border-system-teal/40 bg-system-teal/10 px-2 py-1.5 shadow-sm">
<NavigationMenu.Root class="justify-start">
<NavigationMenu.List>
<NavigationMenu.Item value="vice-teal">
<NavigationMenu.Trigger class="rounded-lg px-3 py-1.5 text-callout font-medium text-system-teal hover:bg-system-teal/20 data-[state=open]:bg-system-teal/25">
More
</NavigationMenu.Trigger>
<NavigationMenu.Content
contentAlign="start"
class="!mt-2 min-w-[14rem] rounded-lg border border-system-teal/30 bg-grouped-surface p-2 shadow-lg"
>
<a class="block rounded-md px-3 py-2 text-callout text-label hover:bg-fill-secondary/40" href="#">
Introduction
</a>
<a class="block rounded-md px-3 py-2 text-callout text-label hover:bg-fill-secondary/40" href="#">
API
</a>
</NavigationMenu.Content>
</NavigationMenu.Item>
</NavigationMenu.List>
</NavigationMenu.Root>
</div>
</div>
<div>
<p class="mb-1.5 text-caption-2 text-tertiary-label">Orange accent bar</p>
<div class="overflow-visible rounded-xl border border-system-orange/35 bg-system-orange/10 px-2 py-1.5">
<NavigationMenu.Root class="justify-start">
<NavigationMenu.List>
<NavigationMenu.Item value="vice-orange">
<NavigationMenu.Trigger class="rounded-lg px-3 py-1.5 text-callout font-medium text-system-orange hover:bg-system-orange/20 data-[state=open]:bg-system-orange/25">
More
</NavigationMenu.Trigger>
<NavigationMenu.Content contentAlign="start" class="!mt-2 min-w-[13rem] rounded-lg border border-system-orange/25 bg-surface-raised p-2 shadow-md">
<a class="block rounded-md px-3 py-2 text-callout hover:bg-fill-secondary/30" href="#">
Settings
</a>
<a class="block rounded-md px-3 py-2 text-callout hover:bg-fill-secondary/30" href="#">
Sign out
</a>
</NavigationMenu.Content>
</NavigationMenu.Item>
</NavigationMenu.List>
</NavigationMenu.Root>
</div>
</div>
<div>
<p class="mb-1.5 text-caption-2 text-tertiary-label">Purple / larger typography</p>
<div class="overflow-visible rounded-xl border border-system-purple/35 bg-system-purple/10 px-3 py-2">
<NavigationMenu.Root class="justify-start">
<NavigationMenu.List>
<NavigationMenu.Item value="vice-purple">
<NavigationMenu.Trigger class="min-h-10 rounded-lg px-4 py-2 text-body font-medium text-system-purple hover:bg-system-purple/15 data-[state=open]:bg-system-purple/20">
More
</NavigationMenu.Trigger>
<NavigationMenu.Content contentAlign="start" class="!mt-2 min-w-[15rem] rounded-xl border border-system-purple/25 bg-grouped-surface p-3 text-body shadow-lg">
<a class="block rounded-lg px-3 py-2.5 hover:bg-fill-secondary/35" href="#">
Profile
</a>
<a class="block rounded-lg px-3 py-2.5 hover:bg-fill-secondary/35" href="#">
Account
</a>
</NavigationMenu.Content>
</NavigationMenu.Item>
</NavigationMenu.List>
</NavigationMenu.Root>
</div>
</div>
</div>
</div>
</div>
contentAlign variants
start — below the trigger's left edge; end — below the right edge (suited for a button on the right); center — below the center; inlineEnd — a flyout **to the right** of the trigger (horizontally).
start
end
center
inlineEnd (to the right of the trigger)
tsx
import { NavigationMenu } from "~/components/ui/base/navigation-menu";
<div class="flex flex-col gap-8 overflow-visible">
<div>
<p class="mb-2 text-caption-1 text-secondary-label">start</p>
<NavigationMenu.Root class="justify-start">
<NavigationMenu.List>
<NavigationMenu.Item value="s">
<NavigationMenu.Trigger>Menu</NavigationMenu.Trigger>
<NavigationMenu.Content contentAlign="start">
<a class="block rounded-md px-3 py-2 text-callout hover:bg-surface-overlay" href="#">Link</a>
</NavigationMenu.Content>
</NavigationMenu.Item>
</NavigationMenu.List>
</NavigationMenu.Root>
</div>
<div>
<p class="mb-2 text-caption-1 text-secondary-label">end</p>
<NavigationMenu.Root class="flex w-full justify-end">
<NavigationMenu.List>
<NavigationMenu.Item value="e">
<NavigationMenu.Trigger>More</NavigationMenu.Trigger>
<NavigationMenu.Content contentAlign="end">
<a class="block rounded-md px-3 py-2 text-callout hover:bg-surface-overlay" href="#">Link</a>
</NavigationMenu.Content>
</NavigationMenu.Item>
</NavigationMenu.List>
</NavigationMenu.Root>
</div>
<div>
<p class="mb-2 text-caption-1 text-secondary-label">center</p>
<NavigationMenu.Root class="flex w-full justify-center">
<NavigationMenu.List>
<NavigationMenu.Item value="c">
<NavigationMenu.Trigger>Center</NavigationMenu.Trigger>
<NavigationMenu.Content contentAlign="center">
<a class="block rounded-md px-3 py-2 text-callout hover:bg-surface-overlay" href="#">Link</a>
</NavigationMenu.Content>
</NavigationMenu.Item>
</NavigationMenu.List>
</NavigationMenu.Root>
</div>
<div>
<p class="mb-2 text-caption-1 text-secondary-label">inlineEnd (to the right of the trigger)</p>
<NavigationMenu.Root class="justify-start">
<NavigationMenu.List>
<NavigationMenu.Item value="i">
<NavigationMenu.Trigger>Menu</NavigationMenu.Trigger>
<NavigationMenu.Content contentAlign="inlineEnd" class="min-w-[12rem]">
<a class="block rounded-md px-3 py-2 text-callout hover:bg-surface-overlay" href="#">Link</a>
</NavigationMenu.Content>
</NavigationMenu.Item>
</NavigationMenu.List>
</NavigationMenu.Root>
</div>
</div>
Metadata
Source: meta.generated.json (see npm run generate)
File base/navigation-menu/meta.generated.json not found or path not allowed.