Skip to content

Navigation Menu

A menu with dropdown content and optional viewport transitions.

1
---
2
import { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger } from '@bejamas/ui/components/navigation-menu';
3
---
4

5
<NavigationMenu>
6
  <NavigationMenuList>
7
    <NavigationMenuItem value="products">
8
      <NavigationMenuTrigger>Products</NavigationMenuTrigger>
9
      <NavigationMenuContent>
10
        <div class="grid grid-cols-2 gap-2 w-[380px] p-2">
11
          <NavigationMenuLink href="/products/analytics">
12
            <div class="font-medium">Analytics</div>
13
            <div class="text-sm text-muted-foreground">Real-time insights</div>
14
          </NavigationMenuLink>
15
          <NavigationMenuLink href="/products/automation">
16
            <div class="font-medium">Automation</div>
17
            <div class="text-sm text-muted-foreground">Workflow builders</div>
18
          </NavigationMenuLink>
19
          <NavigationMenuLink href="/products/security">
20
            <div class="font-medium">Security</div>
21
            <div class="text-sm text-muted-foreground">Enterprise-grade</div>
22
          </NavigationMenuLink>
23
          <NavigationMenuLink href="/products/integrations">
24
            <div class="font-medium">Integrations</div>
25
            <div class="text-sm text-muted-foreground">Connect tools</div>
26
          </NavigationMenuLink>
27
        </div>
28
      </NavigationMenuContent>
29
    </NavigationMenuItem>
30
    <NavigationMenuItem value="solutions" align="center">
31
      <NavigationMenuTrigger>Solutions</NavigationMenuTrigger>
32
      <NavigationMenuContent>
33
        <div class="grid grid-cols-2 gap-2 w-[380px] p-2">
34
          <NavigationMenuLink href="/solutions/startups">
35
            <div class="font-medium">Startups</div>
36
            <div class="text-sm text-muted-foreground">Move fast</div>
37
          </NavigationMenuLink>
38
          <NavigationMenuLink href="/solutions/enterprise">
39
            <div class="font-medium">Enterprise</div>
40
            <div class="text-sm text-muted-foreground">Scale securely</div>
41
          </NavigationMenuLink>
42
          <NavigationMenuLink href="/solutions/agencies">
43
            <div class="font-medium">Agencies</div>
44
            <div class="text-sm text-muted-foreground">Client delivery</div>
45
          </NavigationMenuLink>
46
          <NavigationMenuLink href="/solutions/ecommerce">
47
            <div class="font-medium">E-commerce</div>
48
            <div class="text-sm text-muted-foreground">Sell online</div>
49
          </NavigationMenuLink>
50
        </div>
51
      </NavigationMenuContent>
52
    </NavigationMenuItem>
53
    <NavigationMenuItem value="resources" align="center">
54
      <NavigationMenuTrigger>Resources</NavigationMenuTrigger>
55
      <NavigationMenuContent>
56
        <div class="grid grid-cols-3 gap-2 w-[520px] p-2">
57
          <NavigationMenuLink href="/docs">
58
            <div class="font-medium">Docs</div>
59
            <div class="text-sm text-muted-foreground">Get started</div>
60
          </NavigationMenuLink>
61
          <NavigationMenuLink href="/blog">
62
            <div class="font-medium">Blog</div>
63
            <div class="text-sm text-muted-foreground">Latest updates</div>
64
          </NavigationMenuLink>
65
          <NavigationMenuLink href="/support">
66
            <div class="font-medium">Support</div>
67
            <div class="text-sm text-muted-foreground">Get help</div>
68
          </NavigationMenuLink>
69
          <NavigationMenuLink href="/events">
70
            <div class="font-medium">Events</div>
71
            <div class="text-sm text-muted-foreground">Upcoming webinars</div>
72
          </NavigationMenuLink>
73
          <NavigationMenuLink href="/guides">
74
            <div class="font-medium">Guides</div>
75
            <div class="text-sm text-muted-foreground">Best practices</div>
76
          </NavigationMenuLink>
77
          <NavigationMenuLink href="/contact">
78
            <div class="font-medium">Contact</div>
79
            <div class="text-sm text-muted-foreground">Talk to us</div>
80
          </NavigationMenuLink>
81
        </div>
82
      </NavigationMenuContent>
83
    </NavigationMenuItem>
84
    <NavigationMenuItem value="company">
85
      <NavigationMenuTrigger>Company</NavigationMenuTrigger>
86
      <NavigationMenuContent>
