---
title: Dropdown
desc: Form-like element that allows users to select an option from a list of choices.
ico: mdi:form-dropdown
keywords:
  - form
  - menu
  - select

props:
  - class: .prs-dropdown
    type: component
    desc: Wrapper
  - class: .prs-dropdown-btn
    type: modifier
    desc: Variant for .prs-btn
  - class: .prs-dropdown-menu
    type: part
    desc: Required for .prs-menu
  - class: .prs-dropdown-menu-top
    type: modifier
    desc: Position the menu above the trigger element
  - class: .prs-dropdown-menu-left
    type: modifier
    desc: Position the menu before the trigger element
  - class: .prs-dropdown-menu-right
    type: modifier
    desc: Position the menu after the trigger element
  - class: .prs-dropdown-menu-end
    type: modifier
    desc: Align the end of the menu to the end of the trigger element
  - class: .prs-dropdown-menu-center
    type: modifier
    desc: Align the menu centered to the trigger element
  - class: .prs-dropdown-menu_open
    type: modifier
    desc: Force open the menu

alert:
  ico: mdi:warning
  body: |
    **Note:**  
    Use this with the [button](../button/) and [menu](../menu/) components. It's a supplement for **.prs-btn** and **.prs-menu**. The preview example is using the browser's built-in **popover** API and **anchor** positioning for maximum accessibility and NO JavaScript dependency.

controls:
  - name: ghost
    type: toggle
    label: Ghost
    desc: Border-less and background-less variant for extreme cases.
    default: false

  - name: size
    type: radio
    label: Size
    desc: Use sm when space is limited, use lg for large CTA scenarios.
    default: default
    options:
      - default
      - sm
      - lg

  - name: state
    type: radio
    label: State
    desc: States will happen automatically when using valid markup. We do include classes to force hover and focus states but you should avoid using these in your application.
    default: default
    options:
      - default
      - hover
      - focus
      - disabled

  - name: menu
    type: toggle
    label: Show menu
    desc: Display the menu.
    default: false

  - name: position
    type: radio
    label: Menu position
    desc: Position of the menu.
    default: bottom
    options:
      - bottom
      - top
      - left
      - right

  - name: align
    type: radio
    label: Menu alignment
    desc: Alignment of the menu.
    default: start
    options:
      - start
      - end
      - center

preview: |
  <div class="prs-dropdown">
    <button
      :class="{
        'prs-btn-ghost': ghost,
        'prs-btn-sm': size === 'sm',
        'prs-btn-lg': size === 'lg',
        'prs-btn_hover': state === 'hover',
        'prs-btn_focus': state === 'focus',
      }"
      class="prs-btn prs-dropdown-btn"
      popovertarget="popover-menu"
      style="anchor-name:--anchor-menu"
      :disabled="state === 'disabled'"
    >
      Dropdown
    </button>
    <div
      :class="{
        'prs-dropdown-menu_open': menu,
        'prs-dropdown-menu-top': position === 'top',
        'prs-dropdown-menu-left': position === 'left',
        'prs-dropdown-menu-right': position === 'right',
        'prs-dropdown-menu-end': align === 'end',
        'prs-dropdown-menu-center': align === 'center',
      }"
      class="prs-menu prs-dropdown-menu"
      id="popover-menu"
      style="position-anchor:--anchor-menu"
      popover
    >
      <menu>
        <li><button @click="$el.closest('[popover]').hidePopover()" class="prs-menu-item">Menu Item 1</button></li>
        <li><button @click="$el.closest('[popover]').hidePopover()" class="prs-menu-item">Menu Item 2</button></li>
      </menu>
    </div>
  </div>

code:
  html: |
    <div class="prs-dropdown">
      <button class="prs-dropdown-btn prs-btn{ghost}{size}{hover}{focus}" popovertarget="popover-menu" style="anchor-name:--anchor-menu"{disabled}>Dropdown</button>{menu}
    </div>
  logic:
    ghost: "this.ghost ? ' prs-btn-ghost' : ''"
    size: "this.size !== 'default' ? (' prs-btn-'+ this.size) : ''"
    hover: "this.state === 'hover' ? ' prs-btn_hover' : ''"
    focus: "this.state === 'focus' ? ' prs-btn_focus' : ''"
    disabled: "this.state === 'disabled' ? ' disabled' : ''"
    menu: "this.menu ? '\\n  <div id=\"popover-menu\" class=\"prs-dropdown-menu{position}{align} prs-menu\" style=\"position-anchor:--anchor-menu\">\\n    <menu>\\n      <li>...</li>\\n    </menu>\\n  </div>' : ''"
    position: "this.position !== 'bottom' ? (' prs-dropdown-menu-'+ this.position) : ''"
    align: "this.align !== 'start' ? (' prs-dropdown-menu-'+ this.align) : ''"
---