Phi / Dropdown Menu

<script setup>
import { PhPlus } from "@phosphor-icons/vue";
import { Button } from "@dicehub/phi/components/button";
import { DropdownMenu } from "@dicehub/phi/components/dropdown";
</script>

<template>
  <DropdownMenu>
    <DropdownMenu.Trigger>
      <Button :icon="PhPlus">Add</Button>
    </DropdownMenu.Trigger>
    <DropdownMenu.Content>
      <DropdownMenu.Item value="worker">Worker</DropdownMenu.Item>
      <DropdownMenu.Item value="pages">Pages</DropdownMenu.Item>
      <DropdownMenu.Item value="kv">KV Namespace</DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu>
</template>

Installation

Barrel

import { DropdownMenu } from "@dicehub/phi";

Granular

import { DropdownMenu } from "@dicehub/phi/components/dropdown";

Usage

<script setup>
import { Button } from "@dicehub/phi/components/button";
import { DropdownMenu } from "@dicehub/phi/components/dropdown";
</script>

<template>
  <DropdownMenu>
    <DropdownMenu.Trigger>
      <Button>Menu</Button>
    </DropdownMenu.Trigger>
    <DropdownMenu.Content>
      <DropdownMenu.Item value="edit">Edit</DropdownMenu.Item>
      <DropdownMenu.Item value="duplicate">Duplicate</DropdownMenu.Item>
      <DropdownMenu.Separator />
      <DropdownMenu.Item value="delete" variant="danger">Delete</DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu>
</template>

Examples

<script setup>
import { PhPlus } from "@phosphor-icons/vue";
import { Button } from "@dicehub/phi/components/button";
import { DropdownMenu } from "@dicehub/phi/components/dropdown";
</script>

<template>
  <DropdownMenu>
    <DropdownMenu.Trigger>
      <Button :icon="PhPlus">Add</Button>
    </DropdownMenu.Trigger>
    <DropdownMenu.Content>
      <DropdownMenu.Item value="worker">Worker</DropdownMenu.Item>
      <DropdownMenu.Item value="pages">Pages</DropdownMenu.Item>
      <DropdownMenu.Item value="kv">KV Namespace</DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu>
</template>

Inset Items

Use inset on items without an icon to align their text with items that have one.

<script setup>
import { PhCopy, PhPencilSimple, PhTrash } from "@phosphor-icons/vue";
import { Button } from "@dicehub/phi/components/button";
import { DropdownMenu } from "@dicehub/phi/components/dropdown";
</script>

<template>
  <DropdownMenu>
    <DropdownMenu.Trigger><Button>Edit</Button></DropdownMenu.Trigger>
    <DropdownMenu.Content>
      <DropdownMenu.Item value="rename" :icon="PhPencilSimple">Rename</DropdownMenu.Item>
      <DropdownMenu.Item value="duplicate" :icon="PhCopy">Duplicate</DropdownMenu.Item>
      <DropdownMenu.Separator />
      <DropdownMenu.Item value="move" inset>Move to folder</DropdownMenu.Item>
      <DropdownMenu.Item value="favorite" inset>Add to favorites</DropdownMenu.Item>
      <DropdownMenu.Separator />
      <DropdownMenu.Item value="delete" :icon="PhTrash" variant="danger">Delete</DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu>
</template>

Handling Item Clicks

Use select handlers on DropdownMenu.Item to handle actions.

<script setup>
import { ref } from "vue";
import { PhCopy, PhPencilSimple, PhTrash } from "@phosphor-icons/vue";
import { Button } from "@dicehub/phi/components/button";
import { DropdownMenu } from "@dicehub/phi/components/dropdown";

const lastAction = ref("");
</script>

<template>
  <DropdownMenu>
    <DropdownMenu.Trigger><Button>Actions</Button></DropdownMenu.Trigger>
    <DropdownMenu.Content>
      <DropdownMenu.Item value="duplicate" :icon="PhCopy" @select="lastAction = 'Duplicated'">
        Duplicate
      </DropdownMenu.Item>
      <DropdownMenu.Item value="rename" :icon="PhPencilSimple" @select="lastAction = 'Renamed'">
        Rename
      </DropdownMenu.Item>
      <DropdownMenu.Separator />
      <DropdownMenu.Item value="delete" :icon="PhTrash" variant="danger" @select="lastAction = 'Deleted'">
        Delete
      </DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu>
