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>

API

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

• <Menu />
• <MenuItem />