Navigation Menu
A collection of links with expandable dropdown panels.
<script lang="ts">
import * as NavigationMenu from "$lib/components/ui/navigation-menu";
</script>
<NavigationMenu.Root>
<NavigationMenu.List>
<NavigationMenu.Item>
<NavigationMenu.Trigger>Getting started</NavigationMenu.Trigger>
<NavigationMenu.Content>
<ul class="grid w-[280px] gap-1">
<li>
<NavigationMenu.Link href="/docs">
<span class="font-medium">Introduction</span>
<span class="text-xs leading-[1.5] text-(--text)/56"
>Install lily and learn the structure.</span
>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link href="/docs/installation">
<span class="font-medium">Installation</span>
<span class="text-xs leading-[1.5] text-(--text)/56"
>Add lily to your SvelteKit app.</span
>
</NavigationMenu.Link>
</li>
</ul>
</NavigationMenu.Content>
</NavigationMenu.Item>
<NavigationMenu.Item>
<NavigationMenu.Trigger>Components</NavigationMenu.Trigger>
<NavigationMenu.Content>
<ul class="grid w-[280px] grid-cols-2 gap-1">
<li>
<NavigationMenu.Link href="/docs/components/button"
>Button</NavigationMenu.Link
>
</li>
<li>
<NavigationMenu.Link href="/docs/components/card"
>Card</NavigationMenu.Link
>
</li>
<li>
<NavigationMenu.Link href="/docs/components/dialog"
>Dialog</NavigationMenu.Link
>
</li>
<li>
<NavigationMenu.Link href="/docs/components/tabs"
>Tabs</NavigationMenu.Link
>
</li>
</ul>
</NavigationMenu.Content>
</NavigationMenu.Item>
<NavigationMenu.Item>
<NavigationMenu.Link href="/docs">Docs</NavigationMenu.Link>
</NavigationMenu.Item>
</NavigationMenu.List>
</NavigationMenu.Root> Installation
Install the lily base and `utils` (run once per project).
npx lily-svelte@latest init Copy the navigation-menu source from the registry into $lib/components/ui/navigation-menu.
Usage
<script lang="ts">
import * as NavigationMenu from '$lib/components/ui/navigation-menu';
</script>
<NavigationMenu.Root>
<NavigationMenu.List>
<NavigationMenu.Item>
<NavigationMenu.Trigger>Getting started</NavigationMenu.Trigger>
<NavigationMenu.Content>
<NavigationMenu.Link href="/docs">Introduction</NavigationMenu.Link>
</NavigationMenu.Content>
</NavigationMenu.Item>
<NavigationMenu.Item>
<NavigationMenu.Link href="/docs">Docs</NavigationMenu.Link>
</NavigationMenu.Item>
</NavigationMenu.List>
</NavigationMenu.Root>