87
        <div class="w-[180px] p-2">
88
          <NavigationMenuLink href="/about">
89
            <div class="font-medium">About</div>
90
            <div class="text-sm text-muted-foreground">Our story</div>
91
          </NavigationMenuLink>
92
          <NavigationMenuLink href="/careers">
93
            <div class="font-medium">Careers</div>
94
            <div class="text-sm text-muted-foreground">Join the team</div>
95
          </NavigationMenuLink>
96
        </div>
97
      </NavigationMenuContent>
98
    </NavigationMenuItem>
99
    <NavigationMenuIndicator />
100
  </NavigationMenuList>
101
</NavigationMenu>

Installation

bunx bejamas add navigation-menu

npx bejamas add navigation-menu

pnpm dlx bejamas add navigation-menu

yarn dlx bejamas add navigation-menu

Usage

1
---
2
import {
3
  NavigationMenu,
4
  NavigationMenuList,
5
  NavigationMenuItem,
6
  NavigationMenuTrigger,
7
  NavigationMenuContent,
8
  NavigationMenuLink,
9
} from '@bejamas/ui/components/navigation-menu';
10
---
11

12
<NavigationMenu>
13
  <NavigationMenuList>
14
    <NavigationMenuItem value="products">
15
      <NavigationMenuTrigger>Products</NavigationMenuTrigger>
16
      <NavigationMenuContent>
17
        <div class="grid grid-cols-2 gap-2 w-[380px] p-2">
18
          <NavigationMenuLink href="/products/analytics">
19
            <div class="font-medium">Analytics</div>
20
            <div class="text-sm text-muted-foreground">Real-time insights</div>
21
          </NavigationMenuLink>
22
          <NavigationMenuLink href="/products/automation">
23
            <div class="font-medium">Automation</div>
24
            <div class="text-sm text-muted-foreground">Workflow builders</div>
25
          </NavigationMenuLink>
26
        </div>
27
      </NavigationMenuContent>
28
    </NavigationMenuItem>
29
    <NavigationMenuItem value="resources" align="center">
30
      <NavigationMenuTrigger>Resources</NavigationMenuTrigger>
31
      <NavigationMenuContent>
32
        <div class="grid grid-cols-2 gap-2 w-[380px] p-2">
33
          <NavigationMenuLink href="/docs">
34
            <div class="font-medium">Docs</div>
35
            <div class="text-sm text-muted-foreground">Get started</div>
36
          </NavigationMenuLink>
37
          <NavigationMenuLink href="/support">
38
            <div class="font-medium">Support</div>
39
            <div class="text-sm text-muted-foreground">Get help</div>
40
          </NavigationMenuLink>
41
        </div>
42
      </NavigationMenuContent>
43
    </NavigationMenuItem>
44
    <NavigationMenuIndicator />
45
  </NavigationMenuList>
46
</NavigationMenu>

Examples

With Icons

Links with Lucide icons for visual enhancement.

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

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

7
<NavigationMenu>
8
  <NavigationMenuList>
9
    <NavigationMenuItem value="features">
10
      <NavigationMenuTrigger>Features</NavigationMenuTrigger>
11
      <NavigationMenuContent>
12
        <div class="grid gap-2 w-[320px] p-2">
13
          <NavigationMenuLink href="/analytics" class="flex-row items-start gap-4">
14
            <ChartBarIcon class="size-5 mt-1 text-muted-foreground" />
15
            <div>
16
              <div class="font-medium">Analytics</div>
17
              <div class="text-sm text-muted-foreground">Track your metrics</div>
18
            </div>
19
          </NavigationMenuLink>
20
          <NavigationMenuLink href="/automation" class="flex-row items-start gap-4">
21
            <ZapIcon class="size-5 mt-1 text-muted-foreground" />
22
            <div>
23
              <div class="font-medium">Automation</div>
24
              <div class="text-sm text-muted-foreground">Streamline workflows</div>
25
            </div>
26
          </NavigationMenuLink>
27
          <NavigationMenuLink href="/security" class="flex-row items-start gap-4">
28
            <ShieldIcon class="size-5 mt-1 text-muted-foreground" />
29
            <div>
30
              <div class="font-medium">Security</div>
31
              <div class="text-sm text-muted-foreground">Enterprise-grade protection</div>
32
            </div>
33
          </NavigationMenuLink>
34
        </div>
35
      </NavigationMenuContent>
36
    </NavigationMenuItem>
37
    <NavigationMenuIndicator />
