DropdownMenu

ARIA menu

Commands behind a button — row actions, a ⋯ menu, a user menu. For choosing a value use Select; for navigation, links.

Basic

Heroine

＋New project⌘N

Open…⌘O

Locked

✓Show grid

Snap

●Small

Large

Share›

Delete⌫

Heroine

＋New project⌘N

Open…⌘O

Locked

✓Show grid

Snap

●Small

Large

Share›

Delete⌫

last: · checked: { "grid": true } · size: s

<script setup lang="ts">
import { ref } from "vue";
import { BlessButton, BlessDropdownMenu } from "blessing-ui";
import { menu } from "./_menu";
const checked = ref<Record<string, boolean>>({ grid: true });
const radios = ref<Record<string, string>>({ size: "s" });
const last = ref("");
</script>

<template>
  <div class="row">
    <BlessDropdownMenu
      :items="menu"
      v-model:checked="checked"
      v-model:radios="radios"
      @select="last = 'label' in $event ? $event.label : ''"
    >
      <template #trigger><BlessButton>Actions ▾</BlessButton></template>
    </BlessDropdownMenu>
    <BlessDropdownMenu :items="menu" placement="bottom-end" :checked :radios>
      <template #trigger><BlessButton variant="outline">end-aligned</BlessButton></template>
    </BlessDropdownMenu>
    <small>last: {{ last }} · checked: {{ checked }} · size: {{ radios.size }}</small>
  </div>
</template>

Not inside <p>

The floating panel is a <div>. HTML closes a <p> when it meets a <div>, so a trigger placed inside a paragraph renders differently on the server and the client. Wrap with <span>/<div> instead.

• The trigger is your own button; it is told it opens a menu and whether it's open. ↓ / Enter / Space open it and focus the first item (↑ the last).
• Arrows, Home / End and typeahead move; Enter selects; Esc closes and returns to the trigger; Tab out closes it.
• Items can be checkboxes (v-model:checked), radio groups (v-model:radios), separators, labels and submenus. Inside a Menubar, ← / → move between menus.

Usage

import { BlessDropdownMenu } from "blessing-ui";

API

Props

Name	Type	Default	Description
items*	BlessMenuItem[]	—
placement	Placement	"bottom-start"
checked	Record<string, boolean>	—
radios	Record<string, string>	—
context	boolean	—	context-menu mode: open at pointer on right click
block	boolean	—	anchor renders as block (wraps an area rather than a button)
open	boolean	false

Events

Name	Payload	Description
update:open	[value: boolean]
select	[item: BlessMenuItem]
update:checked	[v: Record<string, boolean>]
update:radios	[v: Record<string, string>]

Slots

Name	Scope	Description
trigger	{ open: boolean; }