Navigation Menu Component – UI Components

Navigation Menu

A collection of links for navigating websites and apps, with support for rich content and dropdown-like submenus.

About

The Navigation Menu component provides a highly accessible way to build complex navigation structures. It's built with @angular/cdk/menu and styled using Tailwind CSS. It supports multiple orientations, nested menus, and programmatic control.

Installation

Run the following command to install the navigation-menu component:

Usage

navigation-menu-usage.ts

Default (Horizontal)

A standard horizontal navigation bar with dropdown submenus containing rich content.

Vertical

Orientation can be switched to vertical for sidebars or mobile menus.

Nested Menus

Navigation menus can be nested within each other to create complex hierarchies.

Programmatic Control

Manage the active state of the menu using signals or variables.

Current value: none

API Reference

Helm API

Directive	Selector	Description
HlmNavigationMenu	[hlmNavigationMenu]	Root container. Use `orientation` for layout.
HlmNavigationMenuList	[hlmNavigationMenuList]	The list container for menu items.
HlmNavigationMenuItem	[hlmNavigationMenuItem]	Individual item wrapper. Supports `value`.
HlmNavigationMenuTrigger	[hlmNavigationMenuTrigger]	Element that opens the submenu.
HlmNavigationMenuContent	hlm-navigation-menu-content	The container for submenu content.
HlmNavigationMenuLink	[hlmNavigationMenuLink]	Styled link within the menu.