38
  </NavigationMenuList>
39
</NavigationMenu>

Featured Card

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

1
---
2
import { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger } from '@bejamas/ui/components/navigation-menu';
3
---
4

5
<NavigationMenu>
6
  <NavigationMenuList>
7
    <NavigationMenuItem value="getting-started">
8
      <NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>
9
      <NavigationMenuContent>
10
        <div class="grid grid-cols-[1fr_200px] gap-2 w-[480px] p-2">
11
          <div class="row-span-3">
12
            <NavigationMenuLink href="/introduction" class="flex h-full flex-col rounded-md bg-gradient-to-b from-muted/50 to-muted p-4 no-underline">
13
              <div class="mb-2 text-lg font-medium">Introduction</div>
14
              <p class="text-sm text-muted-foreground">Learn the basics and get up to speed quickly with our comprehensive guides.</p>
15
            </NavigationMenuLink>
16
          </div>
17
          <NavigationMenuLink href="/installation">
18
            <div class="font-medium">Installation</div>
19
            <div class="text-sm text-muted-foreground">Step-by-step setup</div>
20
          </NavigationMenuLink>
21
          <NavigationMenuLink href="/configuration">
22
            <div class="font-medium">Configuration</div>
23
            <div class="text-sm text-muted-foreground">Customize settings</div>
24
          </NavigationMenuLink>
25
          <NavigationMenuLink href="/examples">
26
            <div class="font-medium">Examples</div>
27
            <div class="text-sm text-muted-foreground">Code samples</div>
28
          </NavigationMenuLink>
29
        </div>
30
      </NavigationMenuContent>
31
    </NavigationMenuItem>
32
    <NavigationMenuIndicator />
33
  </NavigationMenuList>
34
</NavigationMenu>

With Simple Links

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

1
---
2
import { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger } from '@bejamas/ui/components/navigation-menu';
3
---
4

5
<NavigationMenu>
6
  <NavigationMenuList>
7
    <NavigationMenuItem value="products">
8
      <NavigationMenuTrigger>Products</NavigationMenuTrigger>
9
      <NavigationMenuContent>
10
        <div class="w-[200px] p-2">
11
          <NavigationMenuLink href="/products/one">Product One</NavigationMenuLink>
12
          <NavigationMenuLink href="/products/two">Product Two</NavigationMenuLink>
13
        </div>
14
      </NavigationMenuContent>
15
    </NavigationMenuItem>
16
    <NavigationMenuItem>
17
      <NavigationMenuLink href="/pricing" class="px-4 py-2.5 bg-transparent border-none cursor-pointer flex items-center gap-1.5 transition-colors relative z-1 hover:text-accent">
18
        Pricing
19
      </NavigationMenuLink>
20
    </NavigationMenuItem>
21
    <NavigationMenuItem>
22
      <NavigationMenuLink href="/docs" class="px-4 py-2.5 bg-transparent border-none cursor-pointer flex items-center gap-1.5 transition-colors relative z-1 hover:text-accent">
23
        Docs
24
      </NavigationMenuLink>
25
    </NavigationMenuItem>
26
    <NavigationMenuIndicator />
27
  </NavigationMenuList>
28
</NavigationMenu>

Without Viewport

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

1
---
2
import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger } from '@bejamas/ui/components/navigation-menu';
3
---
4

5
<NavigationMenu viewport={false}>
6
  <NavigationMenuList>
7
    <NavigationMenuItem value="menu">
8
      <NavigationMenuTrigger>Menu</NavigationMenuTrigger>
9
      <NavigationMenuContent>
10
        <div class="w-[200px] p-2 rounded-md border bg-popover shadow-md">
11
          <NavigationMenuLink href="/one">Option One</NavigationMenuLink>
12
          <NavigationMenuLink href="/two">Option Two</NavigationMenuLink>
13
        </div>
14
      </NavigationMenuContent>
15
    </NavigationMenuItem>
16
  </NavigationMenuList>
17
</NavigationMenu>

API Reference

NavigationMenu Props

Prop	Type	Default	Description
`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
`as`	`HTMLTag`	`"nav"`	HTML element to render

NavigationMenuItem Props

Prop	Type	Default	Description
`value`	`string`	—	Unique identifier for the item
`align`	`"start" \| "center" \| "end"`	`"start"`	Content alignment relative to trigger

Events

Event	Detail	Description
`navigation-menu:change`	`{ value: string \| null }`	Fired when active item changes

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 } })
);