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/registry/ui/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="#">
12
            <div class="flex flex-col gap-1">
13
              <div class="leading-none font-medium">Analytics</div>
14
              <div class="line-clamp-2 text-muted-foreground">Real-time insights</div>
15
            </div>
16
          </NavigationMenuLink>
17
          <NavigationMenuLink href="#">
18
            <div class="flex flex-col gap-1">
19
              <div class="leading-none font-medium">Automation</div>
20
              <div class="line-clamp-2 text-muted-foreground">Workflow builders</div>
21
            </div>
22
          </NavigationMenuLink>
23
          <NavigationMenuLink href="#">
24
            <div class="flex flex-col gap-1">
25
              <div class="leading-none font-medium">Security</div>
26
              <div class="line-clamp-2 text-muted-foreground">Enterprise-grade</div>
27
            </div>
28
          </NavigationMenuLink>
29
          <NavigationMenuLink href="#">
30
            <div class="flex flex-col gap-1">
31
              <div class="leading-none font-medium">Integrations</div>
32
              <div class="line-clamp-2 text-muted-foreground">Connect tools</div>
33
            </div>
34
          </NavigationMenuLink>
35
        </div>
36
      </NavigationMenuContent>
37
    </NavigationMenuItem>
38
    <NavigationMenuItem value="solutions">
39
      <NavigationMenuTrigger>Solutions</NavigationMenuTrigger>
40
      <NavigationMenuContent align="center">
41
        <div class="grid grid-cols-2 gap-2 w-[380px] p-2">
42
          <NavigationMenuLink href="#">
43
            <div class="flex flex-col gap-1">
44
              <div class="leading-none font-medium">Startups</div>
45
              <div class="line-clamp-2 text-muted-foreground">Move fast</div>
46
            </div>
47
          </NavigationMenuLink>
48
          <NavigationMenuLink href="#">
49
            <div class="flex flex-col gap-1">
50
              <div class="leading-none font-medium">Enterprise</div>
51
              <div class="line-clamp-2 text-muted-foreground">Scale securely</div>
52
            </div>
53
          </NavigationMenuLink>
54
          <NavigationMenuLink href="#">
55
            <div class="flex flex-col gap-1">
56
              <div class="leading-none font-medium">Agencies</div>
57
              <div class="line-clamp-2 text-muted-foreground">Client delivery</div>
58
            </div>
59
          </NavigationMenuLink>
60
          <NavigationMenuLink href="#">
61
            <div class="flex flex-col gap-1">
62
              <div class="leading-none font-medium">E-commerce</div>
63
              <div class="line-clamp-2 text-muted-foreground">Sell online</div>
64
            </div>
65
          </NavigationMenuLink>
66
        </div>
67
      </NavigationMenuContent>
68
    </NavigationMenuItem>
69
    <NavigationMenuItem value="resources">
70
      <NavigationMenuTrigger>Resources</NavigationMenuTrigger>
71
      <NavigationMenuContent align="center">
72
        <div class="grid grid-cols-3 gap-2 w-[520px] p-2">
73
          <NavigationMenuLink href="/docs">
74
            <div class="flex flex-col gap-1">
75
              <div class="leading-none font-medium">Docs</div>
76
              <div class="line-clamp-2 text-muted-foreground">Get started</div>
77
            </div>
78
          </NavigationMenuLink>
79
          <NavigationMenuLink href="#">
80
            <div class="flex flex-col gap-1">
81
              <div class="leading-none font-medium">Blog</div>
82
              <div class="line-clamp-2 text-muted-foreground">Latest updates</div>
83
            </div>
84
          </NavigationMenuLink>
85
          <NavigationMenuLink href="#">
86
            <div class="flex flex-col gap-1">
87
              <div class="leading-none font-medium">Support</div>
88
              <div class="line-clamp-2 text-muted-foreground">Get help</div>
89
            </div>
90
          </NavigationMenuLink>
91
          <NavigationMenuLink href="#">
92
            <div class="flex flex-col gap-1">
93
              <div class="leading-none font-medium">Events</div>
94
              <div class="line-clamp-2 text-muted-foreground">Upcoming webinars</div>
95
            </div>
96
          </NavigationMenuLink>
97
          <NavigationMenuLink href="#">
98
            <div class="flex flex-col gap-1">
99
              <div class="leading-none font-medium">Guides</div>
100
              <div class="line-clamp-2 text-muted-foreground">Best practices</div>
101
            </div>
102
          </NavigationMenuLink>
103
          <NavigationMenuLink href="#">
104
            <div class="flex flex-col gap-1">
105
              <div class="leading-none font-medium">Contact</div>
106
              <div class="line-clamp-2 text-muted-foreground">Talk to us</div>
107
            </div>
108
          </NavigationMenuLink>
109
        </div>
110
      </NavigationMenuContent>
111
    </NavigationMenuItem>
112
    <NavigationMenuItem value="company">
113
      <NavigationMenuTrigger>Company</NavigationMenuTrigger>
114
      <NavigationMenuContent align="end">
115
        <div class="w-[180px] p-2">
116
          <NavigationMenuLink href="#">
117
            <div class="flex flex-col gap-1">
118
              <div class="leading-none font-medium">About</div>
119
              <div class="line-clamp-2 text-muted-foreground">Our story</div>
120
            </div>
121
          </NavigationMenuLink>
122
          <NavigationMenuLink href="#">
