Navigation-menu

Displays a hierarchical list of links with dropdown menus.

About NavigationMenu

A navigation menu component for displaying hierarchical links with dropdown menus. Supports viewport mode for mobile/desktop responsive behavior and submenus. Includes multiple sub-components for building complete navigation structures with triggers, content, and indicators.

Installation

Import the NavigationMenu component from LSD:

import { NavigationMenu } from '@nipsys/lsd'

export default function MyComponent() {
  return <NavigationMenu />
}

Usage

The simplest form of the component with default styling.

Basic

Features

Additional features and capabilities of the component.

Positioning Collapsible

Composition

NavigationMenu

├── NavigationMenuList

│ └── NavigationMenuItem

├── NavigationMenuTrigger

└── NavigationMenuContent

├── NavigationMenuLink

├── NavigationMenuIndicator

└── NavigationMenuViewport

API Reference

Accessibility

The component follows accessibility best practices for screen readers and keyboard navigation.

Keyboard Navigation

Keyboard shortcuts and navigation

• Tab - Navigate to navigation menu items• Left/Right Arrow - Move between menu items• Enter or Space - Open dropdown or activate link• Escape - Close dropdown• Up/Down Arrow - Navigate within dropdown content

ARIA Attributes

Proper ARIA attributes for screen readers

• role="navigation" identifies the component as navigation• aria-expanded indicates if dropdown is open (on trigger)• aria-controls links trigger to content• aria-current marks active link

Focus States

Visible focus indicators for keyboard users

• Focus moves to trigger when dropdown opens. Arrow keys navigate between items. Focus is managed within dropdown content and returns to trigger on close.

Dropdown-menu

Menubar