Skip to content
bejamas/uibejamas/uibejamas/ui

Navigation Menu

A menu with dropdown content and optional viewport transitions.

---
import { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger } from '@bejamas/registry/ui/navigation-menu';
---


<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem value="products">
      <NavigationMenuTrigger>Products</NavigationMenuTrigger>
      <NavigationMenuContent>
        <div class="grid grid-cols-2 gap-2 w-[380px] p-2">
          <NavigationMenuLink href="#">
            <div class="flex flex-col gap-1">
              <div class="leading-none font-medium">Analytics</div>
              <div class="line-clamp-2 text-muted-foreground">Real-time insights</div>
            </div>
          </NavigationMenuLink>
          <NavigationMenuLink href="#">
            <div class="flex flex-col gap-1">
              <div class="leading-none font-medium">Automation</div>
              <div class="line-clamp-2 text-muted-foreground">Workflow builders</div>
            </div>
          </NavigationMenuLink>
          <NavigationMenuLink href="#">
            <div class="flex flex-col gap-1">
              <div class="leading-none font-medium">Security</div>
              <div class="line-clamp-2 text-muted-foreground">Enterprise-grade</div>
            </div>
          </NavigationMenuLink>
          <NavigationMenuLink href="#">
            <div class="flex flex-col gap-1">
              <div class="leading-none font-medium">Integrations</div>
              <div class="line-clamp-2 text-muted-foreground">Connect tools</div>
            </div>
          </NavigationMenuLink>
        </div>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem value="solutions">
      <NavigationMenuTrigger>Solutions</NavigationMenuTrigger>
      <NavigationMenuContent align="center">
        <div class="grid grid-cols-2 gap-2 w-[380px] p-2">
          <NavigationMenuLink href="#">
            <div class="flex flex-col gap-1">
              <div class="leading-none font-medium">Startups</div>
              <div class="line-clamp-2 text-muted-foreground">Move fast</div>
            </div>
          </NavigationMenuLink>
          <NavigationMenuLink href="#">
            <div class="flex flex-col gap-1">
              <div class="leading-none font-medium">Enterprise</div>
              <div class="line-clamp-2 text-muted-foreground">Scale securely</div>
            </div>
          </NavigationMenuLink>
          <NavigationMenuLink href="#">
            <div class="flex flex-col gap-1">
              <div class="leading-none font-medium">Agencies</div>
              <div class="line-clamp-2 text-muted-foreground">Client delivery</div>
            </div>
          </NavigationMenuLink>
          <NavigationMenuLink href="#">
            <div class="flex flex-col gap-1">
              <div class="leading-none font-medium">E-commerce</div>
              <div class="line-clamp-2 text-muted-foreground">Sell online</div>
            </div>
          </NavigationMenuLink>
        </div>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem value="resources">
      <NavigationMenuTrigger>Resources</NavigationMenuTrigger>
      <NavigationMenuContent align="center">
        <div class="grid grid-cols-3 gap-2 w-[520px] p-2">
          <NavigationMenuLink href="/docs">
            <div class="flex flex-col gap-1">
              <div class="leading-none font-medium">Docs</div>
              <div class="line-clamp-2 text-muted-foreground">Get started</div>
            </div>
          </NavigationMenuLink>
          <NavigationMenuLink href="#">
            <div class="flex flex-col gap-1">
              <div class="leading-none font-medium">Blog</div>
              <div class="line-clamp-2 text-muted-foreground">Latest updates</div>
            </div>
          </NavigationMenuLink>
          <NavigationMenuLink href="#">
            <div class="flex flex-col gap-1">
              <div class="leading-none font-medium">Support</div>
              <div class="line-clamp-2 text-muted-foreground">Get help</div>
            </div>
          </NavigationMenuLink>
          <NavigationMenuLink href="#">
            <div class="flex flex-col gap-1">
              <div class="leading-none font-medium">Events</div>
              <div class="line-clamp-2 text-muted-foreground">Upcoming webinars</div>
            </div>
          </NavigationMenuLink>
          <NavigationMenuLink href="#">
            <div class="flex flex-col gap-1">
              <div class="leading-none font-medium">Guides</div>
              <div class="line-clamp-2 text-muted-foreground">Best practices</div>
            </div>
          </NavigationMenuLink>
          <NavigationMenuLink href="#">
            <div class="flex flex-col gap-1">
              <div class="leading-none font-medium">Contact</div>
              <div class="line-clamp-2 text-muted-foreground">Talk to us</div>
            </div>
          </NavigationMenuLink>
        </div>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem value="company">
      <NavigationMenuTrigger>Company</NavigationMenuTrigger>
      <NavigationMenuContent align="end">
        <div class="w-[180px] p-2">
          <NavigationMenuLink href="#">
            <div class="flex flex-col gap-1">
              <div class="leading-none font-medium">About</div>
              <div class="line-clamp-2 text-muted-foreground">Our story</div>
            </div>
          </NavigationMenuLink>
          <NavigationMenuLink href="#">
            <div class="flex flex-col gap-1">
              <div class="leading-none font-medium">Careers</div>
              <div class="line-clamp-2 text-muted-foreground">Join the team</div>
            </div>
          </NavigationMenuLink>
        </div>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuIndicator />
  </NavigationMenuList>
