Menu

An unordered list stylized to represent interaction options

Dropdown menu

The most common use-case is using Menu and MenuItems with the Dropdown to hide and show the menu

• daisy
• rose
• tulip

Flower: rose

<Dropdown>
  <template #toggle="{ toggle }">
    <Button @click="toggle">
      Love this
    </Button>
  </template>
  <template #default>
    <Menu>
      <MenuItem>This</MenuItem>
      <MenuItem>That</MenuItem>
      <MenuItem>The other</MenuItem>
    </Menu>
  </template>
</Dropdown>

Standard Menu

• Daisy
• Tulip
• Lily
• Orchid

Flower: rose

<Menu>
  <MenuItem>Daisy</MenuItem>
  <MenuItem>Tulip</MenuItem>
  <MenuItem>Lily</MenuItem>
  <MenuItem>Orchid</MenuItem>
</Menu>

Nested anchors

• Daisy
• Tulip
• Lily
• Orchid

<Menu>
  <MenuItem><a href="#">Daisy</a></MenuItem>
  <MenuItem><a href="#">Tulip</a></MenuItem>
  <MenuItem><a href="#">Lily</a></MenuItem>
  <MenuItem><a href="#">Orchid</a></MenuItem>
</Menu>

Nested buttons

Flower: rose

<Menu>
  <MenuItem><button>Daisy</button></MenuItem>
  <MenuItem><button>Tulip</button></MenuItem>
  <MenuItem><button>Lily</button></MenuItem>
  <MenuItem><button>Orchid</button></MenuItem>
</Menu>

ARIA Attributes

MenuItem supports is-selected and is-disabled attributes with automatic styling.

Selected State

Use is-selected to show a blue background and check icon.

• Option 1
• Option 2
• Option 3

<Menu>
  <MenuItem :is-selected="selectedOption === 'option1'" @click="selectedOption = 'option1'">
    Option 1
  </MenuItem>
  <MenuItem :is-selected="selectedOption === 'option2'" @click="selectedOption = 'option2'">
    Option 2
  </MenuItem>
  <MenuItem :is-selected="selectedOption === 'option3'" @click="selectedOption = 'option3'">
    Option 3
  </MenuItem>
</Menu>

Disabled State

Use is-disabled to disable the item with gray styling.

• Active Item
• Disabled Item
• Disabled with Badge 99

<Menu>
  <MenuItem>Active Item</MenuItem>
  <MenuItem is-disabled>Disabled Item</MenuItem>
  <MenuItem is-disabled>
    <Badge content="99" position="inline" color="red" :is-disabled="true">
      Disabled with Badge
    </Badge>
  </MenuItem>
</Menu>

Combined Usage

Both attributes can be used together for complex menu states.

• Normal Item
• Selected Item
• Disabled Item

<Menu>
  <MenuItem>Normal Item</MenuItem>
  <MenuItem is-selected>Selected Item</MenuItem>
  <MenuItem is-disabled>Disabled Item</MenuItem>
</Menu>

API

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.

• <Menu />
• <MenuItem />