Skip to content
On this page

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

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

PropsTypeDefaultDescription
textString-Dropdown's button text
variantStringsolidDropdown's button style variant, valid value is solid, outline, ghost, link
colorStringprimaryDropdown's button color variant, valid value is primary, secondary, success, info, warning, danger, gold
sizeStringmdSize of button, valid value is sm, md, lg
pillBooleanfalseEnable pill mode
iconBooleanfalseEnable icon mode
no-caretBooleanfalseHide caret icon
disabledBooleanfalseDisable state
placementStringbottom-startMenu placement, valid value is
top, top-start, top-end,
bottom, bottom-start, bottom-end,
right, right-start, right-end,
left, left-start, left-end
modelValueBooleanfalsev-model value for menu visibilities
dividerBoolean-Enable divider in dropdown-item
menu-classString or Array or Object-CSS class to add in the menu container
button-classString or Array or Object-CSS class to add in the button dropdown
menu-sizeStringsmDropdown menu size, valid value is sm, md and lg

Slots <p-dropdown>

NameDescription
defaultDropdown menu content
button-contentContent to placed in Activator Button
activatorContent to replace Activator Button

Events <p-dropdown>

NameArgumentsDescription
show-Event when dropdown popup shown
hide-Event when dropdown popup hidden

Props <p-dropdown-item>

PropsTypeDefaultDescription
hrefString-Place url permalink in the dropdown-item
disabledBooleanfalseSet disabled state in the dropdown-item

Slots <p-dropdown-header>

NameDescription
defaultDropdown header content
actionContent to place in the dropdown header action

See Also

Released under the MIT License.