Navigation Menu
A collection of links with expandable dropdown panels.
Installation
Installs the style saved in lily.json. For a new Diamond project,
run lily-svelte init --style diamond first.
Install the lily base and `utils` (run once per project).
npx lily-svelte@latest initCopy 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>