Dropdowns | 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>

Navigation Menu

vue

<p-dropdown summary="Documentation">
  <li><a href="/docs/buttons" @click.prevent>Buttons</a></li>
  <li><a href="/docs/fields" @click.prevent>Forms</a></li>
  <li><a href="/docs/layout" @click.prevent>Layout</a></li>
</p-dropdown>

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

Name	Type	Default	Description
`summary`	`string`	-	Text shown in the summary when no summary slot is provided.
`open`	`boolean`	false	Native details open state. Can be controlled with v-model:open.
`button`	`boolean`	false	Applies Pico's button dropdown summary pattern.
`variant`	`'secondary' \| 'contrast'`	-	Button summary variant when button is true.
`outline`	`boolean`	false	Button summary outline style when button is true.
`invalid`	`boolean`	false	Sets aria-invalid on the summary.
`align`	`'start' \| 'end'`	-	Aligns the dropdown list. End alignment sets the list direction to rtl.
`tooltip`	`string`	-	Optional Pico tooltip content.
`tooltipPlacement`	`PTooltipPlacement`	-	Optional Pico tooltip placement.

Slots

Name	Type	Default	Description
`summary`	`slot`	-	Custom summary content.
`default`	`slot`	-	List item content rendered inside the dropdown menu ul.

Events

Name	Type	Default	Description
`update:open`	`boolean`	-	Emitted when the native details element opens or closes.