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

npx lily-svelte@latest add 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>

Built by levish. The source code is available on GitHub.

Quiet by design.