</NavigationMenu>

Installation

Section titled “Installation”
Terminal window
bunx bejamas add navigation-menu

Usage

Section titled “Usage”
---
import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuContent,
  NavigationMenuLink,
} from '@bejamas/ui/components/navigation-menu';
---


<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem value="products">
      <NavigationMenuTrigger>Products</NavigationMenuTrigger>
      <NavigationMenuContent>
        <div class="grid grid-cols-2 gap-2 w-[380px] p-2">
          <NavigationMenuLink href="#">
            <div class="flex flex-col gap-1">
              <div class="leading-none font-medium">Analytics</div>
              <div class="line-clamp-2 text-muted-foreground">Real-time insights</div>
            </div>
          </NavigationMenuLink>
          <NavigationMenuLink href="#">
            <div class="flex flex-col gap-1">
              <div class="leading-none font-medium">Automation</div>
              <div class="line-clamp-2 text-muted-foreground">Workflow builders</div>
            </div>
          </NavigationMenuLink>
        </div>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem value="resources">
      <NavigationMenuTrigger>Resources</NavigationMenuTrigger>
      <NavigationMenuContent align="center">
        <div class="grid grid-cols-2 gap-2 w-[380px] p-2">
          <NavigationMenuLink href="/docs">
            <div class="flex flex-col gap-1">
              <div class="leading-none font-medium">Docs</div>
              <div class="line-clamp-2 text-muted-foreground">Get started</div>
            </div>
          </NavigationMenuLink>
          <NavigationMenuLink href="#">
            <div class="flex flex-col gap-1">
              <div class="leading-none font-medium">Support</div>
              <div class="line-clamp-2 text-muted-foreground">Get help</div>
            </div>
          </NavigationMenuLink>
        </div>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuIndicator />
  </NavigationMenuList>
</NavigationMenu>

Props

Section titled “Props”
Prop Type Default
class string ""
align "start" | "center" | "end" "start"
viewport boolean true
delayOpen number 0
delayClose number 0
openOnFocus boolean

Examples

Section titled “Examples”

With Icons

Section titled “With Icons”

Links with Lucide icons for visual enhancement.

---
import { ChartBarIcon, ShieldIcon, ZapIcon } from '@lucide/astro';


import { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger } from '@bejamas/registry/ui/navigation-menu';
---


<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem value="features">
      <NavigationMenuTrigger>Features</NavigationMenuTrigger>
      <NavigationMenuContent>
        <div class="grid gap-2 w-[320px] p-2">
          <NavigationMenuLink href="#" class="flex-row items-start gap-4">
            <ChartBarIcon class="size-5 mt-1 text-muted-foreground" />
            <div class="flex flex-col gap-1">
              <div class="leading-none font-medium">Analytics</div>
              <div class="line-clamp-2 text-muted-foreground">Track your metrics</div>
            </div>
          </NavigationMenuLink>
          <NavigationMenuLink href="#" class="flex-row items-start gap-4">
            <ZapIcon class="size-5 mt-1 text-muted-foreground" />
            <div class="flex flex-col gap-1">
              <div class="leading-none font-medium">Automation</div>
              <div class="line-clamp-2 text-muted-foreground">Streamline workflows</div>
            </div>
          </NavigationMenuLink>
          <NavigationMenuLink href="#" class="flex-row items-start gap-4">
            <ShieldIcon class="size-5 mt-1 text-muted-foreground" />
            <div class="flex flex-col gap-1">
              <div class="leading-none font-medium">Security</div>
              <div class="line-clamp-2 text-muted-foreground">Enterprise-grade protection</div>
            </div>
          </NavigationMenuLink>
        </div>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuIndicator />
  </NavigationMenuList>
