NavigationMenu
Default
Usage
tsx
import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuViewport, NavigationMenuLink, NavigationMenuIndicator } from '@tryvienna/ui'
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>
<NavigationMenuContent>
<ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
<li className="row-span-3">
<NavigationMenuLink asChild>
<a
className="from-muted/50 to-muted flex h-full w-full flex-col justify-end rounded-md bg-gradient-to-b p-6 no-underline outline-none select-none focus:shadow-md"
href="#"
>
<div className="mb-2 mt-4 text-lg font-medium">Vienna UI</div>
<p className="text-sm leading-tight text-muted-foreground">
Beautifully designed components built with Radix UI and Tailwind CSS.
</p>
</a>
</NavigationMenuLink>
</li>
<li>
<NavigationMenuLink asChild>
<a
className="block rounded-md p-3 leading-none no-underline outline-none select-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
href="#"
>
<div className="text-sm font-medium leading-none">Introduction</div>
<p className="line-clamp-2 text-sm leading-snug text-muted-foreground mt-1">
Re-usable components built using Radix UI and Tailwind CSS.
</p>
</a>
</NavigationMenuLink>
</li>
<li>
<NavigationMenuLink asChild>
<a
className="block rounded-md p-3 leading-none no-underline outline-none select-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
href="#"
>
<div className="text-sm font-medium leading-none">Installation</div>
<p className="line-clamp-2 text-sm leading-snug text-muted-foreground mt-1">
How to install dependencies and structure your app.
</p>
</a>
</NavigationMenuLink>
</li>
<li>
<NavigationMenuLink asChild>
<a
className="block rounded-md p-3 leading-none no-underline outline-none select-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
href="#"
>
<div className="text-sm font-medium leading-none">Typography</div>
<p className="line-clamp-2 text-sm leading-snug text-muted-foreground mt-1">
Styles for headings, paragraphs, lists, and more.
</p>
</a>
</NavigationMenuLink>
</li>
</ul>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuTrigger>Components</NavigationMenuTrigger>
<NavigationMenuContent>
<ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
{[
{ title: 'Alert Dialog', description: 'A modal dialog that interrupts the user.' },
{ title: 'Hover Card', description: 'For sighted users to preview content.' },
{ title: 'Progress', description: 'Displays an indicator for task completion.' },
{ title: 'Scroll Area', description: 'Augments native scroll functionality.' },
{ title: 'Tabs', description: 'A set of layered sections of content.' },
{ title: 'Tooltip', description: 'A popup that displays on hover.' },
].map((component) => (
<li key={component.title}>
<NavigationMenuLink asChild>
<a
className="block rounded-md p-3 leading-none no-underline outline-none select-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
href="#"
>
<div className="text-sm font-medium leading-none">{component.title}</div>
<p className="line-clamp-2 text-sm leading-snug text-muted-foreground mt-1">
{component.description}
</p>
</a>
</NavigationMenuLink>
</li>
))}
</ul>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink className={navigationMenuTriggerStyle()} href="#">
Documentation
</NavigationMenuLink>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
Examples
Default
Default
tsx
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>
<NavigationMenuContent>
<ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
<li className="row-span-3">
<NavigationMenuLink asChild>
<a
className="from-muted/50 to-muted flex h-full w-full flex-col justify-end rounded-md bg-gradient-to-b p-6 no-underline outline-none select-none focus:shadow-md"
href="#"
>
<div className="mb-2 mt-4 text-lg font-medium">Vienna UI</div>
<p className="text-sm leading-tight text-muted-foreground">
Beautifully designed components built with Radix UI and Tailwind CSS.
</p>
</a>
</NavigationMenuLink>
</li>
<li>
<NavigationMenuLink asChild>
<a
className="block rounded-md p-3 leading-none no-underline outline-none select-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
href="#"
>
<div className="text-sm font-medium leading-none">Introduction</div>
<p className="line-clamp-2 text-sm leading-snug text-muted-foreground mt-1">
Re-usable components built using Radix UI and Tailwind CSS.
</p>
</a>
</NavigationMenuLink>
</li>
<li>
<NavigationMenuLink asChild>
<a
className="block rounded-md p-3 leading-none no-underline outline-none select-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
href="#"
>
<div className="text-sm font-medium leading-none">Installation</div>
<p className="line-clamp-2 text-sm leading-snug text-muted-foreground mt-1">
How to install dependencies and structure your app.
</p>
</a>
</NavigationMenuLink>
</li>
<li>
<NavigationMenuLink asChild>
<a
className="block rounded-md p-3 leading-none no-underline outline-none select-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
href="#"
>
<div className="text-sm font-medium leading-none">Typography</div>
<p className="line-clamp-2 text-sm leading-snug text-muted-foreground mt-1">
Styles for headings, paragraphs, lists, and more.
</p>
</a>
</NavigationMenuLink>
</li>
</ul>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuTrigger>Components</NavigationMenuTrigger>
<NavigationMenuContent>
<ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
{[
{ title: 'Alert Dialog', description: 'A modal dialog that interrupts the user.' },
{ title: 'Hover Card', description: 'For sighted users to preview content.' },
{ title: 'Progress', description: 'Displays an indicator for task completion.' },
{ title: 'Scroll Area', description: 'Augments native scroll functionality.' },
{ title: 'Tabs', description: 'A set of layered sections of content.' },
{ title: 'Tooltip', description: 'A popup that displays on hover.' },
].map((component) => (
<li key={component.title}>
<NavigationMenuLink asChild>
<a
className="block rounded-md p-3 leading-none no-underline outline-none select-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
href="#"
>
<div className="text-sm font-medium leading-none">{component.title}</div>
<p className="line-clamp-2 text-sm leading-snug text-muted-foreground mt-1">
{component.description}
</p>
</a>
</NavigationMenuLink>
</li>
))}
</ul>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink className={navigationMenuTriggerStyle()} href="#">
Documentation
</NavigationMenuLink>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
With Links
With Links
tsx
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuLink className={navigationMenuTriggerStyle()} href="#">
Home
</NavigationMenuLink>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink className={navigationMenuTriggerStyle()} href="#">
About
</NavigationMenuLink>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink className={navigationMenuTriggerStyle()} href="#">
Blog
</NavigationMenuLink>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink className={navigationMenuTriggerStyle()} href="#">
Contact
</NavigationMenuLink>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
No Viewport
No Viewport
tsx
<NavigationMenu viewport={false}>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>Products</NavigationMenuTrigger>
<NavigationMenuContent>
<ul className="grid w-[300px] gap-3 p-4">
<li>
<NavigationMenuLink asChild>
<a
className="block rounded-md p-3 leading-none no-underline outline-none select-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
href="#"
>
<div className="text-sm font-medium leading-none">Analytics</div>
<p className="line-clamp-2 text-sm leading-snug text-muted-foreground mt-1">
Track your performance metrics.
</p>
</a>
</NavigationMenuLink>
</li>
<li>
<NavigationMenuLink asChild>
<a
className="block rounded-md p-3 leading-none no-underline outline-none select-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
href="#"
>
<div className="text-sm font-medium leading-none">Automation</div>
<p className="line-clamp-2 text-sm leading-snug text-muted-foreground mt-1">
Automate your workflow with ease.
</p>
</a>
</NavigationMenuLink>
</li>
</ul>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink className={navigationMenuTriggerStyle()} href="#">
Pricing
</NavigationMenuLink>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
API Reference
NavigationMenu
| Prop | Type | Default | Description |
|---|---|---|---|
viewport | boolean | true |
Also accepts all props from NavigationMenuPrimitive.Root.
NavigationMenuList
Also accepts all props from NavigationMenuPrimitive.List.
NavigationMenuItem
Also accepts all props from NavigationMenuPrimitive.Item.
NavigationMenuTrigger
Also accepts all props from NavigationMenuPrimitive.Trigger.
NavigationMenuContent
Also accepts all props from NavigationMenuPrimitive.Content.
NavigationMenuViewport
Also accepts all props from NavigationMenuPrimitive.Viewport.
NavigationMenuLink
Also accepts all props from NavigationMenuPrimitive.Link.
NavigationMenuIndicator
Also accepts all props from NavigationMenuPrimitive.Indicator.
Data Attributes
| Component | data-slot |
|---|---|
NavigationMenu | "navigation-menu" |
NavigationMenuList | "navigation-menu-list" |
NavigationMenuItem | "navigation-menu-item" |
NavigationMenuTrigger | "navigation-menu-trigger" |
NavigationMenuContent | "navigation-menu-content" |
NavigationMenuViewport | "navigation-menu-viewport" |
NavigationMenuLink | "navigation-menu-link" |
NavigationMenuIndicator | "navigation-menu-indicator" |