Navigation Menu

A collection of links for navigating websites.

Preview Code
Interactive

Features

  • Can be controlled or uncontrolled.
  • Flexible layout structure.
  • Supports submenus.
  • Optional active item indicator.
  • Full keyboard navigation.
  • Supports Right to Left direction.

Installation

Install the component from your command line.

Angular CLInpmpnpmyarnbun
Bash
ng g @ng-cn/core:c navigation-menu

Anatomy

Import all parts and piece them together.

Typescript
import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuContent,
  NavigationMenuLink,
  NavigationMenuIndicator,
  NavigationMenuViewport,
  navigationMenuTriggerStyle
} from '@/ui/navigation-menu';
Html
<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger />
      <NavigationMenuContent />
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink />
    </NavigationMenuItem>
  </NavigationMenuList>
  <NavigationMenuIndicator />
  <NavigationMenuViewport />
</NavigationMenu>

API Reference

Root

Contains all the parts of a navigation menu.

PropTypeDefault
value string —
The controlled value of the menu item to activate.
defaultValue string —
The value of the menu item to activate when initially rendered.
orientation 'horizontal' | 'vertical' 'horizontal'
The orientation of the menu.
delayDuration number 200
The duration from when the mouse enters a trigger until content opens.
skipDelayDuration number 300
Time to enter another trigger without incurring delay again.
class string —
Additional CSS classes to apply.

Data Attributes

AttributeValues
[data-orientation]"horizontal" | "vertical"

List

Contains the top level menu items.

PropTypeDefault
class string —
Additional CSS classes to apply.

Data Attributes

AttributeValues
[data-orientation]"horizontal" | "vertical"

Item

A top level menu item, contains a link or trigger with content combination.

PropTypeDefault
value string —
A unique value that associates this item with a content.

Trigger

The button that toggles the content.

PropTypeDefault
class string —
Additional CSS classes to apply.

Data Attributes

AttributeValues
[data-state]"open" | "closed"
[data-disabled]Present when disabled

Content

Contains the content associated with each trigger.

PropTypeDefault
forceMount boolean —
Used to force mounting when more control is needed.
class string —
Additional CSS classes to apply.

Data Attributes

AttributeValues
[data-state]"open" | "closed"
[data-motion]"from-start" | "from-end" | "to-start" | "to-end"

Link

A navigation link.

PropTypeDefault
active boolean false
When true, indicates the link is active.
class string —
Additional CSS classes to apply.

Data Attributes

AttributeValues
[data-active]Present when active

Indicator

An optional indicator element that highlights the current active item.

PropTypeDefault
forceMount boolean —
Used to force mounting when more control is needed.
class string —
Additional CSS classes to apply.

Data Attributes

AttributeValues
[data-state]"visible" | "hidden"
[data-orientation]"horizontal" | "vertical"

Viewport

An optional viewport element for positioning the content.

PropTypeDefault
forceMount boolean —
Used to force mounting when more control is needed.
class string —
Additional CSS classes to apply.

Data Attributes

AttributeValues
[data-state]"open" | "closed"
[data-orientation]"horizontal" | "vertical"

Examples

Basic

A navigation menu with dropdown content.

Html
<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
      <NavigationMenuContent>
        <ul class="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
          <li class="row-span-3">
            <NavigationMenuLink routerLink="/">
              <div class="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md">
                <div class="mb-2 mt-4 text-lg font-medium">
                  shadcn/ui
                </div>
                <p class="text-sm leading-tight text-muted-foreground">
                  Beautifully designed components built with Radix UI and Tailwind CSS.
                </p>
              </div>
            </NavigationMenuLink>
          </li>
          <li>
            <NavigationMenuLink routerLink="/docs">
              Introduction
            </NavigationMenuLink>
          </li>
          <li>
            <NavigationMenuLink routerLink="/docs/installation">
              Installation
            </NavigationMenuLink>
          </li>
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>

    <NavigationMenuItem>
      <NavigationMenuLink [class]="navigationMenuTriggerStyle()" routerLink="/about">
        About
      </NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

With components list

Display a grid of component links.

Html
<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Components</NavigationMenuTrigger>
      <NavigationMenuContent>
        <ul class="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
          @for (component of components; track component.title) {
            <li>
              <NavigationMenuLink [routerLink]="component.href">
                <div class="text-sm font-medium leading-none">
                  {{ component.title }}
                </div>
                <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
                  {{ component.description }}
                </p>
              </NavigationMenuLink>
            </li>
          }
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Simple links

Navigation menu with simple links (no dropdown).

Html
<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuLink [class]="navigationMenuTriggerStyle()" routerLink="/">
        Home
      </NavigationMenuLink>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink [class]="navigationMenuTriggerStyle()" routerLink="/about">
        About
      </NavigationMenuLink>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink [class]="navigationMenuTriggerStyle()" routerLink="/contact">
        Contact
      </NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

With indicator

Navigation menu with active indicator.

Html
<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Products</NavigationMenuTrigger>
      <NavigationMenuContent>
        <!-- Content -->
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
  <NavigationMenuIndicator />
</NavigationMenu>

Accessibility

Adheres to the Disclosure Navigation Menu WAI-ARIA design pattern .

Keyboard Interactions

KeyDescription
Space When focus is on trigger, opens/closes the content.
Enter When focus is on trigger, opens/closes the content. When on link, follows the link.
Tab Moves focus between trigger and content.
ArrowDown Opens the content (horizontal). Moves to next item (vertical).
ArrowUp Moves to previous item (vertical).
ArrowRight Moves to next trigger (horizontal). Opens submenu (vertical).
ArrowLeft Moves to previous trigger (horizontal). Closes submenu (vertical).
Home Moves focus to first item.
End Moves focus to last item.
Escape Closes the open content.