import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucideCheck, lucideChevronDown, lucideCircle, lucideInfo, lucideLink } from '@ng-icons/lucide';
import { BrnNavigationMenuImports } from '@spartan-ng/brain/navigation-menu';
import { HlmIconImports } from '@spartan-ng/helm/icon';
import { HlmNavigationMenuImports } from '@spartan-ng/helm/navigation-menu';

@Component({
	selector: 'spartan-navigation-menu-preview',
	imports: [HlmNavigationMenuImports, BrnNavigationMenuImports, HlmIconImports],
	providers: [provideIcons({ lucideChevronDown, lucideLink, lucideCircle, lucideCheck, lucideInfo })],
	template: `
		<nav hlmNavigationMenu>
			<ul hlmNavigationMenuList class="flex-wrap">
				<li hlmNavigationMenuItem>
					<button hlmNavigationMenuTrigger>
						Home
						<ng-icon
							name="lucideChevronDown"
							class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
						/>
					</button>
					<div hlmNavigationMenuContent *brnNavigationMenuContent>
						<ul class="grid gap-2 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
							<li class="row-span-3">
								<a
									hlmNavigationMenuLink
									class="from-muted/50 to-muted flex h-full w-full flex-col justify-end rounded-md bg-linear-to-b p-4 no-underline outline-hidden select-none focus:shadow-md md:p-6"
									href="/"
								>
									<div class="mb-2 text-lg font-medium sm:mt-4">spartan.ng</div>
									<p class="text-muted-foreground text-sm leading-tight">
										Beautifully designed components built with Tailwind CSS.
									</p>
								</a>
							</li>

							<li>
								<a hlmNavigationMenuLink href="/documentation/introduction">
									<div class="text-sm leading-none font-medium">Introduction</div>
									<p class="text-muted-foreground line-clamp-2 text-sm leading-snug">
										Re-usable components built using Radix UI and Tailwind CSS.
									</p>
								</a>
							</li>
							<li>
								<a hlmNavigationMenuLink href="/documentation/installation">
									<div class="text-sm leading-none font-medium">Installation</div>
									<p class="text-muted-foreground line-clamp-2 text-sm leading-snug">
										How to install dependencies and structure your app.
									</p>
								</a>
							</li>
							<li>
								<a hlmNavigationMenuLink href="/documentation/typography">
									<div class="text-sm leading-none font-medium">Typography</div>
									<p class="text-muted-foreground line-clamp-2 text-sm leading-snug">
										Styles for headings, paragraphs, lists...etc
									</p>
								</a>
							</li>
						</ul>
					</div>
				</li>

				<!-- Components Menu -->
				<li hlmNavigationMenuItem>
					<button hlmNavigationMenuTrigger>
						Components
						<ng-icon
							name="lucideChevronDown"
							class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
						/>
					</button>
					<div hlmNavigationMenuContent *brnNavigationMenuContent>
						<ul class="grid gap-2 sm:w-[400px] md:w-[500px] md:grid-cols-2 lg:w-[600px]">
							@for (component of _components; track $index) {
								<li>
									<a hlmNavigationMenuLink [href]="component.href">
										<div class="text-sm leading-none font-medium">{{ component.title }}</div>
										<p class="text-muted-foreground line-clamp-2 text-sm leading-snug">
											{{ component.description }}
										</p>
									</a>
								</li>
							}
						</ul>
					</div>
				</li>

				<li hlmNavigationMenuItem>
					<a hlmNavigationMenuLink href="/documentation/introduction">Docs</a>
				</li>

				<li hlmNavigationMenuItem class="hidden md:block">
					<button hlmNavigationMenuTrigger>
						List
						<ng-icon
							name="lucideChevronDown"
							class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
						/>
					</button>
					<div hlmNavigationMenuContent *brnNavigationMenuContent>
						<ul class="grid w-[300px] gap-4">
							<li>
								<a hlmNavigationMenuLink class="cursor-pointer">
									<div class="font-medium">Components</div>
									<div class="text-muted-foreground">Browse all components in the library.</div>
								</a>
								<a hlmNavigationMenuLink class="cursor-pointer">
									<div class="font-medium">Documentation</div>
									<div class="text-muted-foreground">Learn how to use the library.</div>
								</a>
								<a hlmNavigationMenuLink class="cursor-pointer">
									<div class="font-medium">Blog</div>
									<div class="text-muted-foreground">Read our latest blog posts.</div>
								</a>
							</li>
						</ul>
					</div>
				</li>

				<li hlmNavigationMenuItem class="hidden md:block">
					<button hlmNavigationMenuTrigger>
						Simple
						<ng-icon
							name="lucideChevronDown"
							class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
						/>
					</button>
					<div hlmNavigationMenuContent *brnNavigationMenuContent>
						<ul class="grid w-[200px] gap-4">
							<li>
								<a hlmNavigationMenuLink class="cursor-pointer">Components</a>
								<a hlmNavigationMenuLink class="cursor-pointer">Documentation</a>
								<a hlmNavigationMenuLink class="cursor-pointer">Blocks</a>
							</li>
						</ul>
					</div>
				</li>

				<li hlmNavigationMenuItem class="hidden md:block">
					<button hlmNavigationMenuTrigger>
						With Icon
						<ng-icon
							name="lucideChevronDown"
							class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
						/>
					</button>
					<div hlmNavigationMenuContent *brnNavigationMenuContent>
						<ul class="grid w-[200px] gap-4">
							<li>
								<a hlmNavigationMenuLink class="cursor-pointer flex-row items-center gap-2">
									<ng-icon name="lucideInfo" />
									Backlog
								</a>
								<a hlmNavigationMenuLink class="cursor-pointer flex-row items-center gap-2">
									<ng-icon name="lucideCircle" />
									To Do
								</a>
								<a hlmNavigationMenuLink class="cursor-pointer flex-row items-center gap-2">
									<ng-icon name="lucideCheck" />
									Done
								</a>
							</li>
						</ul>
					</div>
				</li>
			</ul>
		</nav>
	`,
})
export class NavigationMenuPreview {
	protected readonly _components = [
		{
			title: 'Alert Dialog',
			description: 'A modal dialog that interrupts the user with important content and expects a response.',
			href: '/components/alert-dialog',
		},
		{
			title: 'Hover Card',
			description: 'For sighted users to preview content available behind a link.',
			href: '/components/hover-card',
		},
		{
			title: 'Progress',
			description: 'Displays an indicator showing the completion progress of a task.',
			href: '/components/progress',
		},
		{
			title: 'Scroll Area',
			description: 'Visually or semantically separates content.',
			href: '/components/scroll-area',
		},
		{
			title: 'Tabs',
			description: 'A set of layered content panels displayed one at a time.',
			href: '/components/tabs',
		},
		{
			title: 'Tooltip',
			description: 'A popup that displays information on hover or focus.',
			href: '/components/tooltip',
		},
	];
}

