{"_id":"@a11y-ngx/menu","name":"@a11y-ngx/menu","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@a11y-ngx/menu","version":"1.0.0","description":"An accessible Menu library for Angular with full keyboard navigation, correct ARIA semantics, screen-reader support and ready-to-use base styles.","keywords":["menu","submenu","keyboard","radio","checkbox","light","dark","directive","a11y","accessibility","accessible","angular"],"homepage":"https://github.com/LDV2k3/a11y-libraries/tree/master/projects/a11y-ngx/menu#readme","bugs":{"url":"https://github.com/LDV2k3/a11y-libraries/issues","email":"lucho.development@gmail.com"},"license":"MPL-2.0","author":{"name":"Luciano Del Vacchio","email":"lucho.development@gmail.com","url":"https://github.com/LDV2k3/"},"peerDependencies":{"@angular/common":">=12.2.0 <22.0.0","@angular/core":">=12.2.0 <22.0.0"},"peerDependenciesMeta":{},"dependencies":{"tslib":"^2.3.0","@a11y-ngx/overlay-base":"^1.2.2","@a11y-ngx/keyboard-navigation":"^1.0.1","@a11y-ngx/theme":"^1.0.4","@a11y-ngx/icon":"^1.0.1"},"main":"bundles/a11y-ngx-menu.umd.js","module":"fesm2015/a11y-ngx-menu.js","es2015":"fesm2015/a11y-ngx-menu.js","esm2015":"esm2015/a11y-ngx-menu.js","fesm2015":"fesm2015/a11y-ngx-menu.js","typings":"a11y-ngx-menu.d.ts","sideEffects":false,"gitHead":"9133c5bb623a56b4e6cd387d47831fe44f7c5046","_id":"@a11y-ngx/menu@1.0.0","_nodeVersion":"16.20.2","_npmVersion":"8.19.4","dist":{"integrity":"sha512-TXhGn7xV8gdQp+hPIaasn3MjX0iWm4VkmcXbtJPWjehs04b0ffcUrHqKl77PyXCUXXIeRu63cEcG1mj1l9OHQQ==","shasum":"165fed9cf6868e6d38e5ae5d6e7d94f4cb2b06e2","tarball":"https://registry.npmjs.org/@a11y-ngx/menu/-/menu-1.0.0.tgz","fileCount":89,"unpackedSize":2068213,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIH0XYh0GKKd/PXLDjta4hlg8OHS0nZwgT2+WCfNf2rkvAiEAyGpboOifCxrcM7070m2qC5Zpkyy4+xuyD1Vd5z73q2E="}]},"_npmUser":{"name":"ldv","email":"lucho.development@gmail.com"},"directories":{},"maintainers":[{"name":"ldv","email":"lucho.development@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/menu_1.0.0_1785163543529_0.067680881953611"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-27T14:45:43.406Z","1.0.0":"2026-07-27T14:45:43.733Z","modified":"2026-07-27T14:45:43.947Z"},"maintainers":[{"name":"ldv","email":"lucho.development@gmail.com"}],"description":"An accessible Menu library for Angular with full keyboard navigation, correct ARIA semantics, screen-reader support and ready-to-use base styles.","homepage":"https://github.com/LDV2k3/a11y-libraries/tree/master/projects/a11y-ngx/menu#readme","keywords":["menu","submenu","keyboard","radio","checkbox","light","dark","directive","a11y","accessibility","accessible","angular"],"author":{"name":"Luciano Del Vacchio","email":"lucho.development@gmail.com","url":"https://github.com/LDV2k3/"},"bugs":{"url":"https://github.com/LDV2k3/a11y-libraries/issues","email":"lucho.development@gmail.com"},"license":"MPL-2.0","readme":"# Menu\n\nAn accessible Menu library for Angular with full keyboard navigation, correct ARIA semantics, screen-reader support and ready-to-use base styles.\n\nIt's built with WCAG 2.1/2.2 AA compliance in mind:\n\n✔️ WAI-ARIA Authoring Practices compliant<br />\n✔️ Full keyboard navigation (Arrows, Home/End, Enter, Space, Escape), mouse and touch interaction<br />\n✔️ Full screen reader support<br />\n✔️ Proper ARIA roles and states<br />\n✔️ Correct focus management<br />\n✔️ Normal actions, groups of radios or checkboxes, submenus and info items<br />\n✔️ Color contrast ratio of at least 4.5:1 for the basic themes availables (`'light'` and `'dark'`)<br />\n\n> ⚠️ This library implements an **Application Menu** (designed for executing actions, toggling states, and triggering commands). It behaves like a desktop software menu.\n>\n> 🛑 It is **not** a navigation menu. If your goal is simply to route users across different pages of your website, use a semantic HTML `<nav>` with standard links instead.\n\n![Angular support from version 12 up to version 21](https://img.shields.io/badge/Angular-v12_to_v21-darkgreen?logo=angular)\n\nThis library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.2.0 to ensure compatibility with a wide range of Angular versions. It has been tested up to v21.\n\n## Changelog\n\nSee the complete [changelog](https://github.com/LDV2k3/a11y-libraries/blob/master/projects/a11y-ngx/menu/CHANGELOG.md) for details on updates and breaking changes.\n\n## Index\n\n- [Installation](#installation)\n- [What do you Want to Build?](#what-do-you-want-to-build)\n  - [I Just Want to Use the Menu](#-i-just-want-to-use-the-menu)\n  - [I Want to Build my own Custom Wrapper using the Menu Engine](#️-i-want-to-build-my-own-custom-wrapper-using-the-menu-engine)\n- [Basic Usage: Using the Menu](#basic-usage-using-the-menu)\n  - [Global Configuration](#global-configuration)\n    - [The General Config](#the-general-config)\n      - [The Menu Label](#the-menu-label)\n      - [Show Group Labels](#show-group-labels)\n      - [The Class Names](#the-class-names)\n      - [Allow Navigate Disabled Items](#allow-navigate-disabled-items)\n      - [The Throttle](#the-throttle)\n      - [The Animation](#the-animation)\n        - [The Animation Timeout](#the-animation-timeout)\n      - [The Icon Default Strategy](#the-icon-default-strategy)\n      - [The Icon Default Loader](#the-icon-default-loader)\n    - [The Positioning & Layout Config](#the-positioning--layout-config)\n      - [The Position](#the-position)\n      - [Align Menu Items With Trigger](#align-menu-items-with-trigger)\n      - [The Menu Offset](#the-menu-offset)\n      - [The Submenu Offset](#the-submenu-offset)\n      - [The Mobile Labels](#the-mobile-labels)\n      - [The Custom Boundary](#the-custom-boundary)\n      - [The Safe Space](#the-safe-space)\n      - [The Max Width](#the-max-width)\n      - [The Max Height](#the-max-height)\n    - [The Theme Config](#the-theme-config)\n      - [Ecosystem Global](#ecosystem-global-recommended)\n      - [Menu Global](#menu-global)\n      - [Instance Level](#instance-level)\n    - [Styling Your Menu](#styling-your-menu)\n  - [The Menu Items Array](#the-menu-items-array)\n    - [The Items Types](#the-items-types)\n      - [The Items Common Properties](#the-items-common-properties)\n        - [The `label` Property](#the-label-property)\n        - [The `value` Property](#the-value-property)\n        - [The `icon` Property](#the-icon-property)\n        - [The `disabled` Property](#the-disabled-property)\n        - [The `className` Property](#the-classname-property)\n        - [The `shortcut` Property](#the-shortcut-property)\n        - [The `info` Property](#the-info-property)\n        - [The `action` Property](#the-action-property)\n        - [The `beforeChange` Property](#the-beforechange-property)\n        - [The `checked` Property](#the-checked-property)\n        - [The `submenu` Property](#the-submenu-property)\n        - [The `separator` Property](#the-separator-property)\n        - [The `closeOnSelect` Property](#the-closeonselect-property)\n      - [The `MenuItemAction` Type](#the-menuitemaction-type)\n      - [The `MenuItemSubmenu` Type](#the-menuitemsubmenu-type)\n      - [The `MenuItemInfo` Type](#the-menuiteminfo-type)\n      - [The `MenuItemSeparator` Type](#the-menuitemseparator-type)\n      - [The `MenuItemSelectable` Type](#the-menuitemselectable-type)\n      - [The `MenuGroup` Type](#the-menugroup-type)\n        - [The Group Label](#the-group-label)\n        - [The Group Type](#the-group-type)\n        - [The Group Layout](#the-group-layout)\n        - [The Group Icon](#the-group-icon)\n        - [The Group Items](#the-group-items)\n        - [The Group Item Layout](#the-group-item-layout)\n        - [The Group Busy Scope](#the-group-busy-scope)\n        - [The Items Label Position](#the-items-label-position)\n        - [The Items Label Wrap](#the-items-label-wrap)\n        - [The Items Justify](#the-items-justify)\n        - [The Grid Columns](#the-grid-columns)\n        - [The Items Flow](#the-items-flow)\n  - [The Directive](#the-directive)\n    - [The Directive Inputs](#the-directive-inputs)\n      - [The `a11yMenu` Input](#the-a11ymenu-input)\n      - [The `a11yMenuConfig` Input](#the-a11ymenuconfig-input)\n      - [The `a11yIconTemplate` Input](#the-a11yicontemplate-input)\n    - [The Directive Outputs](#the-directive-outputs)\n      - [The `itemSelected` Output](#the-itemselected-output)\n      - [The `menuOpened` Output](#the-menuopened-output)\n      - [The `menuClosed` Output](#the-menuclosed-output)\n  - [The Programmatic API](#the-programmatic-api)\n    - [The Menu Context](#the-menu-context)\n    - [The Item Context](#the-item-context)\n- [Advanced Usage: Building a Custom Menu Wrapper](#advanced-usage-building-a-custom-menu-wrapper)\n  - [Feature Configuration](#feature-configuration)\n  - [The `MenuCustomConfig` Object](#the-menucustomconfig-object)\n    - [The Selector](#the-selector)\n    - [Close On Click Outside](#close-on-click-outside)\n    - [Close On Tab](#close-on-tab)\n    - [The Positions Allowed](#the-positions-allowed)\n    - [Focus Item When Open](#focus-item-when-open)\n  - [The Core Services](#the-core-services)\n  - [Feature Example: Building a Context Menu](#feature-example-building-a-context-menu)\n- [Mobile Experience](#mobile-experience)\n- [Menu DOM Structure](#menu-dom-structure)\n- [Examples](#examples)\n  - [Basic Menu](#basic-menu)\n  - [The Submenu](#the-submenu)\n  - [Default Icons Setup](#default-icons-setup)\n    - [With Images](#icons-setup-with-images)\n    - [Via Content Projection](#icons-setup-via-content-projection)\n    - [Via Component Inputs](#icons-setup-via-component-inputs)\n    - [Via Local Template](#icons-setup-via-local-template)\n  - [The Zoom Info Item](#the-zoom-info-item)\n  - [Selectable Groups](#selectable-groups)\n    - [Custom Color Picker](#custom-color-picker)\n  - [The Busy State: Async Actions](#the-busy-state-async-actions)\n    - [Default Animation & Dynamic Updates](#default-animation--dynamic-updates)\n    - [Adding a Custom Loading Spinner](#adding-a-custom-loading-spinner)\n    - [The Busy State In Selectable Groups](#the-busy-state-in-selectable-groups)\n\n## Installation\n\n1. Install npm package:\n\n   `npm install @a11y-ngx/menu`\n\n2. Import `A11yMenuModule` into your module or standalone component:\n\n   ```typescript\n   import { A11yMenuModule } from '@a11y-ngx/menu';\n   \n   @NgModule({\n       declarations: [...],\n       imports: [\n           ...\n           A11yMenuModule,\n       ],\n   })\n   export class AppModule { }\n   ```\n\n## What do you Want to Build?\n\nDepending on your goal, you only need to focus on specific parts of this documentation. Choose your path:\n\n### 🚀 I Just Want to Use the Menu\n\nYou just want a ready-to-use, accessible dropdown menu in your application.\n\nGo to [Basic Usage: Using the Menu](#basic-usage-using-the-menu).\n\n### 🛠️ I Want to Build my own Custom Wrapper using the Menu Engine\n\nYou are building a `MenuBar`, a `ContextMenu`, or any other complex UI wrapper and need isolated configurations.\n\nGo to [Advanced Usage: Building a Custom Menu Wrapper](#advanced-usage-building-a-custom-menu-wrapper).\n\n## Basic Usage: Using the Menu\n\nTo use the menu, you only need three things:\n\n1. [Set up your global config](#global-configuration)\n2. [Create your menu items array](#the-menu-items-array)\n3. [Apply the `a11yMenu` directive to your trigger](#the-directive)\n\n> ✨ [Check the examples](#examples)\n\n### Global Configuration\n\nUse the module's `rootConfig()` method or `provideA11yMenu()` to establish and override the global default configuration.\n\n> ⚠️ **IMPORTANT: ❗❗ DO NOT use it on a library or a low level component within your app**, since this method is meant to be called **only once** at a root level on the **main app**.\n>\n> On a library or sub-module, check [How to Build a Custom Menu Wrapper section](#advanced-usage-building-a-custom-menu-wrapper).\n\n**On Angular v12 - v14:**\n\n```typescript\nimport { A11yMenuModule } from '@a11y-ngx/menu';\n\n@NgModule({\n    imports: [\n        A11yMenuModule.rootConfig({\n            maxWidth: '300px',\n            offsetMenu: 5,\n        }),\n    ],\n})\nexport class AppModule {}\n```\n\n**On Angular v15+:**\n\n```typescript\nimport { provideA11yMenu } from '@a11y-ngx/menu';\n\nexport const appConfig: ApplicationConfig = {\n    providers: [\n        provideA11yMenu({\n            maxWidth: '300px',\n            offsetMenu: 5,\n        }),\n    ],\n};\n```\n\nAccepts a single parameter `config` of type `MenuConfig`, which is composed of three main configuration groups:\n\n- [The General Config](#the-general-config)\n- [The Positioning & Layout Config](#the-positioning--layout-config)\n- [The Theme Config](#the-theme-config)\n\n#### The General Config\n\nDefines the fundamental setup of the menu, including essential accessibility label, how the menu reacts to user interactions and default global strategy for icons.\n\n| Property | Type | Default | Description |\n| :------- | :--- | :-----: | :---------- |\n| `menuLabel` | `string` | `undefined` | See [the Menu Label](#the-menu-label) |\n| `showGroupLabels` | `boolean` | `true` | See [Show Group Labels](#show-group-labels) |\n| `className` | `string` or `string[]` | `undefined` | See [the Class Names](#the-class-names) |\n| `allowNavigateDisabled` | `boolean` | `true` | See [Allow Navigate Disabled Items](#allow-navigate-disabled-items) |\n| `throttleMs` | `number` | `50` | See [the Throttle](#the-throttle) |\n| `animate` | `MenuAnimate` | `'none'` | See [the Animation](#the-animation) |\n| `animateMs` | `number` | `150` | See [the Animation Timeout](#the-animation-timeout) |\n| `iconDefaultStrategy` | `IconDefaultComponent` or `'image'` | `undefined` | See [the Icon Default Strategy](#the-icon-default-strategy) |\n| `iconDefaultLoader` | `MenuItemIcon` | `undefined` | See [the Icon Default Loader](#the-icon-default-loader) |\n| `closeOnScrollOutside` | `boolean` | `true` | See [Close On Scroll Outside](#close-on-scroll-outside) |\n| `closeOnWindowBlur` | `boolean` | `true` | See [Close On Window Blur](#close-on-window-blur) |\n\n##### The Menu Label\n\nEstablishes the _root_ menu instance label.\n\n> 💡 This value is not visible, it will serve the purpose and help only to screen reader users to have more context on what the menu is about.\n\n- **Property:** `menuLabel`\n- **Type:** `string`\n\n##### Show Group Labels\n\nGroup labels are important to provide extra context on what the group is about.\n\nWhen a group of stacked items is created and a label is assigned to it, that label will be visible above the items. This provides visual structure for sighted users, as well as spoken context for assistive technologies.\n\n> Sometimes, a group of items is _visually_ self-explanatory thanks to its icons or proximity (e.g., **Bold**, **Italic**, and **Underline**).\n>\n> However, explicitly naming the group ensures that screen reader users don't just hear a _disconnected_ list of items. They will hear the exact same context that sighted users get from the layout.\n>\n> 💡 If your design requires not having a visible group label, strongly consider providing one anyway and use this property to visually hide it. This keeps it fully available for screen readers.\n\n- **Property:** `showGroupLabels`\n- **Type:** `boolean`\n- **Default:** `true`\n\n##### The Class Names\n\nIt defines custom class names for your element.\n\n> **NOTE:** It can be applied to the menu, groups and menu items.\n>\n> 💡 Use it to apply specific styles or to override the [default design tokens](#styling-your-menu).\n\n- **Property:** `className`\n- **Type:** `string` or `string[]`\n\n##### Allow Navigate Disabled Items\n\nAllows navigate through disabled items.\n\n> 💡 **NOTE:** By default, disabled items are part of the navigation, it doesn't mean they can be activated.\n\n- **Property:** `allowNavigateDisabled`\n- **Type:** `boolean`\n- **Default:** `true`\n\n##### The Throttle\n\nThrottle to prevent rapid key-repeat events when the user holds a key.\n\n- **Property:** `throttleMs`\n- **Type:** `number`\n- **Default:** `50`\n- **Translated to:** _milliseconds_\n\n##### The Animation\n\nThe animation for when the menu opens and closes (includes opacity by default).\n\n- **Property:** `animate`\n- **Type:** `MenuAnimate`\n- **Default:** `'none'`\n\n> 💡 You can establish a single option or an object specifying both (entry & exit) animations differently.\n>\n> When a single option is provided, it defines both, the 'entry' and 'exit' animations, with the same transition.\n>\n> **The options:**\n>\n> - `'top-bottom'` 👉 slides from top to bottom\n> - `'bottom-top'` 👉 slides from bottom to top\n> - `'left-right'` 👉 slides from left to right\n> - `'right-left'` 👉 slides from right to left\n> - `'scale-up'` 👉 scales from _small_ (0.9 ratio) to normal size\n> - `'scale-down'` 👉 scales from _big_ (1.1 ratio) to normal size\n> - `'none'`\n>\n> **Example:**\n>\n> ```typescript\n> // When single option provided:\n> animate: 'top-bottom' 👈 // will be the same for the entry and exit animations\n> \n> // When object provided:\n> animate: { in: 'top-bottom', out: 'scale-down' }\n> ```\n\n###### The Animation Timeout\n\nThe time for the animation to complete.\n\n- **Property:** `animateMs`\n- **Type:** `number`\n- **Default:** `150`\n- **Translated to:** _milliseconds_\n\n##### The Icon Default Strategy\n\nWhen it comes to icons, you might use standard images (local or external), a third-party library (like Material Icons) or your own custom component to render them.\n\nIn this property, you can define your preferred strategy: configure an image-based approach or provide _that_ component and its main entry method (_input_ or _content_).\n\n- **Property:** `iconDefaultStrategy`\n- **Type:**\n  1. `'image'`: Defines that every icon will be rendered as an `<img>` tag.\n  2. `IconDefaultComponent`: Defines that every icon will be rendered through _this_ component.\n\n     | Property | Type | Description |\n     | :------- | :--- | :---------- |\n     | `component` | `Type<unknown>` | The main component to render the icons |\n     | `mainEntry` | `'input'` or `'content'` | Defines whether the component uses an input or content projection for rendering |\n     | `inputName` | `string` | To specify the input name when `mainEntry: 'input'` |\n     | `inputs` | `Record<string, unknown>` | To provide any other inputs your component might need |\n\n- **Examples:**\n  - [Configure Images](#icons-setup-with-images)\n  - Configure Components:\n    - [Material Icons Component](#icons-setup-via-content-projection)\n    - [Custom Icon Component](#icons-setup-via-component-inputs)\n\n##### The Icon Default Loader\n\nDefines a custom _loading_ icon.\n\n> 💡 Whenever an item enters into a `busy` state (via the item's [`action`](#the-action-property) or [`beforeChange`](#the-beforechange-property) properties), the item's icon can automatically update to a specific loading icon using this property.\n\n- **Property:** `iconDefaultLoader`\n- **Type:** [`MenuItemIcon`](#the-icon-property)\n- **Example:** [Adding a Custom Loading Spinner](#adding-a-custom-loading-spinner)\n\n##### Close On Scroll Outside\n\nDetermines whether the menu should automatically close when the user scrolls outside of the menu container.\n\n- **Property:** `closeOnScrollOutside`\n- **Type:** `boolean`\n- **Default:** `true`\n\n##### Close On Window Blur\n\nDetermines whether the menu should close when the browser window loses focus (e.g., switching to another tab, clicking outside the browser or changing apps).\n\n- **Property:** `closeOnWindowBlur`\n- **Type:** `boolean`\n- **Default:** `true`\n\n#### The Positioning & Layout Config\n\nManages the spatial placement of the menu relative to its trigger and the viewport. It handles alignment logic, boundaries, offsets, and collision detection.\n\n> **NOTE:** Some of the next properties comes from the [Overlay Base Library](https://www.npmjs.com/package/@a11y-ngx/overlay-base), who will handle the entire positioning for the menu.\n\n| Property | Type | Default | Description |\n| :------- | :--- | :------ | :---------- |\n| `position` | `MenuPosition` | `'bottom-start'` | See [the Position](#the-position) |\n| `alignMenuItemsWithTrigger` | `boolean` | `false` | See [Align Menu Items With Trigger](#align-menu-items-with-trigger) |\n| `offsetMenu` | `number` | `2` | See [the Menu Offset](#the-menu-offset) |\n| `offsetSubmenu` | `number` | `4` | See [the Submenu Offset](#the-submenu-offset) |\n| `mobileLabels` | `MenuMobileLabels` | | See [the Mobile Labels](#the-mobile-labels) |\n| `boundary` | `string` or `HTMLElement` | `<body>` | See [the Custom Boundary](#the-custom-boundary) |\n| `safeSpace` | `OverlaySafeSpace` | `undefined` | See [the Safe Space](#the-safe-space) |\n| `maxWidth` | `string` | `'auto'` | See [the Max Width](#the-max-width) |\n| `maxHeight` | `string` | `'auto'` | See [the Max Height](#the-max-height) |\n\n##### The Position\n\nEstablishes the position or position & alignment (hyphen separated) to open the menu.\n\n- **Property:** `position`\n- **Type:** `MenuPosition`\n- **Default:** `'bottom-start'`\n\n> 💡 For more information, please refer to the next links within the Overlay Base Library documentation:\n>\n> - [The Position Input](https://www.npmjs.com/package/@a11y-ngx/overlay-base#the-position-input)\n>   - [The Overlay Position](https://www.npmjs.com/package/@a11y-ngx/overlay-base#the-overlay-position)\n>   - [The Overlay Alignment](https://www.npmjs.com/package/@a11y-ngx/overlay-base#the-overlay-alignment)\n\n##### Align Menu Items With Trigger\n\nAligns the menu _items_ (if `true`) or the menu's _side_ (if `false`) with the trigger.\n\n> 💡 **NOTE:** Applies only for the root instance of the menu, not the submenus.\n\n- **Property:** `alignMenuItemsWithTrigger`\n- **Type:** `boolean`\n- **Default:** `false`\n\n![\"\"](https://raw.githubusercontent.com/LDV2k3/a11y-libraries/refs/heads/master/projects/a11y-ngx/menu/src/lib/images/example-root-align-items-with-trigger.jpg)\n\n##### The Menu Offset\n\nThe space between the main trigger and the menu.\n\n- **Property:** `offsetMenu`\n- **Type:** `number`\n- **Default:** `2`\n- **Accepts:** positives and negatives\n- **Translated to:** _pixels_\n\n##### The Submenu Offset\n\nThe space between menu item and its submenu.\n\n- **Property:** `offsetSubmenu`\n- **Type:** `number`\n- **Default:** `4`\n- **Accepts:** positives and negatives\n- **Translated to:** _pixels_\n\n##### The Mobile Labels\n\nDefines the text used for mobile navigation elements, such as the back button inside submenus and the main close button. These labels are essential for screen readers and mobile UX.\n\n- **Property:** `mobileLabels`\n- **Type:** `MenuMobileLabels`\n- **Default:**\n\n  ```typescript\n  {\n      back: 'Go back to previous menu',\n      close: 'Close menu',\n  }\n  ```\n\n> 💡 Check the [Mobile Experience section](#mobile-experience) to see and understand how the drawer works.\n\n##### The Custom Boundary\n\nA custom boundary can be interpreted as a wrapper/container. The menu will consider that boundary as the new limits for its positioning.\n\n> **NOTE:** You can establish a string with the element's selector or an HTML element.\n\n- **Property:** `boundary`\n- **Type:** `string` or `HTMLElement`\n- **Default:** `<body>`\n\n> 💡 Please refer to the [\"Custom Boundary\" section in the Overlay Base Library](https://www.npmjs.com/package/@a11y-ngx/overlay-base#the-custom-boundary) for more details.\n\n##### The Safe Space\n\nTo establish an extra safe space to the viewport's edges in case some fixed areas are present, such as headers, side menus or footers and you don't want the menu to overlap them.\n\nThis way, the menu will consider this area as the edge limit and reposition itself if reached.\n\n- **Property:** `safeSpace`\n- **Type:** `OverlaySafeSpace`\n  - `object` with each side as a property of type `number`\n- **Default:** `{ top: 0, bottom: 0, left: 0, right: 0 }`\n\n> 💡 Please refer to the [\"Safe Space\" section in the Overlay Base Library](https://www.npmjs.com/package/@a11y-ngx/overlay-base#the-safe-space) for more details.\n\n##### The Max Width\n\nDefines the maximum width allowed for the menu.\n\n- **Property:** `maxWidth`\n- **Type:** `string`\n- **Default:** `'auto'`\n\n##### The Max Height\n\nDefines the maximum height allowed for the menu.\n\n- **Property:** `maxHeight`\n- **Type:** `string`\n- **Default:** `'auto'`\n\n#### The Theme Config\n\nHandles the theming behavior. If not provided, it defaults to the system's active color scheme.\n\nYou can configure the theme at three different levels:\n\n- [Ecosystem Global (Recommended)](#ecosystem-global-recommended)\n- [Menu Global](#menu-global)\n- [Instance Level](#instance-level)\n\n> 💡 **NOTE:** The configuration follows a strict priority cascade: **Instance** ➔ **Menu Global** ➔ **Ecosystem Global**.\n\n**The Menu in Light mode:**\n\n![\"\"](https://raw.githubusercontent.com/LDV2k3/a11y-libraries/refs/heads/master/projects/a11y-ngx/menu/src/lib/images/example-theme-light.jpg)\n\n**The Menu in Dark mode:**\n\n![\"\"](https://raw.githubusercontent.com/LDV2k3/a11y-libraries/refs/heads/master/projects/a11y-ngx/menu/src/lib/images/example-theme-dark.jpg)\n\n##### Ecosystem Global (Recommended)\n\nIf you are using multiple `@a11y-ngx` libraries, you can set the theme once for the entire ecosystem using either the module or the provider. This prevents you from having to configure the theme individually for each library you install.\n\n**On Angular v12 - v14:**\n\n```typescript\nimport { A11yThemeModule } from '@a11y-ngx/theme';\n\n@NgModule({\n    imports: [\n        A11yThemeModule.rootConfig('dark'),\n    ],\n})\nexport class AppModule {}\n```\n\n**On Angular v15+:**\n\n```typescript\nimport { provideA11yTheme } from '@a11y-ngx/theme';\n\nexport const appConfig: ApplicationConfig = {\n    providers: [\n        provideA11yTheme('dark'),\n    ],\n};\n```\n\n##### Menu Global\n\nYou can configure the theme globally strictly for the Menu library. This will apply the theme to all menu instances in your app, overriding the Ecosystem configuration (if provided), without affecting other `@a11y-ngx` libraries.\n\n- **Property:** `theme`\n- **Type:** `'light'` or `'dark'`\n\n> Provide it within [the configuration in `rootConfig()`](#global-configuration).\n\n##### Instance Level\n\nYou can set the theme for a specific menu instance. This has the highest priority and will override any global configuration for that single menu. Useful for isolated cases.\n\n- **Property:** `theme`\n- **Type:** `'light'` or `'dark'`\n\n> Provide it within [the configuration in the `a11yMenuConfig` input](#the-a11ymenuconfig-input).\n\n#### Styling Your Menu\n\nThe library uses CSS Variables. This provides a cleaner, CSS-native way to customize colors, sizes, etc.\n\n> 💡 **Need more specificity?** While CSS variables cover most use cases, if they aren't enough and you need to override internal elements, check the [Menu's DOM Structure](#menu-dom-structure) section to see exactly which attribute selectors you must use.\n\n**Layout & Structure:**\n\n| Variable | Default |\n| :------- | :-----: |\n| `--menu-zindex` | `9999` |\n| `--menu-icon-size` | `20px` |\n| `--menu-line-height` | `1.4` |\n| `--menu-border-size` | `1px` |\n| `--menu-border-radius` | `7px` |\n| `--menu-padding` | `0.3rem` |\n| `--menu-shadow` | `5px 5px 10px -5px` |\n| `--menu-item-gap-size` | `15px` |\n| `--menu-item-font-size` | `16px` |\n| `--menu-item-border-radius` | `4px` |\n| `--menu-item-padding-block` | `0.35rem` |\n| `--menu-item-padding-inline` | `1rem` |\n| `--menu-item-focus-size` | `2px` |\n| `--menu-separator-border-size` | `1px` |\n| `--menu-separator-block` | `0.25rem` |\n| `--menu-separator-inline` | `0` |\n| `--menu-tooltip-border-size` | `1px` |\n| `--menu-panel-border-size` | `1px` |\n\n**Colors:**\n\n> 💡 **NOTE:** Most of the values shown below are fallbacks. The menu will automatically inherit the corresponding tokens from the [A11y Theme library](https://www.npmjs.com/package/@a11y-ngx/theme).\n\n| Variable | Light | Dark |\n| :------- | :---: | :--: |\n| `--menu-bg-color` | `rgb(255 255 255 / 98%)` | `rgb(31 31 31 / 98%)` |\n| `--menu-border-color` | `#656565` | `#666` |\n| `--menu-shadow-color` | `#444` | `#444` |\n| `--menu-item-bg-color` | `transparent` | `transparent` |\n| `--menu-item-text-color` | `#222` | `#fff` |\n| `--menu-item-hover-bg-color` | `#ddd` | `#393939` |\n| `--menu-item-hover-text-color` | `#222` | `#fff` |\n| `--menu-item-disabled-bg-color` | `transparent` | `transparent` |\n| `--menu-item-disabled-text-color` | `#949494` | `#7a7a7a` |\n| `--menu-item-disabled-hover-bg-color` | `#ddd` | `#393939` |\n| `--menu-item-focus-color` | `#7d7d7d` | `#828282` |\n| `--menu-shortcut-text-color` | `#5f5f5f` | `#bcbcbc` |\n| `--menu-separator-border-color` | `#656565` | `#666` |\n| `--menu-tooltip-bg-color` | `#ddd` | `#393939` |\n| `--menu-tooltip-text-color` | `#222` | `#fff` |\n| `--menu-tooltip-border-color` | `#7d7d7d` | `#828282` |\n| `--menu-panel-bg-color` | `#e5e5e5` | `#333333` |\n| `--menu-panel-text-color` | `currentColor` | `currentColor` |\n| `--menu-panel-border-color` | `#9d9d9d` | `#6a6a6a` |\n\nFor testing purposes, we've added `'red-velvet'` as a class name for a single menu instance.\n\n**Our CSS:**\n\n```css\na11y-menu.red-velvet {\n    --menu-bg-color: #590811;\n    --menu-item-text-color: #ffeeee;\n    --menu-item-hover-bg-color: #8d3939;\n    --menu-shortcut-text-color: #efbbc1;\n    --menu-border-color: #c99999;\n    --menu-shadow-color: #995555;\n    --menu-item-focus-color: #a4a4a4;\n}\n```\n\n**Result:**\n\n![\"\"](https://raw.githubusercontent.com/LDV2k3/a11y-libraries/refs/heads/master/projects/a11y-ngx/menu/src/lib/images/example-css-variables.jpg)\n\n### The Menu Items Array\n\nThe menu accepts an array of type `Menu`, which can contain two main categories of elements: **Loose Items** and **Groups**. Understanding when to use each is key for good UX and Accessibility.\n\n1. **Loose Items** (Standalone)<br>\n    These are individual items rendered directly in the main list. They are standard options that do not share a specific semantic context with their neighbors.\n    - **Accessibility Impact:** Screen readers will simply announce them one by one as regular menu items.\n    - **When to use:** For general, unrelated actions (e.g., \"Save\", \"Print\", or open a submenu).\n    - **Available types:** `Action`, `Submenu`, `Info`, `Separator`.\n\n2. **Group of Items** (Contextual)<br>\n   Groups are dedicated containers used to bundle closely related options together. Using a group instead of multiple loose items provides three massive benefits:\n   - **Strict Cohesion:** A group strictly contains items of the _same type_:\n     - A group of `Radio` items to select a theme.\n     - A group of `Checkbox` items for text formatting.\n     - A group of `Action` items, like \"Cut\", \"Copy\" and \"Paste\".\n   - **Accessibility Context:** The library automatically wraps the collection in a `role=\"group\"` container. This allows screen readers to announce the group's context before reading the items, giving blind users the exact same understanding that sighted users get from the visual layout.\n   - **Smart UI (Auto-separators):** You don't need to manually push `Separator` items into your array. The menu engine automatically injects them before and after the group to neatly isolate it from the rest of the loose items and other groups.\n   - **Available types:** `Action Group`, `Radio Group`, `Checkbox Group`.\n\n#### The Items Types\n\n- [`MenuItemAction`](#the-menuitemaction-type)\n- [`MenuItemSubmenu`](#the-menuitemsubmenu-type)\n- [`MenuItemInfo`](#the-menuiteminfo-type)\n- [`MenuItemSeparator`](#the-menuitemseparator-type)\n- [`MenuGroup`](#the-menugroup-type)\n  - [`MenuItemSelectable`](#the-menuitemselectable-type)\n\n##### The Items Common Properties\n\n✅ Full support | ☑️ Partial support (depends on config)\n\n| Property | `Action` | `Selectable` | `Submenu` | `Info` | `Separator` | `Groups` |\n| :------- | :------: | :----------: | :-------: | :----: | :---------: | :------: |\n| [`label`](#the-label-property) | ✅ | ✅ | ✅ | - | - | ✅ |\n| [`value`](#the-value-property) | ✅ | ✅ | ✅ | ✅ | - | - |\n| [`icon`](#the-icon-property) | ✅ | ✅ | ✅ | ✅ | - | ☑️ |\n| [`disabled`](#the-disabled-property) | ✅ | ✅ | ✅ | - | - | - |\n| [`className`](#the-classname-property) | ✅ | ✅ | ✅ | ✅ | - | ✅ |\n| [`shortcut`](#the-shortcut-property) | ✅ | ✅ | - | - | - | - |\n| [`info`](#the-info-property) | - | - | - | ✅ | - | - |\n| [`checked`](#the-checked-property) | - | ✅ | - | - | - | - |\n| [`submenu`](#the-submenu-property) | - | - | ✅ | - | - | - |\n| [`separator`](#the-separator-property) | - | - | - | - | ✅ | - |\n| [`action`](#the-action-property) | ✅ | - | - | - | - | - |\n| [`beforeChange`](#the-beforechange-property) | - | ✅ | - | - | - | ☑️ |\n| [`closeOnSelect`](#the-closeonselect-property) | ✅ | ✅ | - | - | - | ✅ |\n\n###### The `label` Property\n\nThe visible text displayed for the menu item.\n\n- **Property:** `label` 🔴 _(mandatory)_\n- **Type:** `string`\n- **Accessibility:** Serves as the primary accessible name for `Action`, `Selectable` and `Submenu` items.\n  - When `Submenu`, it also acts as the accessible label for the opened menu container (e.g.: announced as _\"Share menu\"_).\n  - When `Group`, it provides the accessible name for the grouping container (e.g.: announced as _\"Zoom grouping\"_).\n- **Applies to:** [`MenuItemAction`](#the-menuitemaction-type), [`MenuItemSelectable`](#the-menuitemselectable-type), [`MenuItemSubmenu`](#the-menuitemsubmenu-type) and [`MenuGroup`](#the-menugroup-type)\n\n###### The `value` Property\n\nA unique identifier for the menu item.\n\n> 💡 Crucial for:\n>\n> - Better identify the item when emitted.\n> - Retrieve the item through the [`menuContext`](#the-menu-context) when available.\n\n- **Property:** `value` ⭕ _(optional)_\n- **Type:** `string`\n- **Applies to:** [`MenuItemAction`](#the-menuitemaction-type), [`MenuItemSelectable`](#the-menuitemselectable-type), [`MenuItemSubmenu`](#the-menuitemsubmenu-type) and [`MenuItemInfo`](#the-menuiteminfo-type)\n\n###### The `icon` Property\n\nThe icon displayed alongside the item's label.\n\n> 💡 **NOTE:** When at least one item in the menu has an icon defined, the rest of the items will have an empty placeholder to keep all text labels perfectly aligned.\n>\n> ⚠️ **EXCEPTION:** Items in \"radio\" or \"checkbox\" groups are excluded from this _visual alignment_, since they also have their own selection icons.\n>\n> <hr />\n>\n> 💡 **IMPORTANT:** This property overrides any global icon configuration for the specific menu item.\n>\n> For example, if you configured Material Icons globally, you can still use a different icon by:\n>\n> ```typescript\n> // setting another component\n> icon: {\n>     component: AppIconComponent,\n>     inputs: {\n>         icon: 'fa-solid fa-star',\n>     }\n> }\n> // or just a simple HTML\n> icon: { html: '🌟' }\n> // or just an image\n> icon: { src: '/assets/images/menu/icon-star.png' }\n> ```\n\n- **Property:** `icon` ⭕ _(optional)_\n- **Type:** `MenuItemIcon`\n  - `string`:\n    - 👉 When a global icon config exists, via [`a11yIconTemplate`](#the-a11yicontemplate-input) (directive) or [`iconDefaultStrategy`](#the-icon-default-strategy) (config), you can use this to provide **only** the string path (for `'image'`) or data/name to be injected into your template/component.\n\n      > ```typescript\n      > // Let's say you have defined `iconDefaultStrategy` within your main config with `MatIcon` component, then you can safely pass the icon name\n      > icon: 'info',\n      > // or you have defined `iconDefaultStrategy` with 'image', then you can pass the image's path\n      > icon: '/assets/images/menu/icon-info.png',\n      > // or you have passed your own template through `a11yIconTemplate` input, which will use the string as the class names\n      > icon: 'fa-solid fa-info',\n      > ```\n\n    - 👉 When **NO** global config is defined, use this to provide the raw HTML snippet directly.\n\n      > ```typescript\n      > icon: '<i class=\"fa-solid fa-info\"></i>',\n      > ```\n\n  - `IconInputHTML`: 👉 Use this to render a raw HTML snippet.\n\n    > ```typescript\n    > icon: { html: '<i class=\"fa-solid fa-info\"></i>' },\n    > ```\n\n  - `IconInputImage`: 👉 Use this to render an image from your assets folder or an external URL.\n\n    > ```typescript\n    > icon: { src: '/assets/images/menu/icon-info.png' },\n    > ```\n\n  - `IconInputComponent`: 👉 Use this to dynamically render an Angular Component.\n   Perfect for libraries like Angular Material (or your own icon component).\n\n    > ```typescript\n    > icon: { component: MatIcon, content: 'info' },\n    > ```\n\n  - `IconInputTemplate` (aka `TemplateRef<unknown>`): 👉 Use this to pass an `<ng-template>` directly from your HTML view\n   for complete structural control.\n\n    > ```typescript\n    > icon: this.myIconTemplateRef,\n    > ```\n\n- **Accessibility:** Icons are ignored completely.\n- **Applies to:** [`MenuItemAction`](#the-menuitemaction-type), [`MenuItemSelectable`](#the-menuitemselectable-type), [`MenuItemSubmenu`](#the-menuitemsubmenu-type), [`MenuItemInfo`](#the-menuiteminfo-type) and [`MenuGroup`](#the-menugroup-type) (when group layout is `'inline'`)\n- **Examples:**\n  - [Using Images](#icons-setup-with-images)\n  - [Using Component with Content Projection](#icons-setup-via-content-projection) (e.g., Material Icons)\n  - [Using Component with Inputs](#icons-setup-via-component-inputs) (e.g., Lucide, Heroicons, Custom)\n  - [Using Local Template](#icons-setup-via-local-template)\n\n###### The `disabled` Property\n\nDefines whether the item is disabled or not, preventing user interaction and skipping it during navigation **only when [`allowNavigateDisabled`](#allow-navigate-disabled-items) is set to `false`**.\n\n- **Property:** `disabled` ⭕ _(optional)_\n- **Type:** `boolean`\n- **Accessibility:** Applies the `aria-disabled=\"true\"` attribute to provide the right state context for assistive technologies.\n- **Applies to:** [`MenuItemAction`](#the-menuitemaction-type), [`MenuItemSelectable`](#the-menuitemselectable-type) and [`MenuItemSubmenu`](#the-menuitemsubmenu-type)\n\n###### The `className` Property\n\nDefines custom class names for your element.\n\n- **Property:** `className` ⭕ _(optional)_\n- **Type:** `string` or `string[]`\n- **Applies to:** [`MenuItemAction`](#the-menuitemaction-type), [`MenuItemSelectable`](#the-menuitemselectable-type), [`MenuItemSubmenu`](#the-menuitemsubmenu-type), [`MenuItemInfo`](#the-menuiteminfo-type) and [`MenuGroup`](#the-menugroup-type)\n\n###### The `shortcut` Property\n\nDisplays a keyboard shortcut combination next to the item's label.\n\n> 💡 **NOTE:** This property is purely for visual and a11y purposes. The menu does not automatically bind these keystrokes to trigger the item's action. You must handle the actual keyboard event listeners separately in your code.\n\n- **Property:** `shortcut` ⭕ _(optional)_\n- **Type:** `MenuItemShortcut`\n- **Properties:**\n\n  | Property | Type | Mandatory | Description |\n  | :------- | :--- | :-------: | :---------- |\n  | `key` | `string` | ✔️ Yes | The primary key (e.g., 'S', 'P', 'Enter', 'Del') |\n  | `keyLabel` | `string` | ❌ No | Full word for screen readers (e.g., 'Delete' when the `key` is 'Del') |\n  | `ctrlCmd` | `boolean` | ❌ No | Requires 'Ctrl' (Win/Linux) or 'Cmd / ⌘' (Mac) |\n  | `alt` | `boolean` | ❌ No | Requires 'Alt' (Win/Linux) or 'Option / ⌥' (Mac) |\n  | `shift` | `boolean` | ❌ No | Requires 'Shift / ⇧' |\n\n- **Accessibility:** Automatically generates the `aria-keyshortcuts` attribute. The `keyLabel` property is a powerful addition to provide a screen-reader-friendly pronunciation for abbreviated keys (e.g., rendering \"Ctrl+Del\" visually, but announcing \"Control+Delete\").\n- **Applies to:** [`MenuItemAction`](#the-menuitemaction-type) and [`MenuItemSelectable`](#the-menuitemselectable-type).\n- **Example:**\n  > **Typescript:**\n  >\n  > ```typescript\n  > shortcut: { ctrlCmd: true, key: 'N' },\n  > ```\n  >\n  > **Will Render As:**\n  >\n  > ```html\n  > <!-- On Windows/Linux -->\n  > <a11y-menu-item aria-keyshortcuts=\"Ctrl+N\" menu-item>\n  >     ...\n  >     <span menu-item-shortcut>Ctrl+N</span>\n  > </a11y-menu-item>\n  >\n  > <!-- On Mac -->\n  > <a11y-menu-item aria-keyshortcuts=\"Meta+N\" menu-item>\n  >     ...\n  >     <span menu-item-shortcut>⌘N</span>\n  > </a11y-menu-item>\n  > ```\n  >\n  > **Result:**\n  >\n  > ![\"\"](https://raw.githubusercontent.com/LDV2k3/a11y-libraries/refs/heads/master/projects/a11y-ngx/menu/src/lib/images/example-shortcuts.jpg)\n\n###### The `info` Property\n\nUsed to display read-only, informational text. It does not trigger actions or selections.\n\n> 💡 **NOTE:** If your intention is to provide relevant information that _visually_ changes, strongly consider using the `announce()` method to also provide the updated context to assistive technologies. Check the list of examples below.\n\n- **Property:** `info` 🔴 _(mandatory)_\n- **Type:** `string`\n- **Accessibility:** Informational texts are ignored completely\n- **Applies to:** [`MenuItemInfo`](#the-menuiteminfo-type)\n- **Examples:**\n  - [The Zoom Info Item](#the-zoom-info-item)\n  - [Default Animation & Dynamic Updates](#default-animation--dynamic-updates)\n\n###### The `action` Property\n\nExecutes a custom callback function when the item is clicked or activated via keyboard.\n\n> 💡 **NOTE:** When a custom `action` method is defined, the menu **will not** emit the selected item through the default directive/component emitter. The execution flow is entirely delegated to your custom function.\n\n- **Property:** `action` ⭕ _(optional)_\n- **Type:** `(itemCtx: MenuItemContext, menuCtx: MenuContext) => void`\n- **Applies to:** [`MenuItemAction`](#the-menuitemaction-type)\n- **Example:** [The Zoom Info Item](#the-zoom-info-item)\n\n> See also [the `MenuItemContext`](#the-item-context) and [the `MenuContext`](#the-menu-context).\n\n###### The `beforeChange` Property\n\nA guard function that intercepts a selection change (for `'checkbox'` or `'radio'` groups only) before allowing or aborting the state update.\n\nIt is the perfect place to handle asynchronous validations, API calls, or conditional business logic.\n\nAfter validating whatever you have to, return `true` to allow the state to change, or `false` to abort it.\n\n> 💡 **NOTE:** If your function returns a `Promise` or an `Observable`, the menu will automatically place the item into a non-interactive `busy` state (preventing duplicate clicks and showing a _pulse_ animation and a loading indicator (see [the `iconDefaultLoader`](#the-icon-default-loader))) until the operation resolves.\n>\n> 💡 **NOTE 2:** When a custom `beforeChange` method is defined, the menu **will not** emit the selected item through the default directive/component emitter. The execution flow is entirely delegated to your custom function.\n>\n> 💪 When a `'radio'` item gets selected, all the items within the group will enter into the same `busy` state, to prevent race conditions. For `'checkbox'` groups, this scope is configurable via [the `busyScope` property](#the-group-busy-scope).\n\n- **Property:** `beforeChange` ⭕ _(optional)_\n- **Type:** `(itemCtx: MenuItemContext, menuCtx: MenuContext, newState: boolean) => void | boolean | Promise<boolean> | Observable<boolean>`\n  - **The Return Types:**\n    - `void`: No need to return anything, it will be auto interpreted as `true` by default, allowing the state change.\n\n      > ```typescript\n      > beforeChange: (itemCtx, menuCtx, newState) => {\n      >     this.allowChangeColors = newState;\n      > }\n      > ```\n\n    - `boolean`: To validate things manually, return a `boolean` to allow or cancel the state change.\n\n      > ```typescript\n      > beforeChange: (itemCtx, menuCtx, newState) => {\n      >     return this.allowChangeColors;\n      > }\n      > ```\n\n    - `Promise<boolean>` or `Observable<boolean>`: To validate things asynchronously.\n\n      > ```typescript\n      > beforeChange: async (itemCtx, menuCtx, newState) => {\n      >     return await this.myService.validateSelection(itemCtx.item.value, newState);\n      > }\n      > ```\n\n- **Applies to:** [`MenuItemSelectable`](#the-menuitemselectable-type) and [`MenuGroup`](#the-menugroup-type) (when group type is `'radio'` or `'checkbox'`)\n\n> See also [the `MenuItemContext`](#the-item-context) and [the `MenuContext`](#the-menu-context).\n\n###### The `checked` Property\n\nDetermines the current selection state of a selectable item (for `'checkbox'` or `'radio'` items).\n\nWhen set to `true`, the item renders its active visual state (e.g., a checkmark or a filled radio circle).\n\n> 🔄 See also [the Group Type](#the-group-type) to understand the **Internal State Management**.\n>\n> ⚠️ **NOTE:** While the menu handles state updates automatically after interaction, it **does not pre-validate** your initial configuration. If you provide a radio group with multiple checked items, the menu will render them exactly as provided.\n\n- **Property:** `checked` ⭕ _(optional)_\n- **Type:** `boolean`\n- **Accessibility:** Automatically applies and toggles the `aria-checked` attribute between `\"true\"` or `\"false\"` to keep assistive technologies perfectly synced with the visual state.\n- **Applies to:** [`MenuItemSelectable`](#the-menuitemselectable-type)\n\n###### The `submenu` Property\n\nEstablishes the items for the submenu.\n\n- **Property:** `submenu` 🔴 _(mandatory)_\n- **Type:** [`Menu`](#the-menu-items-array)\n- **Accessibility:** Automatically applies `aria-haspopup=\"menu\"` and toggles the `aria-expanded` attribute between `\"true\"` or `\"false\"` to keep assistive technologies perfectly synced with the visual state.\n- **Example:** [The Submenu](#the-submenu)\n\n###### The `separator` Property\n\nUsed to separate menu items into logical sections and improve visual hierarchy.\n\n> **NOTE:** 💡 When you create groups, separators are automatically added before and after.\n>\n> ✔️ You can use them when:\n>\n> - They are among _loose_ items (not grouped).\n> - They are within a group of type `'common'` and item's layout is either `'stack'` or `'inline'`.\n>\n> ❌ You **can't** use them within a group of type `'checkbox'`, `'radio'` or when item's layout is `'grid'`.\n>\n> ℹ️ By default, separators are horizontal; on the `'inline'` item's layout they become vertical.\n\n- **Property:** `separator` 🔴 _(mandatory)_\n- **Type:** `boolean`\n- **Accessibility:** Automatically applies the `role=\"separator\"` and `aria-orientation` attributes.\n- **Applies to:** [`MenuItemSeparator`](#the-menuitemseparator-type).\n\n###### The `closeOnSelect` Property\n\nDetermines whether the menu should automatically close after the user interacts with the item.\n\n> 💡 **NOTE:** You can define this property at the `MenuGroup` level to apply it to all its children. However, if an individual item defines its own `closeOnSelect` value, it will safely override the group's configuration.\n\n- **Property:** `closeOnSelect` ⭕ _(optional)_\n- **Type:** `boolean`\n- **Default:**\n  - `true` for _action_ items (whether _loose_ or within a group).\n  - `false` for groups with _selectable_ items (`'checkbox'` or `'radio'`), allowing multiple selections without having to reopen the menu.\n- **Applies to:** [`MenuItemAction`](#the-menuitemaction-type), [`MenuItemSelectable`](#the-menuitemselectable-type) and [`MenuGroup`](#the-menugroup-type).\n\n##### The `MenuItemAction` Type\n\nAn **action** is a normal executable option.\n\n- **Properties Allowed:** [`label`](#the-label-property), [`value`](#the-value-property), [`icon`](#the-icon-property), [`disabled`](#the-disabled-property), [`className`](#the-classname-property), [`shortcut`](#the-shortcut-property), [`action`](#the-action-property), [`closeOnSelect`](#the-closeonselect-property).\n\n  > ```typescript\n  > menu: Menu = [\n  >     { label: 'Delete' },        // Action\n  >     { label: 'Mark as read' },  // Action\n  > ];\n  > ```\n\n##### The `MenuItemSubmenu` Type\n\nA **submenu** is a menu that appears when you select or hover over a menu item that contains nested additional related options.\n\n- **Properties Allowed:** [`label`](#the-label-property), [`value`](#the-value-property), [`icon`](#the-icon-property), [`submenu`](#the-submenu-property), [`disabled`](#the-disabled-property), [`className`](#the-classname-property).\n\n  > ```typescript\n  > menu: Menu = [\n  >     ...,\n  >     {\n  >         label: 'Download',          // Submenu Label\n  >         submenu: [                  // Submenu Items\n  >             { label: 'As PDF' },    // Action\n  >             { label: 'As Word' },   // Action\n  >             { label: 'As Excel' },  // Action\n  >             { label: 'As CSV' },    // Action\n  >         ],\n  >     },\n  > ];\n  > ```\n\n##### The `MenuItemInfo` Type\n\nAn **info** item is just a non-interactive element used purely to display static text or metadata within the menu. It cannot be clicked, triggered, or toggled; is also skipped by standard keyboard navigation.\n\n- **Properties Allowed:** [`info`](#the-info-property), [`value`](#the-value-property), [`icon`](#the-icon-property), [`className`](#the-classname-property).\n\n  > ```typescript\n  > menu: Menu = [\n  >     ...,\n  >     {\n  >         label: 'Zoom',              // Group Label\n  >         items: [                    // Group Items\n  >             { label: 'Zoom Out' },  // Action\n  >             { info: '100%' },       // Info\n  >             { label: 'Zoom In' },   // Action\n  >         ],\n  >     },\n  > ];\n  > ```\n\n> 💡 **Common use cases:**\n>\n> - **User Context:** Displaying the logged-in user's name or email at the top of a profile menu.\n> - **Status & Metadata:** Showing application version numbers, connection status, or the \"last synced\" time.\n> - **Helper Text:** Providing a brief read-only description or context for the surrounding options.\n\n##### The `MenuItemSeparator` Type\n\nA **separator** is to provide visually grouping context.\n\n> 💡 **NOTE:** By default, separators are horizontal; on the `'inline'` item's layout they become vertical.\n\n- **Properties Allowed:** [`separator`](#the-separator-property).\n\n  > ```typescript\n  > menu: Menu = [\n  >     ...,\n  >     { separator: true },  // Separator\n  >     ...,\n  > ];\n  > ```\n\n##### The `MenuItemSelectable` Type\n\nA **selectable** item is a stateful element to toggle settings or select preferences.\n\n> 💡 **NOTE:** Selectable items are only available for using within groups of type `'radio'` or `'checkbox'`.\n>\n> 🔄 See also [the Group Type](#the-group-type) to understand the **Internal State Management**.\n\n- **Properties Allowed:** [`label`](#the-label-property), [`value`](#the-value-property), [`icon`](#the-icon-property), [`checked`](#the-checked-property), [`disabled`](#the-disabled-property), [`className`](#the-classname-property), [`shortcut`](#the-shortcut-property), [`beforeChange`](#the-beforechange-property), [`closeOnSelect`](#the-closeonselect-property).\n\n  > ```typescript\n  > menu: Menu = [\n  >     ...,\n  >     {\n  >         type: 'checkbox',                        // Group Type\n  >         label: 'Text Format',                    // Group Label\n  >         items: [                                 // Group Items\n  >             { label: 'Bold', checked: true },    // Selectable\n  >             { label: 'Italic', checked: true },  // Selectable\n  >             { label: 'Underline' },              // Selectable\n  >         ],\n  >     },\n  >     ...,\n  > ];\n  > ```\n\n##### The `MenuGroup` Type\n\nAs mentioned before, **groups** are _containers_ used to bundle closely related options together.\n\n- **Properties Allowed:** [`label`](#the-group-label), [`type`](#the-group-type), [`icon`](#the-group-icon), [`layout`](#the-group-layout), [`items`](#the-group-items), [`itemsLayout`](#the-group-item-layout), [`busyScope`](#the-group-busy-scope), [`closeOnSelect`](#the-closeonselect-property), [`className`](#the-class-names).\n- **Items Layouts:**\n  - `'inline'`, also contains:\n    - [`itemsLabelPosition`](#the-items-label-position)\n    - [`itemsLabelWrap`](#the-items-label-wrap)\n    - [`itemsJustify`](#the-items-justify)\n  - `'grid'`, also contains:\n    - [`columns`](#the-grid-columns)\n    - [`itemsFlow`](#the-items-flow)\n    - [`itemsLabelPosition`](#the-items-label-position)\n    - [`itemsLabelWrap`](#the-items-label-wrap)\n\n###### The Group Label\n\nThe accessible name for the group. It provides essential context to both, sighted and screen reader users, about the purpose of the grouped items.\n\n- **Property:** `label`\n- **Type:** `string`\n\n> ‼️ It is **highly recommended** for groups to have a label, to provide the right context to the users.\n>\n> ✔️ Since the label takes _extra_ space in stacked layouts, your design might not allow showing them. For those cases you can use the `showLabel` property (`boolean`) and set it to `false`. Check the [Selectable Groups Example](#selectable-groups).\n>\n> 💡 You can change it at a global level using [`showGroupLabels`](#show-group-labels) within the module or menu instance configuration.\n>\n> **IMPORTANT:** Even if you set this to `false` to hide them visually, providing a `label` string is **crucial** to ensure screen reader accessibility.\n\n###### The Group Type\n\nDefines the type of items within the group.\n\n- **Property:** `type`\n- **Type:**\n  - `'common'`: Action, Submenu, Info or Separator items.\n  - `'radio'`: A mutually exclusive list of options where only one item can be selected at a time.\n  - `'checkbox'`: A list of independent options where any number of items can be toggled on or off.\n- **Default:** `'common'`\n\n> 🔄 **Internal State Management**\n>\n> The menu engine automatically handles the `checked` state of your items under the hood. You only need to provide the **initial state** when defining the items array, and the library will take care of the rest.\n>\n> - **Checkbox Groups:** Each item's state is toggled independently.\n> - **Radio Groups:** These are mutually exclusive. When a user selects a radio item, the library automatically deselects the previously checked item within that same group.\n>\n> ⚠️ **Important Note on Radio Initialization:**\n> The library trusts the initial state you provide. If you mistakenly set `checked: true` on multiple items within the same Radio group, the engine will not throw an error or pre-validate it, but it will result in an invalid UI state (multiple active radios) until the user interacts with the group and the internal state corrects itself.\n\n###### The Group Layout\n\nEstablishes the disposition between icon, label and the list of items.\n\n- **Property:** `layout`\n- **Type:** `'stack'` or `'inline'`\n- **Default:** `'stack'`\n\n**Stacked layout**: Vertical alignment\n\nThe label (if any) will be placed above the list of items (it does **not** allow adding a group icon).\n\n![\"\"](https://raw.githubusercontent.com/LDV2k3/a11y-libraries/refs/heads/master/projects/a11y-ngx/menu/src/lib/images/example-group-stacked.jpg)\n\n**Inline layout**: Horizontal alignment (side by side)\n\n> **NOTE:** Inline layouts only accept `'inline'` or `'grid'` list of items.\n\n![\"\"](https://raw.githubusercontent.com/LDV2k3/a11y-libraries/refs/heads/master/projects/a11y-ngx/menu/src/lib/images/example-group-inline.jpg)\n\n###### The Group Icon\n\nThe icon displayed alongside the group's label.\n\n> 💡 **NOTE:** Icons are only available within groups with `'inline'` layouts, to maintain alignment with the rest of the menu items.\n>\n> ![\"\"](https://raw.githubusercontent.com/LDV2k3/a11y-libraries/refs/heads/master/projects/a11y-ngx/menu/src/lib/images/example-group-inline-aligned.jpg)\n>\n> 🔍 Please, read more in [the `icon` property section](#the-icon-property).\n\n###### The Group Items\n\nAn array containing the actual elements of the group. To ensure consistency and accessibility, the allowed item types **strictly depend** on [the group's `type` property](#the-group-type).\n\n> ‼️ You cannot mix different elements (like radios and standard actions) within the same group context.\n\n- **Property:** `items`\n- **Group Type:**\n  - `'common'` 👉 Array of [`MenuItemSubmenu`](#the-menuitemsubmenu-type), [`MenuItemAction`](#the-menuitemaction-type), [`MenuItemInfo`](#the-menuiteminfo-type) and [`MenuItemSeparator`](#the-menuitemseparator-type)\n  - `'checkbox'` 👉 Array of [`MenuItemSelectable`](#the-menuitemselectable-type)\n  - `'radio'` 👉 Array of [`MenuItemSelectable`](#the-menuitemselectable-type)\n\n###### The Group Item Layout\n\nEstablishes the disposition for the list of items.\n\n- **Property:** `itemsLayout`\n- **Type:** `'stack'`, `'inline'` or `'grid'`\n- **Default:** `'stack'`\n\n**Stacked items layout:**\n\n![\"\"](https://raw.githubusercontent.com/LDV2k3/a11y-libraries/refs/heads/master/projects/a11y-ngx/menu/src/lib/images/example-group-items-stacked.jpg)\n\n**Inline items layout:**\n\n![\"\"](https://raw.githubusercontent.com/LDV2k3/a11y-libraries/refs/heads/master/projects/a11y-ngx/menu/src/lib/images/example-group-items-inline.jpg)\n\n**Grid items layout:**\n\n![\"\"](https://raw.githubusercontent.com/LDV2k3/a11y-libraries/refs/heads/master/projects/a11y-ngx/menu/src/lib/images/example-group-items-grid.jpg)\n\n###### The Group Busy Scope\n\nDefines the scope of the _busy_ state when an item within a selectable group executes an asynchronous action.\n\n- **Property:** `busyScope`\n- **Type:** `'item'` or `'group'`\n- **Default:**\n  - `'item'` for checkbox groups.\n  - `'group'` for radio groups.\n  > 💡 **IMPORTANT:**\n  >\n  > To enforce mutual exclusivity, radio groups **mandatorily** lock the entire group while an item is processing. Using `'item'` in a radio group will be completely ignored.\n  >\n  > Checkbox groups use `'item'` by default, allowing multiple selections at the same time. However, you can set it to `'group'` if your application requires locking all options until the current action resolves.\n\n###### The Items Label Position\n\nControls where the text label is positioned relative to the item's icon.\n\n> ⚠️ **NOTE:** This property is specifically designed for groups with `'inline'` or `'grid'` item layouts.\n\n- **Property:** `itemsLabelPosition`\n- **Type:**\n  - For both, `'inline'` and `'grid'` layouts:\n    - `'below'`: Stacked vertically (icon on top, label on the bottom).\n    - `'start'`: Label on the left, icon on the right.\n    - `'end'`: Icon on the left, label on the right.\n    - `'tooltip'`: Visually hides the text inside the item and displays it as an accessible tooltip on hover or keyboard navigation. 💡 Ideal for compact, icon-only designs (like a toolbar).\n  - **Exclusive** to `'grid'` layouts:\n    > 💡 In dense icon-only grids, regular tooltips can cover nearby items while navigating. So, you can choose between a:\n    - **Static Panel**: Renders a fixed bar at the top or bottom of the grid.\n      - `'panel-above'`\n      - `'panel-below'`\n    - **Floating Tooltip**: Displays a centered, hovering tooltip above or below the grid.\n      - `'floating-above'`\n      - `'floating-below'`\n- **Default:** `'below'`\n\n**Example Label Below (default):**\n\n```typescript\n{\n    label: 'Download',\n    itemsLayout: 'inline',\n    items: [\n        { label: 'As PDF', icon: '...' },\n        { label: 'As Word', icon: '...' },\n        { label: 'As Excel', icon: '...' },\n        { label: 'As CSV', icon: '...' },\n    ],\n},\n```\n\n![\"\"](https://raw.githubusercontent.com/LDV2k3/a11y-libraries/refs/heads/master/projects/a11y-ngx/menu/src/lib/images/example-group-items-inline.jpg)\n\n**Example Label End:**\n\n```typescript\n{ ..., itemsLabelPosition: 'end' },\n```\n\n![\"\"](https://raw.githubusercontent.com/LDV2k3/a11y-libraries/refs/heads/master/projects/a11y-ngx/menu/src/lib/images/example-group-items-inline-label-end.jpg)\n\n**Example Label Start:**\n\n```typescript\n{ ..., itemsLabelPosition: 'start' },\n```\n\n![\"\"](https://raw.githubusercontent.com/LDV2k3/a11y-libraries/refs/heads/master/projects/a11y-ngx/menu/src/lib/images/example-group-items-inline-label-start.jpg)\n\n**Example Label Tooltip:**\n\n```typescript\n{ ..., itemsLabelPosition: 'tooltip' },\n```\n\n![\"\"](https://raw.githubusercontent.com/LDV2k3/a11y-libraries/refs/heads/master/projects/a11y-ngx/menu/src/lib/images/example-group-items-inline-label-tooltip.jpg)\n\n**Example Label Panel Above:**\n\n```typescript\n{ ..., itemsLayout: 'grid', itemsLabelPosition: 'panel-above' },\n```\n\n![\"\"](https://raw.githubusercontent.com/LDV2k3/a11y-libraries/refs/heads/master/projects/a11y-ngx/menu/src/lib/images/example-group-items-grid-panel-above.jpg)\n\n**Example Label Panel Below:**\n\n```typescript\n{ ..., itemsLayout: 'grid', itemsLabelPosition: 'panel-below' },\n```\n\n![\"\"](https://raw.githubusercontent.com/LDV2k3/a11y-libraries/refs/heads/master/projects/a11y-ngx/menu/src/lib/images/example-group-items-grid-panel-below.jpg)\n\n**Example Label Floating Tooltip Above:**\n\n```typescript\n{ ..., itemsLayout: 'grid', itemsLabelPosition: 'floating-above' },\n```\n\n![\"\"](https://raw.githubusercontent.com/LDV2k3/a11y-libraries/refs/heads/master/projects/a11y-ngx/menu/src/lib/images/example-group-items-grid-floating-tooltip-above.jpg)\n\n**Example Label Floating Tooltip Below:**\n\n```typescript\n{ ..., itemsLayout: 'grid', itemsLabelPosition: 'floating-below' },\n```\n\n![\"\"](https://raw.githubusercontent.com/LDV2k3/a11y-libraries/refs/heads/master/projects/a11y-ngx/menu/src/lib/images/example-group-items-grid-floating-tooltip-below.jpg)\n\n###### The Items Label Wrap\n\nControls how the group items handles long labels.\n\n> ⚠️ **NOTE:** This property is specifically designed for groups with `'inline'` or `'grid'` item layouts.\n\n- **Property:** `itemsLabelWrap`\n- **Type:** `boolean`\n  - `true`: Allows the text to wrap onto multiple lines.\n  - `false`: Keeps the label strictly on a single line.\n- **Default:** `true`\n\n> ℹ️ **NOTE 2:** The menu's overall width is automatically calculated based on its entire content.\n>\n> 💡 If for any reason some of your _inline_ or _grid_ item labels are wrapping and breaking the visual, you can set this option to `false` for that specific group.\n>\n> ✔️ Consider using the default stacked layout if their labels are long.\n\n###### The Items Justify\n\nControls the horizontal alignment and distribution of items.\n\nThis is particularly useful when the menu's overall width is dictated by other wider items or groups, leaving empty horizontal space around your compact (e.g., icon-only) groups.\n\n> ⚠️ **NOTE:** This property is specifically designed for groups with `'inline'` item layouts.\n\n- **Property:** `itemsJustify`\n- **Type:**\n  - `'start'`: Aligns the items to the left side.\n  - `'end'`: Aligns the items to the right side.\n  - `'space-between'`: Distributes the items evenly across the available width.\n- **Default:** `'start'`\n\n**Example Items Justify Start (default):**\n\n```typescript\n{ \n    label: 'Zoom',\n    itemsLayout: 'inline',\n    items: [...],\n},\n```\n\n![\"\"](https://raw.githubusercontent.com/LDV2k3/a11y-libraries/refs/heads/master/projects/a11y-ngx/menu/src/lib/images/example-group-items-inline-justify-start.jpg)\n\n**Example Items Justify End:**\n\n```typescript\n{ ..., itemsJustify: 'end' },\n```\n\n![\"\"](https://raw.githubusercontent.com/LDV2k3/a11y-libraries/refs/heads/master/projects/a11y-ngx/menu/src/lib/images/example-group-items-inline-justify-end.jpg)\n\n**Example Items Justify Space Between:**\n\n```typescript\n{ ..., itemsJustify: 'space-between' },\n```\n\n![\"\"](https://raw.githubusercontent.com/LDV2k3/a11y-libraries/refs/heads/master/projects/a11y-ngx/menu/src/lib/images/example-group-items-inline-justify-space-between.jpg)\n\n###### The Grid Columns\n\nDefines the number of columns to render the items.\n\n> ⚠️ **NOTE:** This property is specifically designed for groups with `'grid'` item layouts.\n>\n> ❗❗❗ **IMPORTANT:** This property creates a strict layout. If your group has fewer items than the specified columns (e.g., setting `columns: 7` for only `2` items), the grid will maintain the full width of the 7-column structure, leaving visible empty spaces at the end of the row.\n\n- **Property:** `columns`\n- **Type:** `number`\n- **Default:** `5`\n\n**Example Grid with 5 Columns (default):**\n\n```typescript\n{\n    itemsLayout: 'grid',\n    label: 'Emoji',\n    items: [...],\n},\n```\n\n![\"\"](https://raw.githubusercontent.com/LDV2k3/a11y-libraries/refs/heads/master/projects/a11y-ngx/menu/src/lib/images/example-group-items-grid-columns-five.jpg)\n\n**Example Grid with 3 Columns:**\n\n```typescript\n{ ..., columns: 3 },\n```\n\n![\"\"](https://raw.githubusercontent.com/LDV2k3/a11y-libraries/refs/heads/master/projects/a11y-ngx/menu/src/lib/images/example-group-items-grid-columns-three.jpg)\n\n###### The Items Flow\n\nControls how items are ordered inside a `'grid'` layout. Since menu keyboard navigation is always sequential (using Up/Down arrows), this property defines the order in which items are rendered and focused.\n\n> ⚠️ **NOTE:** This property is specifically designed for groups with `'grid'` item layouts.\n\n- **Property:** `itemsFlow`\n- **Type:**\n  - `'row'`: Items flow horizontally. Pressing the `Down Arrow` moves focus from left to right, then down to the next row.\n\n    > ```html\n    > [ Item 1 ] [ Item 2 ] [ Item 3 ]\n    > [ Item 4 ] [ Item 5 ]\n    > ```\n\n  - `'column'`: Items flow vertically. Pressing the `Down Arrow` moves focus from top to bottom, then right to the next column.\n\n    > ```html\n    > [ Item 1 ] [ Item 4 ]\n    > [ Item 2 ] [ Item 5 ]\n    > [ Item 3 ]\n    > ```\n\n- **Default:** `'row'`\n\n**Example Items Flow Row (default):**\n\n```typescript\n{\n    label: 'Share',\n    itemsLayout: 'grid',\n    itemsLabelPosition: 'end',\n    columns: 2,\n    items: [\n        { label: 'Whatsapp', icon: '...' },\n        { label: 'X', icon: '...' },\n        { label: 'LinkedIn', icon: '...' },\n        { label: 'Slack', icon: '...' },\n        { label: 'Email', icon: '...' },\n        { label: 'Link', icon: '...' },\n    ],\n},\n```\n\n![\"\"](https://raw.githubusercontent.com/LDV2k3/a11y-libraries/refs/heads/master/projects/a11y-ngx/menu/src/lib/images/example-group-items-grid-flow-row.jpg)\n\n**Example Items Flow Column:**\n\n```typescript\n{ ..., itemsFlow: 'column' },\n```\n\n![\"\"](https://raw.githubusercontent.com/LDV2k3/a11y-libraries/refs/heads/master/projects/a11y-ngx/menu/src/lib/images/example-group-items-grid-flow-column.jpg)\n\n### The Directive\n\nUse the directive in a `<button>` element to trigger your menu.\n\n> 🛑 **A11y Strict Constraint:** To guarantee proper keyboard navigation and screen reader support, the `a11yMenu` directive **must** be attached to a native `<button>` or an element with `role=\"button\"` and a valid `tabindex`.\n>\n> ❌ If applied to a non-interactive element (like a simple `<div>` or `<span>`), the library will throw an error.\n\n- **Selector:** `[a11yMenu]`\n- **Exported As:** `a11yMenu`\n\n  > From the exported instance of the menu, the directive exposes a context object containing several useful methods.\n  >\n  > - **Property:** `menuContext`\n  > - **Type:** [`MenuContext`](#the-menu-context)\n\n#### The Directive Inputs\n\n| Name | Type | Description |\n| :--- | :--- | :---------- |\n| `a11yMenu` | `Menu` | See [the `a11yMenu` Input](#the-a11ymenu-input) |\n| `a11yMenuLabel` | `string` | See [the `a11yMenuLabel` Input](#the-a11ymenulabel-input) |\n| `a11yMenuConfig` | `MenuConfig` | See [the `a11yMenuConfig` Input](#the-a11ymenuconfig-input) |\n| `a11yIconTemplate` | `TemplateRef<unknown>` | See [the `a11yIconTemplate` Input](#the-a11yicontemplate-input) |\n\n##### The `a11yMenu` Input\n\nThe main entry point for your data. It expects the array containing all your menu items.\n\n- **Property:** `a11yMenu`\n- **Type:** [`Menu`](#the-menu-items-array), alias for an array of:\n  - [`MenuItemAction`](#the-menuitemaction-type)\n  - [`MenuItemSubmenu`](#the-menuitemsubmenu-type)\n  - [`MenuItemInfo`](#the-menuiteminfo-type)\n  - [`MenuItemSeparator`](#the-menuitemseparator-type)\n  - [`MenuGroup`](#the-menugroup-type)\n\n##### The `a11yMenuLabel` Input\n\nProvides a custom `aria-label` for screen readers, giving this specific menu instance a unique accessible name. This overrides any [global label already set in the configuration](#the-menu-label).\n\n- **Property:** `a11yMenuLabel`\n- **Type:** `string`\n\n##### The `a11yMenuConfig` Input\n\nAllows you to pass an instance-level configuration object.\n\n> ❗❗ Any property defined here will override the global settings defined at the module level for this specific menu.\n\n- **Property:** `a11yMenuConfig`\n- **Type:** [`MenuConfig`](#global-configuration)\n\n##### The `a11yIconTemplate` Input\n\nA reference to an Angular `<ng-template>` to render the icons for this specific instance of the menu.\n\n> 💡 The template receives the icon string (defined in your items array) as its implicit context.\n\n- **Property:** `a11yIconTemplate`\n- **Type:** `TemplateRef<unknown>`\n\n✨ See [the example on how to configure a custom icon template](#icons-setup-via-local-template).\n\n#### The Directive Outputs\n\n| Name | Type | Description |\n| :--- | :--- | :---------- |\n| `itemSelected` | `EventEmitter<MenuItemSelected>` | See [the `itemSelected` Output](#the-itemselected-output) |\n| `menuOpened` ","readmeFilename":"README.md","_rev":"1-9ccf54dcab68891fc79285c8b8cdb1c7"}