Add Navigation Menu component

[steve-stnhbr]

Prerequisites

• This feature already exists in shadcn/ui - if not, it won't be considered here so don't continue with your issue.

Describe the feature

The Navigation Menu is currently missing in the component list, it would be great adding it to the shadcn-svelte

[mfreder7]

Would be pleased to see this as well. 👍

I believe the dependency this is built on doesn't have that implemented yet.

For now if you want a similar style as the shadcn-svelte page you can reference their source code:
https://github.com/huntabyte/shadcn-svelte/blob/main/sites/docs/src/lib/components/docs/nav/main-nav.svelte

[jgreywolf]

Is there any update on the potential inclusion of this in the "library"?

[etienne-bechara]

Bits UI next already supports a Navigation Menu component, therefore styling it under shadcn system is relatively straightforward.

I have attached my implementation of it, feel free to use it until this is officially supported.

Download

navigation-menu.zip

Demo

Example

<script lang="ts">
  import {
    NavigationMenu,
    NavigationMenuContent,
    NavigationMenuItem,
    NavigationMenuLink,
    NavigationMenuList,
    NavigationMenuListItem,
    NavigationMenuTrigger,
    navigationMenuTriggerStyle,
  } from '$lib/components/navigation-menu';
  import Gem from 'lucide-svelte/icons/gem';

  const components: { title: string; href: string; description: string }[] = [
    {
      title: 'Alert Dialog',
      href: '/docs/primitives/alert-dialog',
      description: 'A modal dialog that interrupts the user with important content and expects a response.',
    },
    {
      title: 'Hover Card',
      href: '/docs/primitives/hover-card',
      description: 'For sighted users to preview content available behind a link.',
    },
    {
      title: 'Progress',
      href: '/docs/primitives/progress',
      description:
        'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.',
    },
    {
      title: 'Scroll-area',
      href: '/docs/primitives/scroll-area',
      description: 'Visually or semantically separates content.',
    },
    {
      title: 'Tabs',
      href: '/docs/primitives/tabs',
      description: 'A set of layered sections of content—known as tab panels—that are displayed one at a time.',
    },
    {
      title: 'Tooltip',
      href: '/docs/primitives/tooltip',
      description:
        'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',
    },
  ];
</script>

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
      <NavigationMenuContent>
        <ul class="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
          <li class="row-span-3">
            <NavigationMenuLink>
              <a
                class="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
                href="/"
              >
                <Gem class="h-6 w-6" />
                <div class="mb-2 mt-4 text-lg font-medium">shadcn/ui</div>
                <p class="text-sm leading-tight text-muted-foreground">
                  Beautifully designed components built with Radix UI and Tailwind CSS.
                </p>
              </a>
            </NavigationMenuLink>
          </li>
          <NavigationMenuListItem href="/docs" title="Introduction">
            Re-usable components built using Radix UI and Tailwind CSS.
          </NavigationMenuListItem>
          <NavigationMenuListItem href="/docs/installation" title="Installation">
            How to install dependencies and structure your app.
          </NavigationMenuListItem>
          <NavigationMenuListItem href="/docs/primitives/typography" title="Typography">
            Styles for headings, paragraphs, lists...etc
          </NavigationMenuListItem>
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Components</NavigationMenuTrigger>
      <NavigationMenuContent>
        <ul class="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
          {#each components as component}
            <NavigationMenuListItem title={component.title} href={component.href}>
              {component.description}
            </NavigationMenuListItem>
          {/each}
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <a href="/docs">
        <NavigationMenuLink class={navigationMenuTriggerStyle}>Documentation</NavigationMenuLink>
      </a>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

[huntabyte]

Just an FYI, the NavigationMenu in Bits UI is currently undergoing some internals rewrite to improve it, so once it's done and ready to go, it will be added to shadcn-svelte, I just don't want to add something rough around the edges before it is complete.

Thanks for your patience!