Installation

ng g @spartan-ng/cli:ui navigation-menu

Usage

import { BrnNavigationMenuImports } from '@spartan-ng/brain/navigation-menu';
import { HlmNavigationMenuImports } from '@spartan-ng/helm/navigation-menu';

<nav hlmNavigationMenu>
	<ul hlmNavigationMenuList>
		<li hlmNavigationMenuItem>
			<button hlmNavigationMenuTrigger>Home</button>
			<div hlmNavigationMenuContent *brnNavigationMenuContent>
				<div>Content</div>
			</div>
		<li>
	</ul>
</nav>

Examples

Vertical

import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucideCheck, lucideChevronDown, lucideCircle, lucideInfo, lucideLink } from '@ng-icons/lucide';
import { BrnNavigationMenuImports } from '@spartan-ng/brain/navigation-menu';
import { HlmIconImports } from '@spartan-ng/helm/icon';
import { HlmNavigationMenuImports } from '@spartan-ng/helm/navigation-menu';

@Component({
	selector: 'spartan-navigation-menu-vertical',
	imports: [HlmNavigationMenuImports, BrnNavigationMenuImports, HlmIconImports],
	providers: [provideIcons({ lucideChevronDown, lucideLink, lucideCircle, lucideCheck, lucideInfo })],
	template: `
		<nav hlmNavigationMenu orientation="vertical">
			<ul hlmNavigationMenuList class="w-35 flex-wrap">
				<li hlmNavigationMenuItem class="w-full">
					<button hlmNavigationMenuTrigger class="w-full">
						Home
						<ng-icon
							name="lucideChevronDown"
							class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
						/>
					</button>
					<div hlmNavigationMenuContent *brnNavigationMenuContent>
						<ul class="grid gap-2 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
							<li class="row-span-3">
								<a
									hlmNavigationMenuLink
									class="from-muted/50 to-muted flex h-full w-full flex-col justify-end rounded-md bg-linear-to-b p-4 no-underline outline-hidden select-none focus:shadow-md md:p-6"
									href="/"
								>
									<div class="mb-2 text-lg font-medium sm:mt-4">spartan.ng</div>
									<p class="text-muted-foreground text-sm leading-tight">
										Beautifully designed components built with Tailwind CSS.
									</p>
								</a>
							</li>

							<li>
								<a hlmNavigationMenuLink href="/documentation/introduction">
									<div class="text-sm leading-none font-medium">Introduction</div>
									<p class="text-muted-foreground line-clamp-2 text-sm leading-snug">
										Re-usable components built using Radix UI and Tailwind CSS.
									</p>
								</a>
							</li>
							<li>
								<a hlmNavigationMenuLink href="/documentation/installation">
									<div class="text-sm leading-none font-medium">Installation</div>
									<p class="text-muted-foreground line-clamp-2 text-sm leading-snug">
										How to install dependencies and structure your app.
									</p>
								</a>
							</li>
							<li>
								<a hlmNavigationMenuLink href="/documentation/typography">
									<div class="text-sm leading-none font-medium">Typography</div>
									<p class="text-muted-foreground line-clamp-2 text-sm leading-snug">
										Styles for headings, paragraphs, lists...etc
									</p>
								</a>
							</li>
						</ul>
					</div>
				</li>

				<!-- Components Menu -->
				<li hlmNavigationMenuItem class="w-full">
					<button hlmNavigationMenuTrigger class="w-full">
						Components
						<ng-icon
							name="lucideChevronDown"
							class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
						/>
					</button>
					<div hlmNavigationMenuContent *brnNavigationMenuContent>
						<ul class="grid gap-2 sm:w-[400px] md:w-[500px] md:grid-cols-2 lg:w-[600px]">
							@for (component of _components; track $index) {
								<li>
									<a hlmNavigationMenuLink [href]="component.href">
										<div class="text-sm leading-none font-medium">{{ component.title }}</div>
										<p class="text-muted-foreground line-clamp-2 text-sm leading-snug">
											{{ component.description }}
										</p>
									</a>
								</li>
							}
						</ul>
					</div>
				</li>

				<li hlmNavigationMenuItem class="w-full">
					<a hlmNavigationMenuLink class="w-full text-center" href="/documentation/introduction">Docs</a>
				</li>

				<li hlmNavigationMenuItem class="w-full">
					<button hlmNavigationMenuTrigger class="w-full">
						List
						<ng-icon
							name="lucideChevronDown"
							class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
						/>
					</button>
					<div hlmNavigationMenuContent *brnNavigationMenuContent>
						<ul class="grid w-[300px] gap-4">
							<li>
								<a hlmNavigationMenuLink class="cursor-pointer">
									<div class="font-medium">Components</div>
									<div class="text-muted-foreground">Browse all components in the library.</div>
								</a>
								<a hlmNavigationMenuLink class="cursor-pointer">
									<div class="font-medium">Documentation</div>
									<div class="text-muted-foreground">Learn how to use the library.</div>
								</a>
								<a hlmNavigationMenuLink class="cursor-pointer">
									<div class="font-medium">Blog</div>
									<div class="text-muted-foreground">Read our latest blog posts.</div>
								</a>
							</li>
						</ul>
					</div>
				</li>

				<li hlmNavigationMenuItem class="w-full">
					<button hlmNavigationMenuTrigger class="w-full">
						Simple
						<ng-icon
							name="lucideChevronDown"
							class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
						/>
					</button>
					<div hlmNavigationMenuContent *brnNavigationMenuContent>
						<ul class="grid w-[200px] gap-4">
							<li>
								<a hlmNavigationMenuLink class="cursor-pointer">Components</a>
								<a hlmNavigationMenuLink class="cursor-pointer">Documentation</a>
								<a hlmNavigationMenuLink class="cursor-pointer">Blocks</a>
							</li>
						</ul>
					</div>
				</li>

				<li hlmNavigationMenuItem class="w-full">
					<button hlmNavigationMenuTrigger class="w-full">
						With Icon
						<ng-icon
							name="lucideChevronDown"
							class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
						/>
					</button>
					<div hlmNavigationMenuContent *brnNavigationMenuContent>
						<ul class="grid w-[200px] gap-4">
							<li>
								<a hlmNavigationMenuLink class="cursor-pointer flex-row items-center gap-2">
									<ng-icon name="lucideInfo" />
									Backlog
								</a>
								<a hlmNavigationMenuLink class="cursor-pointer flex-row items-center gap-2">
									<ng-icon name="lucideCircle" />
									To Do
								</a>
								<a hlmNavigationMenuLink class="cursor-pointer flex-row items-center gap-2">
									<ng-icon name="lucideCheck" />
									Done
								</a>
							</li>
						</ul>
					</div>
				</li>
			</ul>
		</nav>
	`,
})
export class NavigationMenuVertical {
	protected readonly _components = [
		{
			title: 'Alert Dialog',
			description: 'A modal dialog that interrupts the user with important content and expects a response.',
			href: '/components/alert-dialog',
		},
		{
			title: 'Hover Card',
			description: 'For sighted users to preview content available behind a link.',
			href: '/components/hover-card',
		},
		{
			title: 'Progress',
			description: 'Displays an indicator showing the completion progress of a task.',
			href: '/components/progress',
		},
		{
			title: 'Scroll Area',
			description: 'Visually or semantically separates content.',
			href: '/components/scroll-area',
		},
		{
			title: 'Tabs',
			description: 'A set of layered content panels displayed one at a time.',
			href: '/components/tabs',
		},
		{
			title: 'Tooltip',
			description: 'A popup that displays information on hover or focus.',
			href: '/components/tooltip',
		},
	];
}

