dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
101 lines (100 loc) • 5.18 kB
TypeScript
import { TabNavigationMode } from '../../common/types';
import { DdsElement } from '../../internal/dds-hu-element';
import { default as DapDSNavigationMenuItem } from './navigation-menu-item.component';
/**
* `dap-ds-navigation-menu`
* @summary A navigation menu for website/application navigation. Supports nested dropdowns with unlimited depth.
* This is a NAVIGATION component, not an application menu (like dropdowns or context menus).
* Uses semantic HTML (`<nav>`) and proper navigation ARIA attributes.
*
* @element dap-ds-navigation-menu
* @title - Navigation Menu
*
* @property {string} activeHref - The currently active href for highlighting active navigation items with aria-current="page". Defaults to window.location.pathname if not provided.
* @property {'horizontal' | 'vertical'} orientation - The orientation of the navigation menu. Default is 'horizontal'.
* @property {boolean} fullWidth - Whether the navigation menu should take full width of the screen. Default is false.
* @property {boolean} allowMultipleOpen - Whether multiple dropdown branches can stay open simultaneously (accordion mode). Default is true.
* @property {'group' | 'items'} tabMode - Controls how Tab key navigates through top-level items. Default is 'group'. Group mode will have the first item in the tab order, and items mode will have all items in the tab order.
*
* @event {{ href: string, event: Event }} dds-navigation-item-click - Fired when a navigation item is clicked.
*
* @slot - The navigation menu list and items.
*
* @csspart base - The main navigation menu container (nav element).
*
* @cssproperty --dds-navigation-menu-item-gap - The gap between navigation menu items. (default: var(--dds-spacing-100)).
*
* @accessibility
* - Uses semantic `<nav>` element (no menu/menubar roles)
* - Active items marked with `aria-current="page"`
* - Keyboard navigation: Tab, Arrow keys, Enter, Escape
* - Screen readers announce as navigation landmark
*/
export default class DapDSNavigationMenu extends DdsElement {
static tagName: string;
static readonly styles: import('lit').CSSResult;
/** @ignore */
defaultSlot: HTMLSlotElement;
/** The currently active href for highlighting active navigation items. */
activeHref?: string;
/** The orientation of the navigation menu.
* @type {'horizontal' | 'vertical'}
*/
orientation: 'horizontal' | 'vertical';
/** Whether the navigation menu should take full width of the screen. */
fullWidth: boolean;
/** Whether multiple dropdown branches can stay open simultaneously (accordion mode). */
allowMultipleOpen: boolean;
/**
* Controls how Tab key navigates through top-level items.
* - 'group' (default): Roving tab index — only one item in the tab order, arrow keys move between items.
* - 'items': All top-level items have tabindex="0" — Tab moves through each item individually.
* @type {'group' | 'items'}
*/
tabMode: TabNavigationMode;
connectedCallback(): void;
updated(changedProperties: Map<string, unknown>): void;
firstUpdated(changedProperties: Map<string, unknown>): Promise<void>;
/** Handle keyboard navigation for top-level menubar items only */
private handleKeyDown;
private handleMouseDown;
private handleSlotChange;
private isMenuItem;
/** Gets all slotted menu items, ignoring disabled elements */
getAllItems(): DapDSNavigationMenuItem[];
/**
* Gets the current menu item (the one marked with `data-nav-current`).
* The menu item may or may not have focus, but for keyboard interaction purposes it's considered the "active" item.
*/
getCurrentItem(): DapDSNavigationMenuItem | undefined;
/**
* Sets the current menu item. In 'group' mode (default), applies roving tabindex so only the
* active item's trigger is in the sequential tab order (tabindex="0"). In 'items' mode, all
* top-level items remain in the tab order — only the data-nav-current marker is updated.
*/
setCurrentItem(item: DapDSNavigationMenuItem): void;
private _updateChildFullWidth;
/** Recursively update activeHref property for all navigation items. */
private _updateActiveHref;
/** Recursively update orientation property for all navigation items. */
private _updateOrientation;
/** Update tabMode property for all top-level navigation items. */
private _updateTabMode;
/**
* Applies tab behavior based on the current tabMode:
* - 'items': All top-level item triggers get tabindex="0".
* - 'group': Restore roving tabindex — only the current/first item gets tabindex="0".
*/
private _applyTabMode;
/** Helper method to recursively update properties on nested items. */
private _updatePropertyRecursive;
private _handleNavigationItemClick;
private _handleDropdownOpen;
private _handleSlotChange;
/**
* In `tabMode="items"`, keep `data-nav-current` in sync with the element that
* received focus so that arrow-key navigation always targets the right item.
*/
private _handleFocusIn;
render(): import('lit-html').TemplateResult;
}