Menu Components

A composite widget that offers a list of choices to the user.

Based on:

• usePopover
• useList
• useListOption

Demo

Code

<template>
  <div class="d-demo">
    <Menu v-slot="{ attrs }">
      <button v-bind="attrs" class="d-btn">Basic Example</button>

      <MenuItems class="d-menu">
        <MenuItem @select="onSelect('Item 1')" class="d-menu-item"
          >Item 1</MenuItem
        >
        <MenuItem @select="onSelect('Item 2')" class="d-menu-item"
          >Item 2</MenuItem
        >
        <MenuItem @select="onSelect('Item 3')" class="d-menu-item"
          >Item 3</MenuItem
        >
      </MenuItems>
    </Menu>

    <Menu v-model="color" align="right" v-slot="{ attrs }">
      <button v-bind="attrs" :style="{ backgroundColor: color }" class="d-btn">
        Radio Items
        <span v-if="color">({{ color }})</span>
      </button>

      <MenuItems class="d-menu">
        <MenuItem
          v-for="(color, name) in colors"
          :value="color"
          class="d-menu-item"
          v-slot="{ isSelected }"
        >
          <span :style="{ fontWeight: isSelected ? 'bold' : 'normal' }">
            {{ name }}
          </span>
        </MenuItem>
      </MenuItems>
    </Menu>

    <Menu v-model="option" align="stretch" v-slot="{ attrs }">
      <button v-bind="attrs" class="d-btn">Checkbox Items</button>

      <MenuItems class="d-menu">
        <MenuItem
          v-for="(option, name) in options"
          :value="option"
          class="d-menu-item"
          v-slot="{ isSelected }"
        >
          {{ name }}
          <svg
            v-if="isSelected"
            xmlns="http://www.w3.org/2000/svg"
            width="1rem"
            height="1rem"
            viewBox="0 0 256 256"
          >
            <path
              fill="currentColor"
              d="m232.49 80.49l-128 128a12 12 0 0 1-17 0l-56-56a12 12 0 1 1 17-17L96 183L215.51 63.51a12 12 0 0 1 17 17Z"
            />
          </svg>
        </MenuItem>
        <hr />
        <MenuItem disabled class="d-menu-item">Disabled item</MenuItem>
      </MenuItems>
    </Menu>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Menu, MenuItems, MenuItem } from "../../../src/main";

const colors = {
  Blue: "#007bff",
  Purple: "#6f42c1",
  Pink: "#e83e8c",
  Red: "#dc3545",
};
const color = ref();

const options = {
  "Option 1": 1,
  "Option 2": 2,
  "Option 3": 3,
  "Option 4": 4,
};
const option = ref([]);

function onSelect(msg: string) {
  alert(msg);
}
</script>

Menu

The root component.

Properties

Property	Required	Description	Type	Default
modelValue	false	The selected value. Set to an array to enable multiselection.	any | any[]	undefined
direction	false	The direction of the menu.	'up' | 'down' | 'left' | 'right'	'down'
align	false	The alignment of the menu.	'top' | 'bottom' | 'left' | 'right' | 'center' | 'stretch'	'left'
position	false	CSS position of the menu panel.	'fixed' | 'absolute'	'fixed'
id	false	The ID of the menu panel.	string	auto-generated
activatorId	false	The ID of the activator element.	string	auto-generated

Slots

default

The default slot is used to provide an activator and a list of menu items in the MenuItems component. It provides the attrs property that must be binded to the activating element.

<Menu v-slot="{ attrs }">
  <button v-bind="attrs">Toggle Menu</button>

  <MenuItems>
    <MenuItem @select="/* do smth. */">Item 1</MenuItem>
  </MenuItems>
</Menu>

Keyboard interactions

Binding the props to the activating element adds the following keyboard interactions:

• Space / Enter - Opens the menu and places focus on the first item. Or closes the menu and returns focus to the activating element.
• Down Arrow - Opens the menu and moves focus to the first item.
• Up Arrow - Opens the menu and moves focus to the last item.

ARIA roles and attributes

The following attributes are managed for the activator:

• aria-controls
• aria-haspopup
• aria-expanded

MenuItems

A component to hold a collection of menu items.

Keyboard interactions

• Escape - Closes the menu and returns focus to the activating element.
• Tab - Closes the menu.
• Down Arrow - Moves focus to the next item.
• Up Arrow - Moves focus to the previous item.
• Home - Moves focus to the first item.
• End - Moves focus to the last item.

ARIA roles and attributes

The menu container has the menu role and automatically manages the following attributes:

• aria-activedescendant
• aria-labelledby

MenuItem

Properties

Property	Required	Description	Type	Default
value	false	Value assigned to the item.	any	undefined
disabled	false	Whether the item is disabled.	boolean	false
id	false	The ID of the item.	string	auto-generated

Slots

default

Attribute	Description	Type
isSelected	Whether the item is selected.	boolean
isActive	Whether the item is active (focused).	boolean

Keyboard interactions

• Enter - Selects the item and closes the menu.
• Space - Selects the item if it has a value set, otherwise closes the menu.

ARIA roles and attributes

if an item has no value set, it will be given the menuitem role. Otherwise, it will be given the menuitemradio or menuitemcheckbox (if modelValue is an array) role.

The following attributes are automatically managed:

• aria-checked
• aria-disabled