On this page

    ---
    import {
      NavigationMenu,
      NavigationMenuContent,
      NavigationMenuItem,
      NavigationMenuLink,
      NavigationMenuList,
      NavigationMenuTrigger,
      navigationMenuTriggerStyle,
    } from "@/components/starwind/navigation-menu";
    import AlertCircle from "@tabler/icons/outline/alert-circle.svg";
    import CircleCheck from "@tabler/icons/outline/circle-check.svg";
    import CircleDashed from "@tabler/icons/outline/circle-dashed.svg";

    const components = [
      {
        title: "Alert Dialog",
        href: "/docs/components/alert-dialog/",
        description:
          "A modal dialog that interrupts the user with important content and expects a response.",
      },
      {
        title: "Hover Card",
        href: "/docs/components/hover-card/",
        description: "For sighted users to preview content available behind a link.",
      },
      {
        title: "Progress",
        href: "/docs/components/progress/",
        description: "Displays an indicator showing the completion progress of a task.",
      },
      {
        title: "Scroll Area",
        href: "/docs/components/scroll-area/",
        description: "Augments native scroll functionality for custom, cross-browser styling.",
      },
      {
        title: "Tabs",
        href: "/docs/components/tabs/",
        description: "A set of layered sections of content displayed one at a time.",
      },
      {
        title: "Tooltip",
        href: "/docs/components/tooltip/",
        description: "A popup that provides information when an element is focused or hovered.",
      },
    ];
    ---

    <NavigationMenu aria-label="Documentation navigation">
      <NavigationMenuList>
        <NavigationMenuItem value="getting-started">
          <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul class="w-96">
              <li>
                <NavigationMenuLink href="/docs/getting-started/introduction/">
                  <div class="flex flex-col gap-1 text-sm">
                    <div class="leading-none font-medium">Introduction</div>
                    <div class="text-muted-foreground line-clamp-2">
                      Reusable components built with Tailwind CSS.
                    </div>
                  </div>
                </NavigationMenuLink>
              </li>
              <li>
                <NavigationMenuLink href="/docs/getting-started/installation/">
                  <div class="flex flex-col gap-1 text-sm">
                    <div class="leading-none font-medium">Installation</div>
                    <div class="text-muted-foreground line-clamp-2">
                      How to install dependencies and structure your app.
                    </div>
                  </div>
                </NavigationMenuLink>
              </li>
              <li>
                <NavigationMenuLink href="/docs/getting-started/theming/">
                  <div class="flex flex-col gap-1 text-sm">
                    <div class="leading-none font-medium">Theming</div>
                    <div class="text-muted-foreground line-clamp-2">
                      Customize colors, typography, and design tokens.
                    </div>
                  </div>
                </NavigationMenuLink>
              </li>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem value="components" class="hidden md:flex">
          <NavigationMenuTrigger>Components</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul class="grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
              {components.map((component) => (
                <li>
                  <NavigationMenuLink href={component.href}>
                    <div class="flex flex-col gap-1 text-sm">
                      <div class="leading-none font-medium">{component.title}</div>
                      <div class="text-muted-foreground line-clamp-2">
                        {component.description}
                      </div>
                    </div>
                  </NavigationMenuLink>
                </li>
              ))}
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem value="status">
          <NavigationMenuTrigger>With icon</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul class="grid w-[200px]">
              <li>
                <NavigationMenuLink href="#backlog" class="flex-row items-center gap-2">
                  <AlertCircle />Backlog
                </NavigationMenuLink>
                <NavigationMenuLink href="#to-do" class="flex-row items-center gap-2">
                  <CircleDashed />To Do
                </NavigationMenuLink>
                <NavigationMenuLink href="#done" class="flex-row items-center gap-2">
                  <CircleCheck />Done
                </NavigationMenuLink>
              </li>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink href="/docs/" class={navigationMenuTriggerStyle()}>
            Docs
          </NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>

