Dropdown

Base dropdown button, suit for action menus

Usage

Simple Usage

preview

vue

<template>
  <p-dropdown text="Click Here">
    <p-dropdown-item>Item Text</p-dropdown-item>
    <p-dropdown-item>Item Text</p-dropdown-item>
    <p-dropdown-item>Item Text</p-dropdown-item>
  </p-dropdown>
</template>

With Subtext

preview

vue

<template>
  <p-dropdown text="Click Here">
    <p-dropdown-item>
      Item Text
      <p-caption>Item Subtext</p-caption>
    </p-dropdown-item>
    <p-dropdown-item>
      Item Text
      <p-caption>Item Subtext</p-caption>
    </p-dropdown-item>
    <p-dropdown-item>
      Item Text
      <p-caption>Item Subtext</p-caption>
    </p-dropdown-item>
  </p-dropdown>
</template>

With Disabled Item

preview

vue

<template>
  <p-dropdown text="Click Here">
    <p-dropdown-item>Item Text</p-dropdown-item>
    <p-dropdown-item :disabled="true">Item Text</p-dropdown-item>
    <p-dropdown-item :disabled="false">Item Text</p-dropdown-item>
  </p-dropdown>
</template>

Placement

You can change popup placement via placement prop. Valid options is:

top
bottom
right
left

preview

vue

<template>
  <p-dropdown text="Top" placement="top">
    <p-dropdown-item>Item Text</p-dropdown-item>
    <p-dropdown-item>Item Text</p-dropdown-item>
    <p-dropdown-item>Item Text</p-dropdown-item>
  </p-dropdown>
  <p-dropdown text="Bottom" placement="bottom">
    <p-dropdown-item>Item Text</p-dropdown-item>
    <p-dropdown-item>Item Text</p-dropdown-item>
    <p-dropdown-item>Item Text</p-dropdown-item>
  </p-dropdown>
  <p-dropdown text="Right" placement="right">
    <p-dropdown-item>Item Text</p-dropdown-item>
    <p-dropdown-item>Item Text</p-dropdown-item>
    <p-dropdown-item>Item Text</p-dropdown-item>
  </p-dropdown>
  <p-dropdown text="Left" placement="left">
    <p-dropdown-item>Item Text</p-dropdown-item>
    <p-dropdown-item>Item Text</p-dropdown-item>
    <p-dropdown-item>Item Text</p-dropdown-item>
  </p-dropdown>
</template>

Placement Align

You can combine placement with suffix *-start and *-end to set popup position align

preview

vue

<template>
  <p-dropdown text="Bottom" placement="bottom">
    <p-dropdown-item>Item Text</p-dropdown-item>
    <p-dropdown-item>Item Text</p-dropdown-item>
    <p-dropdown-item>Item Text</p-dropdown-item>
  </p-dropdown>
  <p-dropdown text="Bottom Start" placement="bottom-start">
    <p-dropdown-item>Item Text</p-dropdown-item>
    <p-dropdown-item>Item Text</p-dropdown-item>
    <p-dropdown-item>Item Text</p-dropdown-item>
  </p-dropdown>
  <p-dropdown text="Bottom End" placement="bottom-end">
    <p-dropdown-item>Item Text</p-dropdown-item>
    <p-dropdown-item>Item Text</p-dropdown-item>
    <p-dropdown-item>Item Text</p-dropdown-item>
  </p-dropdown>
</template>

Button Customization

Variant, Color and Size

Every props in Button like variant, color, size, pill and icon also works in here. Check out Button for more information.

preview

vue

<template>
  <p-dropdown
    text="Button"
    variant="outline"
    color="secondary"
    size="lg"
    pill>
    <p-dropdown-item>Item Text</p-dropdown-item>
    <p-dropdown-item>Item Text</p-dropdown-item>
    <p-dropdown-item>Item Text</p-dropdown-item>
  </p-dropdown>
</template>

Custom Button Content

You also can customize button content via slot button-content

preview

vue

<template>
  <p-dropdown
    icon>
    <template #button-content>
      <Persona />
    </template>
    <p-dropdown-item>Item Text</p-dropdown-item>
    <p-dropdown-item>Item Text</p-dropdown-item>
    <p-dropdown-item>Item Text</p-dropdown-item>
  </p-dropdown>
</template>

<script setup>
  import Persona from '@privyid/persona-icon/vue/persona/20.vue'
</script>

Custom Activator

You can also completely change dropdown's activator button to something else via slot activator.

preview

vue

<template>
  <p-dropdown
    text="Button"
    icon>
    <template #activator="{ open }">
      <p-input placeholder="This is Dropdown" @focus="open" />
    </template>
    <p-dropdown-item>Item Text</p-dropdown-item>
    <p-dropdown-item>Item Text</p-dropdown-item>
    <p-dropdown-item>Item Text</p-dropdown-item>
  </p-dropdown>
</template>

Disabled State

preview

vue

<template>
  <p-dropdown
    text="Button"
    disabled>
    <p-dropdown-item>Item Text</p-dropdown-item>
    <p-dropdown-item>Item Text</p-dropdown-item>
  </p-dropdown>