Controlled

The navigation menu's value input can be set to the menu item's id to activate it. Declaratively set navigation menu item stays activated until it is hovered or focused out.

import { Component, signal } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucideCheck, lucideChevronDown, lucideCircle, lucideInfo, lucideLink } from '@ng-icons/lucide';
import { BrnNavigationMenuImports } from '@spartan-ng/brain/navigation-menu';
import { HlmIconImports } from '@spartan-ng/helm/icon';
import { HlmNavigationMenuImports } from '@spartan-ng/helm/navigation-menu';

@Component({
	selector: 'spartan-navigation-menu-controlled',
	imports: [HlmNavigationMenuImports, BrnNavigationMenuImports, HlmIconImports],
	providers: [provideIcons({ lucideChevronDown, lucideLink, lucideCircle, lucideInfo, lucideCheck })],
	template: `
		<nav hlmNavigationMenu [(value)]="_value">
			<ul hlmNavigationMenuList class="flex-wrap">
				<li hlmNavigationMenuItem id="home">
					<button hlmNavigationMenuTrigger>
						Home
						<ng-icon
							name="lucideChevronDown"
							class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
						/>
					</button>
					<div hlmNavigationMenuContent *brnNavigationMenuContent>
						<ul class="grid gap-2 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
							<li class="row-span-3">
								<a
									hlmNavigationMenuLink
									class="from-muted/50 to-muted flex h-full w-full flex-col justify-end rounded-md bg-linear-to-b p-4 no-underline outline-hidden select-none focus:shadow-md md:p-6"
									href="/"
								>
									<div class="mb-2 text-lg font-medium sm:mt-4">spartan.ng</div>
									<p class="text-muted-foreground text-sm leading-tight">
										Beautifully designed components built with Tailwind CSS.
									</p>
								</a>
							</li>

							<li>
								<a hlmNavigationMenuLink href="/documentation/introduction">
									<div class="text-sm leading-none font-medium">Introduction</div>
									<p class="text-muted-foreground line-clamp-2 text-sm leading-snug">
										Re-usable components built using Radix UI and Tailwind CSS.
									</p>
								</a>
							</li>
							<li>
								<a hlmNavigationMenuLink href="/documentation/installation">
									<div class="text-sm leading-none font-medium">Installation</div>
									<p class="text-muted-foreground line-clamp-2 text-sm leading-snug">
										How to install dependencies and structure your app.
									</p>
								</a>
							</li>
							<li>
								<a hlmNavigationMenuLink href="/documentation/typography">
									<div class="text-sm leading-none font-medium">Typography</div>
									<p class="text-muted-foreground line-clamp-2 text-sm leading-snug">
										Styles for headings, paragraphs, lists...etc
									</p>
								</a>
							</li>
						</ul>
					</div>
				</li>

				<!-- Components Menu -->
				<li hlmNavigationMenuItem>
					<button hlmNavigationMenuTrigger>
						Components
						<ng-icon
							name="lucideChevronDown"
							class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
						/>
					</button>
					<div hlmNavigationMenuContent *brnNavigationMenuContent>
						<ul class="grid gap-2 sm:w-[400px] md:w-[500px] md:grid-cols-2 lg:w-[600px]">
							@for (component of _components; track $index) {
								<li>
									<a hlmNavigationMenuLink [href]="component.href">
										<div class="text-sm leading-none font-medium">{{ component.title }}</div>
										<p class="text-muted-foreground line-clamp-2 text-sm leading-snug">
											{{ component.description }}
										</p>
									</a>
								</li>
							}
						</ul>
					</div>
				</li>

				<li hlmNavigationMenuItem>
					<a hlmNavigationMenuLink href="/documentation/introduction">Docs</a>
				</li>

				<li hlmNavigationMenuItem class="hidden md:block">
					<button hlmNavigationMenuTrigger>
						List
						<ng-icon
							name="lucideChevronDown"
							class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
						/>
					</button>
					<div hlmNavigationMenuContent *brnNavigationMenuContent>
						<ul class="grid w-[300px] gap-4">
							<li>
								<a hlmNavigationMenuLink class="cursor-pointer">
									<div class="font-medium">Components</div>
									<div class="text-muted-foreground">Browse all components in the library.</div>
								</a>
								<a hlmNavigationMenuLink class="cursor-pointer">
									<div class="font-medium">Documentation</div>
									<div class="text-muted-foreground">Learn how to use the library.</div>
								</a>
								<a hlmNavigationMenuLink class="cursor-pointer">
									<div class="font-medium">Blog</div>
									<div class="text-muted-foreground">Read our latest blog posts.</div>
								</a>
							</li>
						</ul>
					</div>
				</li>

				<li hlmNavigationMenuItem class="hidden md:block">
					<button hlmNavigationMenuTrigger>
						Simple
						<ng-icon
							name="lucideChevronDown"
							class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
						/>
					</button>
					<div hlmNavigationMenuContent *brnNavigationMenuContent>
						<ul class="grid w-[200px] gap-4">
							<li>
								<a hlmNavigationMenuLink class="cursor-pointer">Components</a>
								<a hlmNavigationMenuLink class="cursor-pointer">Documentation</a>
								<a hlmNavigationMenuLink class="cursor-pointer">Blocks</a>
							</li>
						</ul>
					</div>
				</li>

				<li hlmNavigationMenuItem class="hidden md:block">
					<button hlmNavigationMenuTrigger>
						With Icon
						<ng-icon
							name="lucideChevronDown"
							class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
						/>
					</button>
					<div hlmNavigationMenuContent *brnNavigationMenuContent>
						<ul class="grid w-[200px] gap-4">
							<li>
								<a hlmNavigationMenuLink class="cursor-pointer flex-row items-center gap-2">
									<ng-icon name="lucideInfo" />
									Backlog
								</a>
								<a hlmNavigationMenuLink class="cursor-pointer flex-row items-center gap-2">
									<ng-icon name="lucideCircle" />
									To Do
								</a>
								<a hlmNavigationMenuLink class="cursor-pointer flex-row items-center gap-2">
									<ng-icon name="lucideCheck" />
									Done
								</a>
							</li>
						</ul>
					</div>
				</li>
			</ul>
		</nav>
	`,
})
export class NavigationMenuControlled {
	protected readonly _value = signal('home');