</NavigationMenu>
Section titled “Featured Card”

Hero-style layout with a featured item alongside regular links.

---
import { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger } from '@bejamas/registry/ui/navigation-menu';
---


<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem value="getting-started">
      <NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>
      <NavigationMenuContent>
        <div class="grid grid-cols-[1fr_200px] gap-2 w-[480px] p-2">
          <div class="row-span-3">
            <NavigationMenuLink href="#" class="flex h-full flex-col items-start rounded-md bg-gradient-to-b from-muted/50 to-muted p-4 no-underline">
              <div class="mb-2 text-lg font-medium">Introduction</div>
              <p class="text-sm text-muted-foreground">Learn the basics and get up to speed quickly with our comprehensive guides.</p>
            </NavigationMenuLink>
          </div>
          <NavigationMenuLink href="#">
            <div class="flex flex-col gap-1">
              <div class="leading-none font-medium">Installation</div>
              <div class="line-clamp-2 text-muted-foreground">Step-by-step setup</div>
            </div>
          </NavigationMenuLink>
          <NavigationMenuLink href="#">
            <div class="flex flex-col gap-1">
              <div class="leading-none font-medium">Configuration</div>
              <div class="line-clamp-2 text-muted-foreground">Customize settings</div>
            </div>
          </NavigationMenuLink>
          <NavigationMenuLink href="#">
            <div class="flex flex-col gap-1">
              <div class="leading-none font-medium">Examples</div>
              <div class="line-clamp-2 text-muted-foreground">Code samples</div>
            </div>
          </NavigationMenuLink>
        </div>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuIndicator />
  </NavigationMenuList>
</NavigationMenu>
Section titled “With Simple Links”

Use navigationMenuTriggerStyle() to style regular links to match triggers.

---
import { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger } from '@bejamas/registry/ui/navigation-menu';
---


<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem value="products">
      <NavigationMenuTrigger>Products</NavigationMenuTrigger>
      <NavigationMenuContent>
        <div class="w-[200px] p-2">
          <NavigationMenuLink href="#">Product One</NavigationMenuLink>
          <NavigationMenuLink href="#">Product Two</NavigationMenuLink>
        </div>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink href="#" class="cn-navigation-menu-trigger group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center outline-none disabled:pointer-events-none">
        Pricing
      </NavigationMenuLink>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink href="/docs" class="cn-navigation-menu-trigger group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center outline-none disabled:pointer-events-none">
        Docs
      </NavigationMenuLink>
    </NavigationMenuItem>
    <NavigationMenuIndicator />
  </NavigationMenuList>
</NavigationMenu>

Without Viewport

Section titled “Without Viewport”

Set viewport={false} to render content directly without the animated viewport container.

---
import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger } from '@bejamas/registry/ui/navigation-menu';
---


<NavigationMenu viewport={false}>
  <NavigationMenuList>
    <NavigationMenuItem value="menu">
      <NavigationMenuTrigger>Menu</NavigationMenuTrigger>
      <NavigationMenuContent>
        <div class="w-[200px] p-2 rounded-md border bg-popover shadow-md">
          <NavigationMenuLink href="#">Option One</NavigationMenuLink>
          <NavigationMenuLink href="#">Option Two</NavigationMenuLink>
        </div>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

API Reference

Section titled “API Reference”
Section titled “NavigationMenu Props”
Prop Type Default Description
align "start" | "center" | "end" "start" Viewport alignment relative to the trigger row
viewport boolean true Enable animated viewport container for content
delayOpen number 0 Delay in ms before opening menu
delayClose number 0 Delay in ms before closing menu
openOnFocus boolean false Open menu on keyboard focus
Section titled “NavigationMenuItem Props”
Prop Type Default Description
value string — Unique identifier for the item
align "start" | "center" | "end" "start" Content alignment relative to trigger

Events

Section titled “Events”
Event Detail Description
navigation-menu:change { value: string | null } Fired when active item changes

Programmatic Control

Section titled “Programmatic Control”
// Open a specific item
element.dispatchEvent(
  new CustomEvent("navigation-menu:set", { detail: { value: "products" } })
);


// Close the menu
element.dispatchEvent(
  new CustomEvent("navigation-menu:set", { detail: { value: null } })
);

Built at Bejamas. The source code is available on GitHub.