import {
      NavigationMenu,
      NavigationMenuContent,
      NavigationMenuItem,
      NavigationMenuLink,
      NavigationMenuList,
      NavigationMenuTrigger,
      navigationMenuTriggerStyle,
    } from "@/components/starwind/navigation-menu";
    import {
      IconAlertCircle as AlertCircle,
      IconCircleCheck as CircleCheck,
      IconCircleDashed as CircleDashed,
    } from "@tabler/icons-react";

    const components = [
      {
        title: "Alert Dialog",
        href: "/docs/components/alert-dialog/",
        description:
          "A modal dialog that interrupts the user with important content and expects a response.",
      },
      {
        title: "Hover Card",
        href: "/docs/components/hover-card/",
        description: "For sighted users to preview content available behind a link.",
      },
      {
        title: "Progress",
        href: "/docs/components/progress/",
        description: "Displays an indicator showing the completion progress of a task.",
      },
      {
        title: "Scroll Area",
        href: "/docs/components/scroll-area/",
        description: "Augments native scroll functionality for custom, cross-browser styling.",
      },
      {
        title: "Tabs",
        href: "/docs/components/tabs/",
        description: "A set of layered sections of content displayed one at a time.",
      },
      {
        title: "Tooltip",
        href: "/docs/components/tooltip/",
        description: "A popup that provides information when an element is focused or hovered.",
      },
    ];

export function Example() {
  return (
    <>
      <NavigationMenu aria-label="Documentation navigation">
            <NavigationMenuList>
              <NavigationMenuItem value="getting-started">
                <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
                <NavigationMenuContent>
                  <ul className="w-96">
                    <li>
                      <NavigationMenuLink href="/docs/getting-started/introduction/">
                        <div className="flex flex-col gap-1 text-sm">
                          <div className="leading-none font-medium">Introduction</div>
                          <div className="text-muted-foreground line-clamp-2">
                            Reusable components built with Tailwind CSS.
                          </div>
                        </div>
                      </NavigationMenuLink>
                    </li>
                    <li>
                      <NavigationMenuLink href="/docs/getting-started/installation/">
                        <div className="flex flex-col gap-1 text-sm">
                          <div className="leading-none font-medium">Installation</div>
                          <div className="text-muted-foreground line-clamp-2">
                            How to install dependencies and structure your app.
                          </div>
                        </div>
                      </NavigationMenuLink>
                    </li>
                    <li>
                      <NavigationMenuLink href="/docs/getting-started/theming/">
                        <div className="flex flex-col gap-1 text-sm">
                          <div className="leading-none font-medium">Theming</div>
                          <div className="text-muted-foreground line-clamp-2">
                            Customize colors, typography, and design tokens.
                          </div>
                        </div>
                      </NavigationMenuLink>
                    </li>
                  </ul>
                </NavigationMenuContent>
              </NavigationMenuItem>
              <NavigationMenuItem value="components" className="hidden md:flex">
                <NavigationMenuTrigger>Components</NavigationMenuTrigger>
                <NavigationMenuContent>
                  <ul className="grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
                    {components.map((component) => (
                      <li key={`${component.href}-${component.title}`}>
                        <NavigationMenuLink href={component.href}>
                          <div className="flex flex-col gap-1 text-sm">
                            <div className="leading-none font-medium">{component.title}</div>
                            <div className="text-muted-foreground line-clamp-2">
                              {component.description}
                            </div>
                          </div>
                        </NavigationMenuLink>
                      </li>
                    ))}
                  </ul>
                </NavigationMenuContent>
              </NavigationMenuItem>
              <NavigationMenuItem value="status">
                <NavigationMenuTrigger>With icon</NavigationMenuTrigger>
                <NavigationMenuContent>
                  <ul className="grid w-[200px]">
                    <li>
                      <NavigationMenuLink href="#backlog" className="flex-row items-center gap-2">
                        <AlertCircle />Backlog
                      </NavigationMenuLink>
                      <NavigationMenuLink href="#to-do" className="flex-row items-center gap-2">
                        <CircleDashed />To Do
                      </NavigationMenuLink>
                      <NavigationMenuLink href="#done" className="flex-row items-center gap-2">
                        <CircleCheck />Done
                      </NavigationMenuLink>
                    </li>
                  </ul>
                </NavigationMenuContent>
              </NavigationMenuItem>
              <NavigationMenuItem>
                <NavigationMenuLink href="/docs/" className={navigationMenuTriggerStyle()}>
                  Docs
                </NavigationMenuLink>
              </NavigationMenuItem>
            </NavigationMenuList>
          </NavigationMenu>
    </>
  );
}