</template>

Checkbox Items

Use DropdownMenu.CheckboxItem for toggleable options that can be independently checked or unchecked.

<script setup>
import { ref } from "vue";
import { Button } from "@dicehub/phi/components/button";
import { DropdownMenu } from "@dicehub/phi/components/dropdown";

const showSidebar = ref(true);
const showLineNumbers = ref(false);
const wordWrap = ref(true);
</script>

<template>
  <DropdownMenu>
    <DropdownMenu.Trigger><Button>View Options</Button></DropdownMenu.Trigger>
    <DropdownMenu.Content>
      <DropdownMenu.Group>
        <DropdownMenu.Label>Display</DropdownMenu.Label>
        <DropdownMenu.CheckboxItem v-model:checked="showSidebar" value="sidebar">
          Show sidebar
        </DropdownMenu.CheckboxItem>
        <DropdownMenu.CheckboxItem v-model:checked="showLineNumbers" value="line-numbers">
          Show line numbers
        </DropdownMenu.CheckboxItem>
        <DropdownMenu.CheckboxItem v-model:checked="wordWrap" value="word-wrap">
          Word wrap
        </DropdownMenu.CheckboxItem>
      </DropdownMenu.Group>
    </DropdownMenu.Content>
  </DropdownMenu>
</template>

Use DropdownMenu.Sub, SubTrigger, and SubContent to create nested submenus with radio selections.

<script setup>
import { ref } from "vue";
import { PhCreditCard, PhMoon, PhSignOut, PhUser } from "@phosphor-icons/vue";
import { Button } from "@dicehub/phi/components/button";
import { DropdownMenu } from "@dicehub/phi/components/dropdown";

const language = ref("en");
const timezone = ref("America/Los_Angeles");
</script>

<template>
  <DropdownMenu>
    <DropdownMenu.Trigger><Button :icon="PhUser">Account</Button></DropdownMenu.Trigger>
    <DropdownMenu.Content>
      <DropdownMenu.Item value="profile" :icon="PhUser">Profile</DropdownMenu.Item>
      <DropdownMenu.Item value="billing" :icon="PhCreditCard">Billing</DropdownMenu.Item>
      <DropdownMenu.Item value="theme" :icon="PhMoon">Dark mode</DropdownMenu.Item>
      <DropdownMenu.Sub>
        <DropdownMenu.SubTrigger>Language</DropdownMenu.SubTrigger>
        <DropdownMenu.SubContent>
          <DropdownMenu.RadioGroup v-model="language">
            <DropdownMenu.RadioItem value="en">English<DropdownMenu.RadioItemIndicator /></DropdownMenu.RadioItem>
            <DropdownMenu.RadioItem value="es">Español<DropdownMenu.RadioItemIndicator /></DropdownMenu.RadioItem>
          </DropdownMenu.RadioGroup>
        </DropdownMenu.SubContent>
      </DropdownMenu.Sub>
      <DropdownMenu.Separator />
      <DropdownMenu.Item value="logout" :icon="PhSignOut" variant="danger">Log out</DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu>
</template>

Custom Trigger with Avatar

Use DropdownMenu.Trigger with a custom focusable element when the trigger is not a standard Button.

<script setup>
import { PhGear, PhSignOut, PhUser } from "@phosphor-icons/vue";
import { DropdownMenu } from "@dicehub/phi/components/dropdown";
</script>

<template>
  <DropdownMenu>
    <DropdownMenu.Trigger>
      <button class="avatar-trigger" type="button" aria-label="Open account menu">MR</button>
    </DropdownMenu.Trigger>
    <DropdownMenu.Content>
      <DropdownMenu.Item value="profile" :icon="PhUser">Profile</DropdownMenu.Item>
      <DropdownMenu.Item value="settings" :icon="PhGear">Settings</DropdownMenu.Item>
      <DropdownMenu.Separator />
      <DropdownMenu.Item value="logout" :icon="PhSignOut" variant="danger">Log out</DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu>
</template>

Use DropdownMenu.LinkItem for semantic menu items that navigate to a URL.

<script setup>
import { PhArrowSquareOut, PhBookOpen, PhGear } from "@phosphor-icons/vue";
import { Button } from "@dicehub/phi/components/button";
import { DropdownMenu } from "@dicehub/phi/components/dropdown";
</script>

