The navigation menu component provides a horizontal or vertical navigation system for web applications. It supports both simple navigation links and complex dropdown content areas, making it ideal for main navigation bars, and mega menu implementations.
✅ Use navigation menu components when:
- Creating main site navigation bars
- Implementing mega menus with rich content
- Organizing hierarchical navigation structures
❌ Don't use navigation menu components for:
- Simple action menus (use command components)
- Form selection dropdowns (use select or combobox)
- Contextual actions on content (use command components)
- Breadcrumb navigation (use breadcrumb component)
A simple horizontal navigation bar with active state management and clean styling.
Navigation items can contain rich dropdown content for complex menu structures.
Create complex mega menus with grid layouts and organized content sections.
Navigation items support custom trigger elements beyond standard buttons.
Implementation of a complete site navigation with branding and user actions.
The navigation menu component can be customized using CSS custom properties for layout spacing and popup appearance.
.custom-navigation {
/* Increase spacing between navigation items */
--dds-navigation-menu-item-gap: var(--dds-spacing-300);
}
.custom-navigation-item {
/* Customize dropdown appearance */
--dds-popup-background: var(--dds-background-neutral-subtle);
--dds-popup-border-radius: var(--dds-radius-large);
--dds-popup-border-color: red;
--dds-popup-border-width: 2px;
--dds-popup-padding: var(--dds-spacing-400);
}
.custom-navigation-item dap-ds-button[variant="subtle-menu"] {
/* Custom button styling for menu items */
--dds-button-padding-x: var(--dds-spacing-400);
--dds-button-padding-y: var(--dds-spacing-300);
--dds-button-border-radius: var(--dds-radius-large);
/* Hover and active states */
--dds-button-subtle-background-neutral-hover: var(--dds-indigo-600);
--dds-button-subtle-background-neutral-pressed: var(--dds-indigo-700);
--dds-button-subtle-text-neutral-hover: var(--dds-button-primary-text-enabled);
}
.custom-navigation-item dap-ds-button[variant="subtle-menu-item"] {
/* Custom styling for dropdown menu items */
--dds-button-subtle-menu-item-padding: var(--dds-spacing-300);
--dds-button-subtle-menu-item-border-radius: var(--dds-radius-base);
--dds-button-subtle-menu-item-color-bg-hover: var(--dds-indigo-600);
}
- Full keyboard navigation with Arrow keys, Tab, Enter, and Escape
- Screen reader support with proper ARIA roles and labels
- Focus management with automatic dropdown closure
- Active state announcements for current page/section
- Tab: Navigate between navigation items
- Arrow Down/Up: Open dropdown menus (when available)
- Enter/Space: Activate navigation links or toggle dropdowns
- Escape: Close open dropdown menus
- Arrow Left/Right: Navigate horizontally between items (horizontal orientation)
The component automatically provides:
role="navigation"for the main containerrole="none"for list item containersrole="menu"for dropdown content areasaria-expandedstates for dropdown triggersaria-controlslinking triggers to their dropdowns
The navigation menu component is built on top of the popup component, combining navigation semantics with positioning capabilities. It automatically manages active states, dropdown interactions, and keyboard navigation to provide a complete navigation solution for web applications.
import { DapDSNavigationMenu } from 'dap-design-system/dist/dds'
import { DapDSNavigationMenuReact } from 'dap-design-system/dist/react'
| Property | Type | Default | Description |
|---|---|---|---|
activeHref | string | The currently active href for highlighting active navigation items. | |
orientation | 'horizontal', 'vertical' | 'horizontal' | The orientation of the navigation menu. |
fullWidth | boolean | false | Whether the navigation menu should take full width of the screen. |
| Name | Description |
|---|---|
(default) | The navigation menu list and items. |
| Event Name | Description | Type |
|---|---|---|
dds-navigation-item-click | Fired when a navigation item is clicked. | {href: string, event: Event } |
| Part Name | Description |
|---|---|
base | The main navigation menu container. |
No CSS custom properties available.
| Property | Type | Default | Description |
|---|---|---|---|
icon | string | The name of the icon to display in the trigger. | |
ariaLabelledBy | string | The name of the element that labels the navigation dropdown. | |
activeHref | string | The href of the navigation item that is active. | |
baseHref | string | The href of the navigation item. If provided, the navigation item will be active if the href is a substring of the activeHref. It is useful for dropdowns that are not direct children of the navigation menu. | |
exactHref | boolean | false | Whether the navigation item should be active if the href is exactly the same as the activeHref. |
placement | 'top', 'right' , 'bottom' , 'left' , 'top-start' , 'top-end' , 'bottom-start' , 'bottom-end' , 'left-start' , 'left-end' , 'right-start' , 'right-end' | 'bottom-start' | The placement of the popup. |
overflow | boolean | true | Whether the popup should overflow. |
floatingStrategy | 'absolute', 'fixed' | 'fixed' | The floating strategy of the popup. |
size | 'xs', 'sm' , 'lg' | The size of the popup. | |
disabled | boolean | The disabled state of the popup. | |
opened | boolean | The open state of the popup. | |
offset | number | The offset of the popup. | |
sync | boolean | Whether the popup should sync its width with the trigger. | |
maxHeight | number, 'auto' | The maximum height of the popup. | |
maxWidth | number, 'auto' | The maximum width of the popup. | |
hasArrow | boolean | Whether the popup has an arrow. | |
fullWidth | boolean | Whether the popup should take full width of the screen. |
| Name | Description |
|---|---|
trigger | The trigger element (link, button, etc.) for this navigation item. |
title | The title of the navigation item. |
(default) | The dropdown content (only used if trigger slot is provided). |
| Event Name | Description | Type |
|---|---|---|
dds-navigation-item-click | Fired when a navigation item is clicked. | {href: string, event: Event } |
dds-navigation-dropdown-open | Fired when a navigation dropdown is opened. | {item: DapDSNavigationMenuItem } |
dds-opened | Fired when the popup is opened. | {void } |
dds-closed | Fired when the popup is closed. | {void } |
dds-close | Fired when the popup should be closed. | {void } |
| Part Name | Description |
|---|---|
base | The base part of the navigation item. |
trigger | The trigger element part. |
content | The dropdown content part. |
popup | The main popup container. |
arrow | The arrow of the popup. |
| Property Name | Description |
|---|---|
--dds-popup-z-index | Z-index of the popup. |
--dds-popup-padding | Default padding of the popup. |
--dds-popup-padding-xs | Padding of the popup when size is xs. |
--dds-popup-padding-lg | Padding of the popup when size is lg. |
--dds-popup-border-width | Border width of the popup. |
--dds-popup-border-radius | Border radius of the popup. |
--dds-popup-border-color | Border color of the popup. |
--dds-popup-background | Background color of the popup. |
--dds-popup-color | Text color of the popup. |
--dds-popup-arrow-size | Size of the popup arrow. |