Installation

pnpx starwind@latest add navigation-menu

npx starwind@latest add navigation-menu

yarn dlx starwind@latest add navigation-menu

Framework Availability

Astro Available React Available

Navigation Menu is available for Astro and React.

Usage

---
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/starwind/navigation-menu";
---

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem value="item-one">
      <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink href="/docs/">Link</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Composition

Use the following composition to build a NavigationMenu:

NavigationMenu
├── NavigationMenuList
│   ├── NavigationMenuItem
│   │   ├── NavigationMenuTrigger
│   │   └── NavigationMenuContent
│   │       ├── NavigationMenuLink
│   │       └── NavigationMenuLink
│   └── NavigationMenuItem
│       └── NavigationMenuLink
└── NavigationMenuIndicator

API Reference

Styled Component API

These props are added or materially changed by the installed Astro styled component. Standard HTML attributes remain available through the inherited interfaces noted below. Follow the Primitive and Runtime links for lower-level behavior props.

Inherits nav attributes. Omits `defaultValue`, `onChange`, and `value`.

Contains the following additional props:

Prop Type Default

align "start" | "center" | "end" "start"

Description: Aligns the component within its available axis.
Classification: Wrapper prop

alignOffset number 0

Description: Offsets the component from its selected alignment in pixels.
Classification: Wrapper prop

avoidCollisions boolean true

Description: Repositions floating content to keep it inside the collision boundary.
Classification: Wrapper prop

collisionPadding number 8

Description: Sets the minimum space retained around a collision boundary.
Classification: Wrapper prop

side "top" | "right" | "bottom" | "left" "bottom"

Description: Selects the preferred side for floating content.
Classification: Wrapper prop

sideOffset number 8

Description: Sets the distance in pixels between floating content and its anchor.
Classification: Wrapper prop

Inherits li attributes.

Contains the following additional props:

Prop Type Default

value string —

Description: Controls or identifies the component value.
Classification: Wrapper prop

Inherits button attributes.

Contains the following additional props:

Prop Type Default

asChild boolean false

Description: Merges the component behavior and props into its child element.
Classification: Primitive override
Primitive prop: navigation-menu.Trigger.asChild

closeDelay number —

Description: Sets the delay in milliseconds before closing.
Classification: Primitive override
Primitive prop: navigation-menu.Trigger.closeDelay

iconClass string —

Description: Adds classes to the component's generated icon.
Classification: Wrapper prop

openDelay number —

Description: Sets the delay in milliseconds before opening.
Classification: Primitive override
Primitive prop: navigation-menu.Trigger.openDelay

showIcon boolean true

Description: Shows the component's generated icon.
Classification: Wrapper prop

Inherits div attributes.

Contains the following additional props:

Prop Type Default

sideOffset number 8

Description: Sets the distance in pixels between floating content and its anchor.
Classification: Primitive override
Primitive prop: navigation-menu.Positioner.sideOffset

Primitive And Runtime API

Use these references when you need the lower-level behavior APIs behind Navigation Menu.

Primitive API

Navigation Menu Primitive

Runtime API

Navigation Menu primitive: createNavigationMenu from @starwind-ui/runtime/navigation-menu

Changelog

v1.0.0

Added the Runtime-backed Navigation Menu with keyboard navigation and shared viewport behavior.
See the Navigation Menu Primitive for the underlying unstyled anatomy and behavior API.

Navigation Menu

Installation

Usage

Composition

API Reference

Navigation Menu

Navigation Menu Item

Navigation Menu Trigger

Navigation Menu Positioner

Changelog

v1.0.0