</template>

preview

vue

<template>
  <p-dropdown
    text="Button"
    no-caret>
    <p-dropdown-header>Title</p-dropdown-header>
    <p-dropdown-item>Item Text</p-dropdown-item>
    <p-dropdown-item>Item Text</p-dropdown-item>
  </p-dropdown>
</template>

With action

preview

vue

<template>
  <p-dropdown
    text="Button"
    no-caret>
    <p-dropdown-header>
      Title
      <template #action>
        <p-text variant="caption2" href="#">See details</p-text>
      </template>
    </p-dropdown-header>
    <p-dropdown-item>Item Text</p-dropdown-item>
    <p-dropdown-item>Item Text</p-dropdown-item>
  </p-dropdown>
</template>

Hide Caret

Add props no-caret to hide caret icon

preview

vue

<template>
  <p-dropdown
    text="Button"
    no-caret>
    <p-dropdown-item>Item Text</p-dropdown-item>
    <p-dropdown-item>Item Text</p-dropdown-item>
  </p-dropdown>
</template>

Binding v-model

You can programmatically toggle dropdown using v-model

Show Dropdownpreview

vue

<template>
  <p-checkbox v-model="show">Show Dropdown</p-checkbox>
  <p-dropdown
    v-model="show"
    text="Button">
    <p-dropdown-item>Item Text</p-dropdown-item>
    <p-dropdown-item>Item Text</p-dropdown-item>
  </p-dropdown>
</template>

Variables

Dropdown use local CSS variables for enhanced real-time customization.

sass

--p-dropdown-z-index: theme(zIndex.sticky);
--p-dropdown-size-lg: 30rem; /* 480px */
--p-dropdown-size-md: 20rem; /* 320px */
--p-dropdown-size-sm: 15rem; /* 240px */
--p-dropdown-max-height: theme(spacing.64);

API

Props `<p-dropdown>`

Props	Type	Default	Description
`text`	`String`	`-`	Dropdown's button text
`variant`	`String`	`solid`	Dropdown's button style variant, valid value is `solid`, `outline`, `ghost`, `link`
`color`	`String`	`primary`	Dropdown's button color variant, valid value is `primary`, `secondary`, `success`, `info`, `warning`, `danger`, `gold`
`size`	`String`	`md`	Size of button, valid value is `sm`, `md`, `lg`
`pill`	`Boolean`	`false`	Enable pill mode
`icon`	`Boolean`	`false`	Enable icon mode
`no-caret`	`Boolean`	`false`	Hide caret icon
`disabled`	`Boolean`	`false`	Disable state
`placement`	`String`	`bottom-start`	Menu placement, valid value is `top`, `top-start`, `top-end`, `bottom`, `bottom-start`, `bottom-end`, `right`, `right-start`, `right-end`, `left`, `left-start`, `left-end`
`modelValue`	`Boolean`	`false`	v-model value for menu visibilities
`divider`	`Boolean`	`-`	Enable divider in dropdown-item
`menu-class`	`String` or `Array` or `Object`	`-`	CSS class to add in the menu container
`button-class`	`String` or `Array` or `Object`	`-`	CSS class to add in the button dropdown
`menu-size`	`String`	`sm`	Dropdown menu size, valid value is `sm`, `md` and `lg`

Slots `<p-dropdown>`

Name	Description
`default`	Dropdown menu content
`button-content`	Content to placed in Activator Button
`activator`	Content to replace Activator Button

Events `<p-dropdown>`

Name	Arguments	Description
`show`	-	Event when dropdown popup shown
`hide`	-	Event when dropdown popup hidden

Props `<p-dropdown-item>`

Props	Type	Default	Description
`href`	`String`	`-`	Place url permalink in the `dropdown-item`
`disabled`	`Boolean`	false	Set disabled state in the `dropdown-item`

Slots `<p-dropdown-header>`

Name	Description
`default`	Dropdown header content
`action`	Content to place in the dropdown header action

Dropdown ​

Usage ​

Simple Usage ​

With Subtext ​

With Disabled Item ​

Placement ​

Placement Align ​

Button Customization ​

Variant, Color and Size ​

Custom Button Content ​

Custom Activator ​

Disabled State ​

Dropdown Header ​

Title

With action ​

Title See details

Hide Caret ​

Binding v-model ​

Variables ​

API ​

Props <p-dropdown> ​

Slots <p-dropdown> ​

Events <p-dropdown> ​

Props <p-dropdown-item> ​

Slots <p-dropdown-header> ​

See Also ​

Usage

Simple Usage

With Subtext

With Disabled Item

Placement

Placement Align

Button Customization

Variant, Color and Size

Custom Button Content

Custom Activator

Disabled State

Dropdown Header

With action

Hide Caret

Binding v-model

Variables

API

Props `<p-dropdown>`

Slots `<p-dropdown>`

Events `<p-dropdown>`

Props `<p-dropdown-item>`

Slots `<p-dropdown-header>`

See Also