123
            <div class="flex flex-col gap-1">
124
              <div class="leading-none font-medium">Careers</div>
125
              <div class="line-clamp-2 text-muted-foreground">Join the team</div>
126
            </div>
127
          </NavigationMenuLink>
128
        </div>
129
      </NavigationMenuContent>
130
    </NavigationMenuItem>
131
    <NavigationMenuIndicator />
132
  </NavigationMenuList>
133
</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="#">
19
            <div class="flex flex-col gap-1">
20
              <div class="leading-none font-medium">Analytics</div>
21
              <div class="line-clamp-2 text-muted-foreground">Real-time insights</div>
22
            </div>
23
          </NavigationMenuLink>
24
          <NavigationMenuLink href="#">
25
            <div class="flex flex-col gap-1">
26
              <div class="leading-none font-medium">Automation</div>
27
              <div class="line-clamp-2 text-muted-foreground">Workflow builders</div>
28
            </div>
29
          </NavigationMenuLink>
30
        </div>
31
      </NavigationMenuContent>
32
    </NavigationMenuItem>
33
    <NavigationMenuItem value="resources">
34
      <NavigationMenuTrigger>Resources</NavigationMenuTrigger>
35
      <NavigationMenuContent align="center">
36
        <div class="grid grid-cols-2 gap-2 w-[380px] p-2">
37
          <NavigationMenuLink href="/docs">
38
            <div class="flex flex-col gap-1">
39
              <div class="leading-none font-medium">Docs</div>
40
              <div class="line-clamp-2 text-muted-foreground">Get started</div>
41
            </div>
42
          </NavigationMenuLink>
43
          <NavigationMenuLink href="#">
44
            <div class="flex flex-col gap-1">
45
              <div class="leading-none font-medium">Support</div>
46
              <div class="line-clamp-2 text-muted-foreground">Get help</div>
47
            </div>
48
          </NavigationMenuLink>
49
        </div>
50
      </NavigationMenuContent>
51
    </NavigationMenuItem>
52
    <NavigationMenuIndicator />
53
  </NavigationMenuList>
54
</NavigationMenu>

Props

Prop	Type	Default
`class`	`string`	`""`
`align`	`"start" \| "center" \| "end"`	`"start"`
`viewport`	`boolean`	`true`
`delayOpen`	`number`	`0`
`delayClose`	`number`	`0`
`openOnFocus`	`boolean`

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/registry/ui/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="#" class="flex-row items-start gap-4">
14
            <ChartBarIcon class="size-5 mt-1 text-muted-foreground" />
15
            <div class="flex flex-col gap-1">
16
              <div class="leading-none font-medium">Analytics</div>
17
              <div class="line-clamp-2 text-muted-foreground">Track your metrics</div>
18
            </div>
19
          </NavigationMenuLink>
20
          <NavigationMenuLink href="#" class="flex-row items-start gap-4">
21
            <ZapIcon class="size-5 mt-1 text-muted-foreground" />
22
            <div class="flex flex-col gap-1">
23
              <div class="leading-none font-medium">Automation</div>
24
              <div class="line-clamp-2 text-muted-foreground">Streamline workflows</div>
25
            </div>
26
          </NavigationMenuLink>
27
          <NavigationMenuLink href="#" class="flex-row items-start gap-4">
28
            <ShieldIcon class="size-5 mt-1 text-muted-foreground" />
29
            <div class="flex flex-col gap-1">
30
              <div class="leading-none font-medium">Security</div>
31
              <div class="line-clamp-2 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/registry/ui/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="#" class="flex h-full flex-col items-start 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="#">
18
            <div class="flex flex-col gap-1">
19
              <div class="leading-none font-medium">Installation</div>
20
              <div class="line-clamp-2 text-muted-foreground">Step-by-step setup</div>
21
            </div>
22
          </NavigationMenuLink>
23
          <NavigationMenuLink href="#">
24
            <div class="flex flex-col gap-1">
25
              <div class="leading-none font-medium">Configuration</div>
26
              <div class="line-clamp-2 text-muted-foreground">Customize settings</div>
27
            </div>
28
          </NavigationMenuLink>
29
          <NavigationMenuLink href="#">
30
            <div class="flex flex-col gap-1">
31
              <div class="leading-none font-medium">Examples</div>
32
              <div class="line-clamp-2 text-muted-foreground">Code samples</div>
33
            </div>
34
          </NavigationMenuLink>
35
        </div>
36
      </NavigationMenuContent>
37
    </NavigationMenuItem>
38
    <NavigationMenuIndicator />
39
  </NavigationMenuList>
40
</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/registry/ui/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="#">Product One</NavigationMenuLink>
12
          <NavigationMenuLink href="#">Product Two</NavigationMenuLink>
13
        </div>
14
      </NavigationMenuContent>
15
    </NavigationMenuItem>
16
    <NavigationMenuItem>
17
      <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">
18
        Pricing
19
      </NavigationMenuLink>
20
    </NavigationMenuItem>
21
    <NavigationMenuItem>
22
      <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">
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/registry/ui/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="#">Option One</NavigationMenuLink>
12
          <NavigationMenuLink href="#">Option Two</NavigationMenuLink>
13
        </div>
14
      </NavigationMenuContent>
15
    </NavigationMenuItem>
16
  </NavigationMenuList>
17
</NavigationMenu>

API Reference

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

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