	protected readonly _components = [
		{
			title: 'Alert Dialog',
			description: 'A modal dialog that interrupts the user with important content and expects a response.',
			href: '/components/alert-dialog',
		},
		{
			title: 'Hover Card',
			description: 'For sighted users to preview content available behind a link.',
			href: '/components/hover-card',
		},
		{
			title: 'Progress',
			description: 'Displays an indicator showing the completion progress of a task.',
			href: '/components/progress',
		},
		{
			title: 'Scroll Area',
			description: 'Visually or semantically separates content.',
			href: '/components/scroll-area',
		},
		{
			title: 'Tabs',
			description: 'A set of layered content panels displayed one at a time.',
			href: '/components/tabs',
		},
		{
			title: 'Tooltip',
			description: 'A popup that displays information on hover or focus.',
			href: '/components/tooltip',
		},
	];
}

Nested

import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucideCheck, lucideChevronDown, lucideCircle, lucideInfo, lucideLink } from '@ng-icons/lucide';
import { BrnNavigationMenuImports } from '@spartan-ng/brain/navigation-menu';
import { HlmIconImports } from '@spartan-ng/helm/icon';
import { HlmNavigationMenuImports } from '@spartan-ng/helm/navigation-menu';

@Component({
	selector: 'spartan-navigation-menu-nested',
	imports: [HlmNavigationMenuImports, BrnNavigationMenuImports, HlmIconImports],
	providers: [provideIcons({ lucideChevronDown, lucideLink, lucideCircle, lucideInfo, lucideCheck })],
	template: `
		<nav hlmNavigationMenu>
			<ul hlmNavigationMenuList class="flex-wrap">
				<li hlmNavigationMenuItem>
					<button hlmNavigationMenuTrigger>
						Root
						<ng-icon
							name="lucideChevronDown"
							class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
						/>
					</button>
					<div hlmNavigationMenuContent *brnNavigationMenuContent>
						<nav hlmNavigationMenu orientation="vertical">
							<ul hlmNavigationMenuList class="w-35 flex-wrap">
								<li hlmNavigationMenuItem class="w-full">
									<button hlmNavigationMenuTrigger class="w-full">
										Home
										<ng-icon
											name="lucideChevronDown"
											class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
										/>
									</button>
									<div hlmNavigationMenuContent *brnNavigationMenuContent>
										<ul class="grid gap-2 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
											<li class="row-span-3">
												<a
													hlmNavigationMenuLink
													class="from-muted/50 to-muted flex h-full w-full flex-col justify-end rounded-md bg-linear-to-b p-4 no-underline outline-hidden select-none focus:shadow-md md:p-6"
													href="/"
												>
													<div class="mb-2 text-lg font-medium sm:mt-4">spartan.ng</div>
													<p class="text-muted-foreground text-sm leading-tight">
														Beautifully designed components built with Tailwind CSS.
													</p>
												</a>
											</li>

											<li>
												<a hlmNavigationMenuLink href="/documentation/introduction">
													<div class="text-sm leading-none font-medium">Introduction</div>
													<p class="text-muted-foreground line-clamp-2 text-sm leading-snug">
														Re-usable components built using Radix UI and Tailwind CSS.
													</p>
												</a>
											</li>
											<li>
												<a hlmNavigationMenuLink href="/documentation/installation">
													<div class="text-sm leading-none font-medium">Installation</div>
													<p class="text-muted-foreground line-clamp-2 text-sm leading-snug">
														How to install dependencies and structure your app.
													</p>
												</a>
											</li>
											<li>
												<a hlmNavigationMenuLink href="/documentation/typography">
													<div class="text-sm leading-none font-medium">Typography</div>
													<p class="text-muted-foreground line-clamp-2 text-sm leading-snug">
														Styles for headings, paragraphs, lists...etc
													</p>
												</a>
											</li>
										</ul>
									</div>
								</li>

								<!-- Components Menu -->
								<li hlmNavigationMenuItem class="w-full">
									<button hlmNavigationMenuTrigger class="w-full">
										Components
										<ng-icon
											name="lucideChevronDown"
											class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
										/>
									</button>
									<div hlmNavigationMenuContent *brnNavigationMenuContent>
										<ul class="grid gap-2 sm:w-[400px] md:w-[500px] md:grid-cols-2 lg:w-[600px]">
											@for (component of _components; track $index) {
												<li>
													<a hlmNavigationMenuLink [href]="component.href">
														<div class="text-sm leading-none font-medium">{{ component.title }}</div>
														<p class="text-muted-foreground line-clamp-2 text-sm leading-snug">
															{{ component.description }}
														</p>
													</a>
												</li>
											}
										</ul>
									</div>
								</li>

								<li hlmNavigationMenuItem class="w-full">
									<button hlmNavigationMenuTrigger class="w-full">
										List
										<ng-icon
											name="lucideChevronDown"
											class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
										/>
									</button>
									<div hlmNavigationMenuContent *brnNavigationMenuContent>
										<ul class="grid w-[300px] gap-4">
											<li>
												<a hlmNavigationMenuLink class="cursor-pointer">
													<div class="font-medium">Components</div>
													<div class="text-muted-foreground">Browse all components in the library.</div>
												</a>
												<a hlmNavigationMenuLink class="cursor-pointer">
													<div class="font-medium">Documentation</div>
													<div class="text-muted-foreground">Learn how to use the library.</div>
												</a>
												<a hlmNavigationMenuLink class="cursor-pointer">
													<div class="font-medium">Blog</div>
													<div class="text-muted-foreground">Read our latest blog posts.</div>
												</a>
											</li>
										</ul>
									</div>
								</li>

								<li hlmNavigationMenuItem class="w-full">
									<button hlmNavigationMenuTrigger class="w-full">
										Simple
										<ng-icon
											name="lucideChevronDown"
											class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
										/>
									</button>
									<div hlmNavigationMenuContent *brnNavigationMenuContent>
										<ul class="grid w-[200px] gap-4">
											<li>
												<a hlmNavigationMenuLink class="cursor-pointer">Components</a>
												<a hlmNavigationMenuLink class="cursor-pointer">Documentation</a>
												<a hlmNavigationMenuLink class="cursor-pointer">Blocks</a>
											</li>
										</ul>
									</div>
								</li>

								<li hlmNavigationMenuItem class="w-full">
									<button hlmNavigationMenuTrigger class="w-full">
										With Icon
										<ng-icon
											name="lucideChevronDown"
											class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
										/>
									</button>
									<div hlmNavigationMenuContent *brnNavigationMenuContent>
										<ul class="grid w-[200px] gap-4">
											<li>
												<a hlmNavigationMenuLink class="cursor-pointer flex-row items-center gap-2">
													<ng-icon name="lucideInfo" />
													Backlog
												</a>
												<a hlmNavigationMenuLink class="cursor-pointer flex-row items-center gap-2">
													<ng-icon name="lucideCircle" />
													To Do
												</a>
												<a hlmNavigationMenuLink class="cursor-pointer flex-row items-center gap-2">
													<ng-icon name="lucideCheck" />
													Done
												</a>
											</li>
										</ul>
									</div>
								</li>
							</ul>
						</nav>
					</div>
				</li>

				<li hlmNavigationMenuItem>
					<a hlmNavigationMenuLink href="/documentation/introduction">Docs</a>
				</li>
			</ul>
		</nav>
	`,
})
export class NavigationMenuNested {
	protected readonly _components = [
		{
			title: 'Alert Dialog',
			description: 'A modal dialog that interrupts the user with important content and expects a response.',
			href: '/components/alert-dialog',
		},
		{
			title: 'Hover Card',
			description: 'For sighted users to preview content available behind a link.',
			href: '/components/hover-card',
		},
		{
			title: 'Progress',
			description: 'Displays an indicator showing the completion progress of a task.',
			href: '/components/progress',
		},
		{
			title: 'Scroll Area',
			description: 'Visually or semantically separates content.',
			href: '/components/scroll-area',
		},
		{
			title: 'Tabs',
			description: 'A set of layered content panels displayed one at a time.',
			href: '/components/tabs',
		},
		{
			title: 'Tooltip',
			description: 'A popup that displays information on hover or focus.',
			href: '/components/tooltip',
		},
	];
}

