dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
38 lines (37 loc) • 2.2 kB
TypeScript
import { EventName } from '@lit/react';
import { default as Component } from '../../components/navigation-menu/navigation-menu.js';
import { DdsNavigationItemClickEvent } from '../../events/events';
export type { DdsNavigationItemClickEvent } from '../../events/events';
/**
* `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
*/
declare const reactWrapper: import('@lit/react').ReactWebComponent<Component, {
onDdsNavigationItemClick: EventName<DdsNavigationItemClickEvent>;
}>;
export default reactWrapper;