Pear

PDropdown

PDropdown is a native details dropdown for little menus: actions, quick links, and “more” buttons. For form choices, use PSelect, PCheckbox, or PRadio.

Action Menu
No action selected
vue
<p-dropdown v-model:open="actionMenuOpen" summary="Project actions">
  <li>
    <a href="#" @click.prevent="runAction('Edit project')">Edit project</a>
  </li>
  <li>
    <a href="#" @click.prevent="runAction('Duplicate')">Duplicate</a>
  </li>
  <li>
    <a href="#" @click.prevent="runAction('Archive')">Archive</a>
  </li>
</p-dropdown>

<small>{{ lastAction }}</small>
Button Variants
vue
<p-dropdown summary="Primary" button>
  <li><a href="#" @click.prevent>Edit</a></li>
  <li><a href="#" @click.prevent>Duplicate</a></li>
</p-dropdown>

<p-dropdown summary="Secondary" button variant="secondary">
  <li><a href="#" @click.prevent>Export</a></li>
  <li><a href="#" @click.prevent>Share</a></li>
</p-dropdown>

<p-dropdown summary="More" button variant="contrast" outline>
  <li><a href="#" @click.prevent>Archive</a></li>
  <li><a href="#" @click.prevent>Delete</a></li>
</p-dropdown>
State & Alignment
vue
<p-dropdown v-model:open="menuOpen" summary="Controlled menu">
  <li><a href="#" @click.prevent>First action</a></li>
  <li><a href="#" @click.prevent>Second action</a></li>
</p-dropdown>

<p-button variant="secondary" @click="menuOpen = !menuOpen">
  Toggle menu
</p-button>

<p-dropdown summary="Right aligned" align="end">
  <li><a href="#" @click.prevent>Account settings</a></li>
  <li><a href="#" @click.prevent>Sign out</a></li>
</p-dropdown>
API

Props

NameTypeDefaultDescription
summarystring-Text shown in the summary when no summary slot is provided.
openbooleanfalseNative details open state. Can be controlled with v-model:open.
buttonbooleanfalseApplies Pico's button dropdown summary pattern.
variant'secondary' | 'contrast'-Button summary variant when button is true.
outlinebooleanfalseButton summary outline style when button is true.
invalidbooleanfalseSets aria-invalid on the summary.
align'start' | 'end'-Aligns the dropdown list. End alignment sets the list direction to rtl.
tooltipstring-Optional Pico tooltip content.
tooltipPlacementPTooltipPlacement-Optional Pico tooltip placement.

Slots

NameTypeDefaultDescription
summaryslot-Custom summary content.
defaultslot-List item content rendered inside the dropdown menu ul.

Events

NameTypeDefaultDescription
update:openboolean-Emitted when the native details element opens or closes.