Brain API

BrnNavigationMenuContent

Selector: [brnNavigationMenuContent]

BrnNavigationMenuItem

Selector: li[brnNavigationMenuItem]

Inputs

Prop	Type	Default	Description
id	string	`brn-navigation-menu-item-${++BrnNavigationMenuItem._id}`	The id of the navigation menu item

BrnNavigationMenuLink

Selector: a[brnNavigationMenuLink]

Inputs

Prop	Type	Default	Description
active	boolean \| undefined	undefined	Used to identify the link as the currently active page.

BrnNavigationMenuList

Selector: ul[brnNavigationMenuList]

BrnNavigationMenuTrigger

Selector: button[brnNavigationMenuTrigger]

BrnNavigationMenu

Selector: nav[brnNavigationMenu]

Inputs

Prop	Type	Default	Description
delayDuration	number	200	The duration from when the mouse enters a trigger until the content opens.
skipDelayDuration	number	300	How much time a user has to enter another trigger without incurring a delay again.
dir	'ltr' \| 'rtl'	-	The reading direction of the menu when applicable.
orientation	'horizontal' \| 'vertical'	horizontal	The orientation of the menu.
value	string	-	The controlled value of the menu item to activate.

Outputs

Prop	Type	Default	Description
valueChanged	string	-	The controlled value of the menu item to activate.

