Menu

<button type="button" class="aura-btn aura-btn--secondary"
        aria-haspopup="menu" aria-expanded="true" aria-controls="m1-menu">Actions</button>

<div data-state="open" class="aura-popup aura-menu">
  <ul id="m1-menu" role="menu" aria-label="Actions" aria-activedescendant="m1-item-0" tabindex="-1"
      class="aura-listbox aura-scroll">
    <li id="m1-item-0" role="menuitem" data-active="true" class="aura-listbox__option">
      <span class="aura-listbox__label">Open</span>
    </li>
    <li id="m1-item-1" role="menuitem" data-active="false" class="aura-listbox__option">
      <span class="aura-listbox__label">Rename<span class="aura-listbox__description">Give it another name</span></span>
    </li>
    <li role="separator" class="aura-listbox__separator"></li>
    <li id="m1-item-2" role="menuitem" data-active="false" class="aura-listbox__option aura-listbox__option--danger">
      <span class="aura-listbox__label">Delete</span>
    </li>
  </ul>
</div>

import { Button, Menu, type MenuItem } from '@ilomee/aura-react';

const items: MenuItem[] = [
  { value: 'open', label: 'Open' },
  { value: 'rename', label: 'Rename', description: 'Give it another name' },
  { value: 'duplicate', label: 'Duplicate' },
  { value: 'archive', label: 'Archive', disabled: true },
  { value: 'delete', label: 'Delete', danger: true, separatorBefore: true },
];

/**
 * Нажмите на триггер и походите стрелками. Фокус переходит внутрь списка, курсор виртуальный — один
 * элемент в фокусе, а `aria-activedescendant` указывает на строку, — и набор буквы перескакивает на
 * строку, которая с неё начинается. Enter запускает строку, Escape закрывает, ничего не запуская, а
 * Tab выходит из меню совсем, а не гоняет по кругу внутри. Отключённую строку стрелки перешагивают,
 * а не встают на неё, а опасная отделена от остальных чертой.
 */
export default function Demo() {
  return (
    <Menu items={items} label="Actions" onSelect={(value) => console.log(value)}>
      <Button variant="secondary">Actions</Button>
    </Menu>
  );
}

<script setup lang="ts">
import { Menu, Button } from '@ilomee/aura-vue';

const items = [
  { value: 'open', label: 'Open' },
  { value: 'rename', label: 'Rename', description: 'Give it another name' },
  { value: 'delete', label: 'Delete', danger: true, separatorBefore: true },
];
</script>

<template>
  <Menu :items="items" label="Actions" @select="run">
    <Button variant="secondary">Actions</Button>
  </Menu>
</template>

<script lang="ts">
  import { Menu } from '@ilomee/aura-svelte';

  const items = [
    { value: 'open', label: 'Open' },
    { value: 'delete', label: 'Delete', danger: true, separatorBefore: true },
  ];
</script>

<Menu {items} label="Actions" onselect={run}>
  {#snippet trigger(props)}
    <button type="button" class="aura-btn aura-btn--secondary" {...props}>Actions</button>
  {/snippet}
</Menu>

<button auraButton variant="secondary" [auraMenu]="items" label="Actions" (select)="run($event)">
  Actions
</button>