Navigation Menu

1<script lang="ts">
2	import CircleCheckIcon from '@lucide/svelte/icons/circle-check';
3	import CircleHelpIcon from '@lucide/svelte/icons/circle-help';
4	import CircleIcon from '@lucide/svelte/icons/circle';
5	import { cn } from '$lib/utils.js';
6	import type { HTMLAttributes } from 'svelte/elements';
7	import * as NavigationMenu from './index.js';
8	import { navigationMenuTriggerStyle } from './navigation-menu-trigger.variants.js';
9
10	const components: { title: string; href: string; description: string }[] = [
11		{
12			title: 'Alert Dialog',
13			href: '#/',
14			description:
15				'A modal dialog that interrupts the user with important content and expects a response.'
16		},
17		{
18			title: 'Hover Card',
19			href: '#/',
20			description: 'For sighted users to preview content available behind a link.'
21		},
22		{
23			title: 'Progress',
24			href: '#/',
25			description:
26				'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.'
27		},
28		{
29			title: 'Scroll-area',
30			href: '#/',
31			description: 'Visually or semantically separates content.'
32		},
33		{
34			title: 'Tabs',
35			href: '#/',
36			description:
37				'A set of layered sections of content—known as tab panels—that are displayed one at a time.'
38		},
39		{
40			title: 'Tooltip',
41			href: '#/',
42			description:
43				'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.'
44		}
45	];
46
47	type ListItemProps = HTMLAttributes<HTMLAnchorElement> & {
48		title: string;
49		href: string;
50		content: string;
51	};
52</script>
53
54{#snippet ListItem({ title, content, href, class: className, ...restProps }: ListItemProps)}
55	<li>
56		<NavigationMenu.Link>
57			{#snippet child()}
58				<a
59					{href}
60					class={cn(
61						'block space-y-1 rounded-md p-3 leading-none no-underline transition-colors outline-none select-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
62						className
63					)}
64					{...restProps}
65				>
66					<div class="text-sm leading-none font-medium">{title}</div>
67					<p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
68						{content}
69					</p>
70				</a>
71			{/snippet}
72		</NavigationMenu.Link>
73	</li>
74{/snippet}
75
76<NavigationMenu.Root>
77	<NavigationMenu.List class="flex-wrap">
78		<NavigationMenu.Item>
79			<NavigationMenu.Trigger>Home</NavigationMenu.Trigger>
80			<NavigationMenu.Content>
81				<ul class="grid gap-2 p-2 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
82					<li class="row-span-3">
83						<NavigationMenu.Link
84							class="flex h-full w-full flex-col justify-end rounded-md bg-linear-to-b from-muted/50 to-muted p-4 no-underline outline-hidden select-none focus:shadow-md md:p-6"
85						>
86							{#snippet child({ props })}
87								<a {...props} href="#/">
88									<div class="mt-4 mb-2 text-lg font-medium">shadcn-svelte</div>
89									<p class="text-sm leading-tight text-muted-foreground">
90										Beautifully designed components built with Tailwind CSS.
91									</p>
92								</a>
93							{/snippet}
94						</NavigationMenu.Link>
95					</li>
96					{@render ListItem({
97						href: '#/',
98						title: 'Introduction',
99						content: 'Re-usable components built using Bits UI and Tailwind CSS.'
100					})}
101					{@render ListItem({
102						href: '#/',
103						title: 'Installation',
104						content: 'How to install dependencies and structure your app.'
105					})}
106					{@render ListItem({
107						href: '#/',
108						title: 'Typography',
109						content: 'Styles for headings, paragraphs, lists...etc'
110					})}
111				</ul>
112			</NavigationMenu.Content>
113		</NavigationMenu.Item>
114		<NavigationMenu.Item>
115			<NavigationMenu.Trigger>Components</NavigationMenu.Trigger>
116			<NavigationMenu.Content>
117				<ul class="grid w-[300px] gap-2 p-2 sm:w-[400px] md:w-[500px] md:grid-cols-2 lg:w-[600px]">
118					{#each components as component (component.title)}
119						{@render ListItem({
120							href: component.href,
121							title: component.title,
122							content: component.description
123						})}
124					{/each}
125				</ul>
126			</NavigationMenu.Content>
127		</NavigationMenu.Item>
128		<NavigationMenu.Item>
129			<NavigationMenu.Link>
130				{#snippet child()}
131					<a href="#/" class={navigationMenuTriggerStyle()}>Docs</a>
132				{/snippet}
133			</NavigationMenu.Link>
134		</NavigationMenu.Item>
135		<NavigationMenu.Item class="hidden md:block">
136			<NavigationMenu.Trigger>With Icon</NavigationMenu.Trigger>
137			<NavigationMenu.Content>
138				<ul class="grid w-[200px] gap-4 p-2">
139					<li>
140						<NavigationMenu.Link href="#/" class="flex-row items-center gap-2">
141							<CircleHelpIcon />
142							Backlog
143						</NavigationMenu.Link>
144						<NavigationMenu.Link href="#/" class="flex-row items-center gap-2">
145							<CircleIcon />
146							To Do
147						</NavigationMenu.Link>
148						<NavigationMenu.Link href="#/" class="flex-row items-center gap-2">
149							<CircleCheckIcon />
150							Done
151						</NavigationMenu.Link>
152					</li>
153				</ul>
154			</NavigationMenu.Content>
155		</NavigationMenu.Item>
156	</NavigationMenu.List>
157</NavigationMenu.Root>
158