<template>
  <DropdownMenu>
    <DropdownMenu.Trigger><Button>Resources</Button></DropdownMenu.Trigger>
    <DropdownMenu.Content>
      <DropdownMenu.LinkItem href="/docs/installation" :icon="PhGear">Settings</DropdownMenu.LinkItem>
      <DropdownMenu.LinkItem href="/docs" :icon="PhBookOpen">Documentation</DropdownMenu.LinkItem>
      <DropdownMenu.Separator />
      <DropdownMenu.LinkItem href="https://developers.cloudflare.com" target="_blank" :icon="PhArrowSquareOut">
        Developer Docs
      </DropdownMenu.LinkItem>
    </DropdownMenu.Content>
  </DropdownMenu>
</template>

API Reference

DropdownMenu

Root component that manages menu state and positioning.

Prop	Type	Default	Description
`id`	`string`	`-`	Stable Ark machine id. Use this when rendering several menus on the same page.
`positioning`	`Menu.PositioningOptions`	`{ placement: "bottom-end", gutter: 8 }`	Floating UI placement options forwarded to Ark Menu.Root.
`open`	`boolean`	`-`	Controlled open state.
`defaultOpen`	`boolean`	`false`	Initial open state for uncontrolled usage.
`closeOnSelect`	`boolean`	`true`	Whether selecting an item closes the menu by default.
`loopFocus`	`boolean`	`false`	Whether keyboard focus loops inside the menu.
`composite`	`boolean`	`true`	Whether the menu participates in composite widget focus management.
`typeahead`	`boolean`	`true`	Whether printable keys move focus by matching item text.
`@update:open`	`(open: boolean) => void`	`-`	Emitted when the menu open state changes.
`@select`	`(details: Menu.SelectionDetails) => void`	`-`	Emitted when an item is selected.

DropdownMenu.Trigger

Trigger that opens the dropdown. Use one focusable child.

Prop	Type	Default	Description
`as-child`	`true`	`true`	The wrapper always renders Ark Trigger as-child and forwards trigger behavior to the slotted element.
`attrs`	`HTMLAttributes`	`-`	Forwards HTML attributes and Ark trigger events to the underlying trigger.

DropdownMenu.Content

Positioned menu surface rendered inside an Ark positioner.

Prop	Type	Default	Description
`attrs`	`Menu.ContentProps`	`-`	Forwards Ark content props and HTML attributes to Menu.Content.
`class`	`string \| object \| array`	`-`	Additional classes are merged with the Phi dropdown content classes.

DropdownMenu.Item

Individual menu item for actions. Supports icon, inset, selected, disabled, and danger variant.

Prop	Type	Default	Description
`value`	`string`	`-`	Required item value used by Ark for selection and typeahead.
`variant`	`"default" \| "danger"`	`"default"`	Visual style of the item.
`icon`	`Component`	`-`	Vue icon component displayed before the label.
`iconProps`	`Record<string, unknown>`	`{}`	Props forwarded to the icon component.
`inset`	`boolean`	`false`	Adds left padding to align text with icon-bearing items.
`selected`	`boolean`	`false`	Shows a trailing check mark indicator.
`disabled`	`boolean`	`false`	When true, the item cannot be interacted with.
`closeOnSelect`	`boolean`	`true`	Whether the menu closes after selecting this item.
`valueText`	`string`	`-`	Text used for typeahead when it differs from rendered content.
`@select`	`(details: Menu.SelectionDetails) => void`	`-`	Emitted when this item is selected.

DropdownMenu.LinkItem

Semantic anchor menu item for internal or external navigation.

Prop	Type	Default	Description
`href`	`string`	`-`	URL to navigate to when clicked.
`value`	`string`	`href`	Item value. Defaults to the href when not supplied.
`target`	`string`	`-`	Anchor target attribute, for example "_blank".
`rel`	`string`	`target === "_blank" ? "noreferrer" : undefined`	Anchor rel attribute. External-tab links default to noreferrer.
`variant`	`"default" \| "danger"`	`"default"`	Visual style of the link item.
`icon`	`Component`	`-`	Vue icon component displayed before the label.
`iconProps`	`Record<string, unknown>`	`{}`	Props forwarded to the icon component.
`inset`	`boolean`	`false`	Adds left padding to align text with icon-bearing items.
`disabled`	`boolean`	`false`	When true, the item cannot be interacted with.
`closeOnSelect`	`boolean`	`true`	Whether the menu closes after selecting this link item.