Helm API

HlmNavigationMenuContent

Selector: [hlmNavigationMenuContent]

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

HlmNavigationMenuItem

Selector: li[hlmNavigationMenuItem]

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

HlmNavigationMenuLink

Selector: a[hlmNavigationMenuLink]

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

HlmNavigationMenuList

Selector: ul[hlmNavigationMenuList]

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

HlmNavigationMenuTrigger

Selector: button[hlmNavigationMenuTrigger]

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

HlmNavigationMenu

Selector: nav[hlmNavigationMenu]

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

Pagination

Menubar

On This Page

Stop configuring. Start shipping.

Zerops powers spartan.ng and Angular teams worldwide.

One-command deployment. Zero infrastructure headaches.

Navigation Menu

Installation

Usage

Examples

Vertical

Controlled

Nested

Brain API

BrnNavigationMenuContent

BrnNavigationMenuItem

Inputs

BrnNavigationMenuLink

Inputs

BrnNavigationMenuList

BrnNavigationMenuTrigger

BrnNavigationMenu

Inputs

Outputs

Helm API

HlmNavigationMenuContent

Inputs

HlmNavigationMenuItem

Inputs

HlmNavigationMenuLink

Inputs

HlmNavigationMenuList

Inputs

HlmNavigationMenuTrigger

Inputs

HlmNavigationMenu

Inputs