Component: Menu

Menu

The Menu component and related child components are used to quickly build custom dropdown components that are fully accessible out of the box, including correct ARIA attribute management and robust keyboard navigation support. Menus are built using the Menu, MenuButton, MenuItems, and MenuItem components.

View live demo

Markup:

<div Menu>
    <button type="button" MenuButton>Toggle</button>
    <ul *MenuItems>
        <li MenuItem>Item #1</li>
    </ul>
</div>

Menu

Props

• isOpened() - boolean - Return true if the menu is opened, returns false otherwise.

Inputs

• static - boolean - Whether the MenuItems should render by default.

---

MenuButton

The MenuButton will automatically open/close the MenuItems when clicked, and when the menu is open, the list of items receives focus and is automatically navigable via the keyboard.

Inputs

• disabled - boolean - Disabled the element.

---

MenuItems

Nothing

---

MenuItem

Inputs

• disabled - boolean - Disabled the element, skipping when navigating with keyboards.

Using ng-template inside MenuItem

<li MenuItem>
  <ng-template let-active="active">
    <a href="#" [class.bg-gray-100]="active" class="hover:bg-gray-100 hover:text-gray-900 block px-4 py-2 text-sm text-gray-700">
      Delete
    </a>
  </ng-template>
</li>

Examples

• Basic example