DropdownMenu.CheckboxItem

Toggleable option item with checked state and indicator.

Prop	Type	Default	Description
`value`	`string`	`-`	Required option value.
`checked / v-model:checked`	`boolean`	`-`	Controlled checked state. When omitted, the item manages its own checked state.
`disabled`	`boolean`	`false`	When true, the item cannot be interacted with.
`closeOnSelect`	`boolean`	`false`	Whether the menu closes after toggling this option.
`valueText`	`string`	`-`	Text used for typeahead when it differs from rendered content.
`@update:checked`	`(checked: boolean) => void`	`-`	Emitted when the checked state changes.
`@checkedChange`	`(checked: boolean) => void`	`-`	Alias event for checked state changes.

Prop	Type	Default	Description
`attrs`	`Menu.ItemGroupProps`	`-`	Forwards Ark item-group props and HTML attributes.

DropdownMenu.Label

Non-interactive label for a group of menu items.

Prop	Type	Default	Description
`inset`	`boolean`	`false`	Adds left padding to align the label with icon-bearing items.
`attrs`	`Menu.ItemGroupLabelProps`	`-`	Forwards Ark group-label props and HTML attributes.

DropdownMenu.Sub

Nested menu root. Wrap SubTrigger and SubContent inside this component.

Prop	Type	Default	Description
`id`	`string`	`-`	Stable Ark machine id for the submenu.
`open`	`boolean`	`-`	Controlled submenu open state.
`defaultOpen`	`boolean`	`false`	Initial open state for uncontrolled usage.
`positioning`	`Menu.PositioningOptions`	`{ placement: "right-start", gutter: 6 }`	Floating UI placement options for the submenu.
`@update:open`	`(open: boolean) => void`	`-`	Emitted when the submenu open state changes.

DropdownMenu.SubTrigger

Menu item that opens a nested submenu and displays a caret.

Prop	Type	Default	Description
`icon`	`Component`	`-`	Vue icon component displayed before the label.
`iconProps`	`Record<string, unknown>`	`{}`	Props forwarded to the icon component.
`inset`	`boolean`	`false`	Adds left padding to align text with icon-bearing items.
`disabled`	`boolean`	`false`	When true, the submenu trigger cannot be interacted with.

DropdownMenu.SubContent

Positioned surface for submenu content.

Prop	Type	Default	Description
`attrs`	`Menu.ContentProps`	`-`	Forwards Ark content props and HTML attributes to the submenu content.
`class`	`string \| object \| array`	`-`	Additional classes are merged with the Phi submenu content classes.

Prop	Type	Default	Description
`attrs`	`Menu.SeparatorProps`	`-`	Forwards Ark separator props and HTML attributes.

Prop	Type	Default	Description
`attrs`	`HTMLAttributes`	`-`	Forwards HTML attributes to the shortcut span.

DropdownMenu.RadioGroup

Single-selection group for radio items. Use v-model in Vue.

Prop	Type	Default	Description
`modelValue / v-model`	`string \| null`	`-`	Controlled value for the selected radio item.
`defaultValue`	`string`	`-`	Initial selected value for uncontrolled usage.
`disabled`	`boolean`	`false`	When true, all radio items in the group are disabled.
`@update:modelValue`	`(value: string \| null) => void`	`-`	Emitted when the selected radio value changes.

DropdownMenu.RadioItem

Radio-style selectable menu item.

Prop	Type	Default	Description
`value`	`string`	`-`	Required value for this radio item.
`icon`	`Component`	`-`	Vue icon component displayed before the label.
`iconProps`	`Record<string, unknown>`	`{}`	Props forwarded to the icon component.
`inset`	`boolean`	`false`	Adds left padding to align text with icon-bearing items.
`disabled`	`boolean`	`false`	When true, the item cannot be interacted with.
`closeOnSelect`	`boolean`	`false`	Whether the menu closes after selecting this radio item.
`valueText`	`string`	`-`	Text used for typeahead when it differs from rendered content.

Dropdown Menu