---
title: Dropdown Button
desc: >-
  The QBtnDropdown Vue component is used to display dropdown content on a
  button.
related:
  - title: Button
    path: button.md
  - title: Button Group
    path: button-group.md
---
QBtnDropdown is a very convenient dropdown button. Goes very well with [QList](list-and-list-items.md) as dropdown content, but it's by no means limited to it.

In case you are looking for a dropdown "input" instead of "button" use [Select](select.md) instead.

## QBtnDropdown API

### Props

- `hover` (boolean, optional) *(added v2.26)*
  Also opens the dropdown when the pointer hovers the button (in split mode: either one of the two buttons) and closes it when the pointer leaves both the button and the menu; Click/tap and keyboard interactions keep toggling as usual (touch devices fall back to them), so activating the toggle closes a hover-shown dropdown, unless it is still animating into view (which keeps a single move-and-click gesture from closing what it just opened); A hover-opened dropdown does not switch focus on itself
- `hover-delay` (number, optional), default `0` *(added v2.26)*
  Delay (in milliseconds) between the pointer entering the button and the dropdown showing up; Requires the 'hover' prop
- `hover-hide-delay` (number, optional), default `150` *(added v2.26)*
  Grace period (in milliseconds) in which the pointer can re-enter the button or the menu before the dropdown gets closed; Requires the 'hover' prop
- `transition-show` (string, optional), default `'fade'`
  One of Quasar's embedded transitions
  Examples: `'fade'`, `'slide-down'`
- `transition-hide` (string, optional), default `'fade'`
  One of Quasar's embedded transitions
  Examples: `'fade'`, `'slide-down'`
- `transition-duration` (string | number, optional), default `300`
  Transition duration (in milliseconds, without unit)
- `model-value` (boolean, optional)
  Model of the component defining shown/hidden state; Either use this property (along with a listener for 'update:model-value' event) OR use v-model directive
  Examples: `v-model="state"`
- `size` (string, optional)
  Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
  Examples: `'16px'`, `'2rem'`, `'xs'`, `'md'`
- `type` (string, optional), default `'button'`
  1) Define the button native type attribute (submit, reset, button) or 2) render component with <a> tag so you can access events even if disable or 3) Use 'href' prop and specify 'type' as a media tag
  Examples:
    - `'a'`
    - `'submit'`
    - `'button'`
    - `'reset'`
    - `'image/png'`
    - `href="https://quasar.dev" target="_blank"`
- `to` (string | object, optional)
  Equivalent to Vue Router <router-link> 'to' property; Superseded by 'href' prop if used
  Examples: `'/home/dashboard'`, `{ name: 'my-route-name' }`
- `replace` (boolean, optional)
  Equivalent to Vue Router <router-link> 'replace' property; Superseded by 'href' prop if used
- `href` (string, optional)
  Native <a> link href attribute; Has priority over the 'to' and 'replace' props
  Examples: `'https://quasar.dev'`, `href="https://quasar.dev" target="_blank"`
- `target` (string, optional)
  Native <a> link target attribute; Use it only with 'to' or 'href' props
  Examples: `'_blank'`, `'_self'`, `'_parent'`, `'_top'`
- `label` (string | number, optional)
  The text that will be shown on the button
  Examples: `'Button Label'`
- `icon` (string, optional)
  Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
  Examples: `'map'`, `'ion-add'`, `'img:https://cdn.quasar.dev/logo-v2/svg/logo.svg'`, `'img:path/to/some_image.png'`
- `icon-right` (string, optional)
  Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
  Examples: `'map'`, `'ion-add'`, `'img:https://cdn.quasar.dev/logo-v2/svg/logo.svg'`, `'img:path/to/some_image.png'`
- `outline` (boolean, optional)
  Use 'outline' design
- `flat` (boolean, optional)
  Use 'flat' design
- `unelevated` (boolean, optional)
  Remove shadow
- `rounded` (boolean, optional)
  Applies a more prominent border-radius for a squared shape button
- `push` (boolean, optional)
  Use 'push' design
- `square` (boolean, optional)
  Removes border-radius so borders are squared
- `glossy` (boolean, optional)
  Applies a glossy effect
- `fab` (boolean, optional)
  Makes button size and shape to fit a Floating Action Button
- `fab-mini` (boolean, optional)
  Makes button size and shape to fit a small Floating Action Button
- `padding` (string, optional)
  Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set
  Examples:
    - `'16px'`
    - `'10px 5px'`
    - `'2rem'`
    - `'xs'`
    - `'md lg'`
    - `'2px 2px 5px 7px'`
- `color` (string, optional)
  Color name for component from the Quasar Color Palette
  Examples: `'primary'`, `'teal'`, `'teal-10'`
- `text-color` (string, optional)
  Overrides text color (if needed); Color name from the Quasar Color Palette
  Examples: `'primary'`, `'teal'`, `'teal-10'`
- `no-caps` (boolean, optional)
  Avoid turning label text into caps (which happens by default)
- `no-wrap` (boolean, optional)
  Avoid label text wrapping
- `dense` (boolean, optional)
  Dense mode; occupies less space
- `ripple` (boolean | object, optional), default `true`
  Configure material ripple (disable it by setting it to 'false' or supply a config object)
  Examples:
    - `false`
    - `{ early: true, center: true, color: 'teal', keyCodes: [] }`
- `tabindex` (number | string, optional)
  Tabindex HTML attribute value
  Examples: `100`, `'0'`
- `align` (string, optional), default `'center'`
  Label or content alignment
  Accepts: `'left'`, `'right'`, `'center'`, `'around'`, `'between'`, `'evenly'`
- `stack` (boolean, optional)
  Stack icon and label vertically instead of on same line (like it is by default)
- `stretch` (boolean, optional)
  When used on flexbox parent, button will stretch to parent's height
- `loading` (boolean, optional), default `null`
  Put button into loading state (displays a QSpinner -- can be overridden by using a 'loading' slot)
- `disable` (boolean, optional)
  Put component in disabled mode
- `split` (boolean, optional)
  Split dropdown icon into its own button
- `dropdown-icon` (string, optional)
  Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
  Examples: `'map'`, `'ion-add'`, `'img:https://cdn.quasar.dev/logo-v2/svg/logo.svg'`, `'img:path/to/some_image.png'`
- `disable-main-btn` (boolean, optional)
  Disable main button (useful along with 'split' prop)
- `disable-dropdown` (boolean, optional)
  Disables dropdown (dropdown button if using along 'split' prop)
- `no-icon-animation` (boolean, optional)
  Disables the rotation of the dropdown icon when state is toggled
- `content-style` (string | any[] | object, optional)
  Style definitions to be attributed to the menu
  Examples: `'background-color: #ff0000'`, `{ backgroundColor: '#ff0000' }`
- `content-class` (string | any[] | object, optional)
  Class definitions to be attributed to the menu
  Examples: `'my-special-class'`, `{ 'my-special-class': true }`
- `toggle-aria-label` (string, optional)
  aria-label to be used on the dropdown toggle element
  Examples: `'Open menu'`
- `toggle-aria-haspopup` (string, optional) *(added v2.25)*
  aria-haspopup to be used on the dropdown toggle element; Must name the ARIA role of the dropdown content ('menu', 'listbox', 'tree', 'grid' or 'dialog'), so only set it once that content declares a matching role
  Examples: `'menu'`, `'listbox'`
- `cover` (boolean, optional)
  Allows the menu to cover the button. When used, the 'menu-self' prop is no longer effective
- `persistent` (boolean, optional)
  Allows the menu to not be dismissed by a click/tap outside of the menu or by hitting the ESC key; Also, an app route change won't dismiss it
- `no-esc-dismiss` (boolean, optional) *(added v2.18)*
  User cannot dismiss the popup by hitting ESC key; No need to set it if 'persistent' prop is also set
- `no-route-dismiss` (boolean, optional)
  Changing route app won't dismiss the popup; No need to set it if 'persistent' prop is also set
- `auto-close` (boolean, optional)
  Allows any click/tap in the menu to close it; Useful instead of attaching events to each menu item that should close the menu on click/tap
- `no-refocus` (boolean, optional) *(added v2.18)*
  (Accessibility) When the dropdown gets hidden, do not refocus on the DOM element that previously had focus
- `no-focus` (boolean, optional) *(added v2.18)*
  (Accessibility) When the dropdown gets shown, do not switch focus on it
- `menu-anchor` (string, optional), default `'bottom end'`
  Two values setting the starting position or anchor point of the menu relative to its target
  Accepts: `'top left'`, `'top middle'`, `'top right'`, `'top start'`, `'top end'`, `'center left'`, `'center middle'`, `'center right'`, `'center start'`, `'center end'`, `'bottom left'`, `'bottom middle'`, `'bottom right'`, `'bottom start'`, `'bottom end'`
- `menu-self` (string, optional), default `'top end'`
  Two values setting the menu's own position relative to its target
  Accepts: `'top left'`, `'top middle'`, `'top right'`, `'top start'`, `'top end'`, `'center left'`, `'center middle'`, `'center right'`, `'center start'`, `'center end'`, `'bottom left'`, `'bottom middle'`, `'bottom right'`, `'bottom start'`, `'bottom end'`
- `menu-offset` (any[], optional)
  An array of two numbers (in pixels) which expands the anchor element's bounding box outward horizontally and vertically; the menu is then positioned against the expanded box, so the visible effect depends on the 'anchor'/'self' points in use
  Examples:
    - `[8, 8]`
    - `[5, 10]`

### Methods

- `show(evt?: Event): void`
  Triggers component to show
  Params:
    - `evt` (Event, optional)
      JS event object
- `hide(evt?: Event): void`
  Triggers component to hide
  Params:
    - `evt` (Event, optional)
      JS event object
- `toggle(evt?: Event): void`
  Triggers component to toggle between show/hide
  Params:
    - `evt` (Event, optional)
      JS event object

### Events

- `@update:model-value`
  Emitted when showing/hidden state changes; Is also used by v-model
  Params:
    - `value` (boolean, optional)
      New state (showing/hidden)
- `@show`
  Emitted after component has triggered show()
  Params:
    - `evt` (Event, required)
      JS event object
- `@before-show`
  Emitted when component triggers show() but before it finishes doing it
  Params:
    - `evt` (Event, required)
      JS event object
- `@hide`
  Emitted after component has triggered hide()
  Params:
    - `evt` (Event, required)
      JS event object
- `@before-hide`
  Emitted when component triggers hide() but before it finishes doing it
  Params:
    - `evt` (Event, required)
      JS event object
- `@click`
  Emitted when user clicks/taps on the main button (not the icon one, if using 'split')
  Params:
    - `evt` (Event, required)
      JS event object

### Slots

- `#default`
  Default slot in the devland unslotted content of the component
- `#label`
  Customize main button's content through this slot, unless you're using the 'icon' and 'label' props
- `#toggle`
  Additional content rendered inside the dropdown toggle, next to the arrow icon; With the 'split' prop it is the only way to reach the toggle button (e.g. to attach a QTooltip to it); Does not replace the arrow icon - use the 'dropdown-icon' prop for that
- `#loading`
  Override the default QSpinner when in 'loading' state

## Usage

### Basic

```vue
<template>
  <div class="q-pa-md">
    <q-btn-dropdown
      color="primary"
      label="Dropdown Button"
      aria-haspopup="menu"
    >
      <q-list role="menu">
        <q-item v-close-popup @click="onItemClick">
          <q-item-section>
            <q-item-label>Photos</q-item-label>
          </q-item-section>
        </q-item>

        <q-item v-close-popup @click="onItemClick">
          <q-item-section>
            <q-item-label>Videos</q-item-label>
          </q-item-section>
        </q-item>

        <q-item v-close-popup @click="onItemClick">
          <q-item-section>
            <q-item-label>Articles</q-item-label>
          </q-item-section>
        </q-item>
      </q-list>
    </q-btn-dropdown>
  </div>
</template>

<script setup>
function onItemClick() {
  console.log('Clicked on an Item')
}
</script>
```

### Various content

```vue
<template>
  <div class="q-pa-md">
    <q-btn-dropdown class="glossy" color="purple" label="Account Settings">
      <div class="row no-wrap q-pa-md">
        <div class="column">
          <div class="text-h6 q-mb-md">Settings</div>
          <q-toggle v-model="mobileData" label="Use Mobile Data" />
          <q-toggle v-model="bluetooth" label="Bluetooth" />
        </div>

        <q-separator vertical inset class="q-mx-lg" />

        <div class="column items-center">
          <q-avatar size="72px">
            <img
              alt="User avatar"
              src="https://cdn.quasar.dev/img/boy-avatar.png"
            />
          </q-avatar>

          <div class="text-subtitle1 q-mt-md q-mb-xs">John Doe</div>

          <q-btn color="primary" label="Logout" push size="sm" v-close-popup />
        </div>
      </div>
    </q-btn-dropdown>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const mobileData = ref(false)
const bluetooth = ref(false)
</script>
```

### Split

```vue
<template>
  <div class="q-pa-md">
    <q-btn-dropdown
      split
      class="glossy"
      color="teal"
      label="Folders"
      @click="onMainClick"
      toggle-aria-haspopup="menu"
    >
      <q-list role="menu">
        <q-item v-close-popup @click="onItemClick">
          <q-item-section avatar>
            <q-avatar icon="folder" color="primary" text-color="white" />
          </q-item-section>
          <q-item-section>
            <q-item-label>Photos</q-item-label>
            <q-item-label caption>February 22, 2016</q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-icon name="info" color="amber" />
          </q-item-section>
        </q-item>

        <q-item v-close-popup @click="onItemClick">
          <q-item-section avatar>
            <q-avatar icon="assignment" color="secondary" text-color="white" />
          </q-item-section>
          <q-item-section>
            <q-item-label>Vacation</q-item-label>
            <q-item-label caption>February 22, 2016</q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-icon name="info" color="amber" />
          </q-item-section>
        </q-item>
      </q-list>
    </q-btn-dropdown>
  </div>
</template>

<script setup>
function onMainClick() {
  console.log('Clicked on main button')
}

function onItemClick() {
  console.log('Clicked on an Item')
}
</script>
```

### Hover *(v2.26+)*

The `hover` prop also opens the dropdown when the pointer hovers the button (in `split` mode: either one of the two buttons) and closes it once the pointer has left both the button and the menu. Click/tap and keyboard interactions keep toggling the dropdown as usual, so touch devices (which have no hover) simply fall back to them; this also means that clicking the toggle while the dropdown is hover-shown closes it. The one exception is a click that lands while the dropdown is still animating into view: it is ignored, so a single move-and-click gesture on the button cannot close the dropdown that the very same gesture just opened. A hover-opened dropdown does not move keyboard focus onto itself. The `hover-delay` and `hover-hide-delay` props tune the timings (see [QMenu's Hover section](menu.md#hover)).

### Hover

```vue
<template>
  <div class="q-pa-md q-gutter-md">
    <q-btn-dropdown color="primary" label="Hover me" hover aria-haspopup="menu">
      <q-list role="menu">
        <q-item clickable v-close-popup>
          <q-item-section>
            <q-item-label>Photos</q-item-label>
          </q-item-section>
        </q-item>

        <q-item clickable v-close-popup>
          <q-item-section>
            <q-item-label>Videos</q-item-label>
          </q-item-section>
        </q-item>

        <q-item clickable v-close-popup>
          <q-item-section>
            <q-item-label>Articles</q-item-label>
          </q-item-section>
        </q-item>
      </q-list>
    </q-btn-dropdown>

    <q-btn-dropdown
      color="secondary"
      label="Split hover"
      split
      hover
      aria-haspopup="menu"
      @click="onMainClick"
    >
      <q-list role="menu">
        <q-item clickable v-close-popup>
          <q-item-section>
            <q-item-label>Photos</q-item-label>
          </q-item-section>
        </q-item>

        <q-item clickable v-close-popup>
          <q-item-section>
            <q-item-label>Videos</q-item-label>
          </q-item-section>
        </q-item>
      </q-list>
    </q-btn-dropdown>
  </div>
</template>

<script setup>
function onMainClick() {
  console.log('Clicked on main button')
}
</script>
```

### Customization and slots

```vue
<template>
  <div class="q-pa-md">
    <q-btn-dropdown
      split
      color="orange"
      push
      glossy
      no-caps
      icon="folder"
      label="Dropdown Button"
      @click="onMainClick"
      toggle-aria-haspopup="menu"
    >
      <q-list role="menu">
        <q-item v-close-popup @click="onItemClick">
          <q-item-section avatar>
            <q-avatar icon="folder" color="primary" text-color="white" />
          </q-item-section>
          <q-item-section>
            <q-item-label>Photos</q-item-label>
            <q-item-label caption>February 22, 2016</q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-icon name="info" color="amber" />
          </q-item-section>
        </q-item>

        <q-item v-close-popup @click="onItemClick">
          <q-item-section avatar>
            <q-avatar icon="assignment" color="secondary" text-color="white" />
          </q-item-section>
          <q-item-section>
            <q-item-label>Vacation</q-item-label>
            <q-item-label caption>February 22, 2016</q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-icon name="info" color="amber" />
          </q-item-section>
        </q-item>
      </q-list>
    </q-btn-dropdown>
  </div>
</template>

<script setup>
function onMainClick() {
  console.log('Clicked on main button')
}

function onItemClick() {
  console.log('Clicked on an Item')
}
</script>
```

### Custom dropdown icon

```vue
<template>
  <div class="q-pa-md">
    <q-btn-dropdown
      color="pink"
      label="Dropdown Button"
      dropdown-icon="change_history"
      aria-haspopup="menu"
    >
      <q-list role="menu">
        <q-item v-close-popup @click="onItemClick">
          <q-item-section>
            <q-item-label>Photos</q-item-label>
          </q-item-section>
        </q-item>

        <q-item v-close-popup @click="onItemClick">
          <q-item-section>
            <q-item-label>Videos</q-item-label>
          </q-item-section>
        </q-item>

        <q-item v-close-popup @click="onItemClick">
          <q-item-section>
            <q-item-label>Articles</q-item-label>
          </q-item-section>
        </q-item>
      </q-list>
    </q-btn-dropdown>
  </div>
</template>

<script setup>
function onItemClick() {
  console.log('Clicked on an Item')
}
</script>
```

### Label slot

```vue
<template>
  <div class="q-pa-md">
    <q-btn-dropdown
      split
      color="cyan"
      push
      no-caps
      @click="onMainClick"
      toggle-aria-haspopup="menu"
    >
      <template v-slot:label>
        <div class="row items-center no-wrap">
          <q-icon left name="map" />
          <div class="text-center"> Custom<br />Content </div>
        </div>
      </template>

      <q-list role="menu">
        <q-item v-close-popup @click="onItemClick">
          <q-item-section avatar>
            <q-avatar icon="folder" color="primary" text-color="white" />
          </q-item-section>
          <q-item-section>
            <q-item-label>Photos</q-item-label>
            <q-item-label caption>February 22, 2016</q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-icon name="info" color="amber" />
          </q-item-section>
        </q-item>

        <q-item v-close-popup @click="onItemClick">
          <q-item-section avatar>
            <q-avatar icon="assignment" color="secondary" text-color="white" />
          </q-item-section>
          <q-item-section>
            <q-item-label>Vacation</q-item-label>
            <q-item-label caption>February 22, 2016</q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-icon name="info" color="amber" />
          </q-item-section>
        </q-item>
      </q-list>
    </q-btn-dropdown>
  </div>
</template>

<script setup>
function onMainClick() {
  console.log('Clicked on main button')
}

function onItemClick() {
  console.log('Clicked on an Item')
}
</script>
```

The `toggle` slot (v2.25+) adds content to the dropdown toggle itself, next to the arrow icon. In `split` mode it is the only way to reach the toggle button — attach a [QTooltip](tooltip.md) to it below (the `label` slot covers the main button):

### Toggle slot

```vue
<template>
  <div class="q-pa-md">
    <q-btn-dropdown
      split
      color="primary"
      label="Save"
      @click="onMainClick"
      toggle-aria-haspopup="menu"
    >
      <template v-slot:toggle>
        <q-tooltip>More save options</q-tooltip>
      </template>

      <q-list role="menu">
        <q-item v-close-popup @click="onItemClick">
          <q-item-section>Save as...</q-item-section>
        </q-item>

        <q-item v-close-popup @click="onItemClick">
          <q-item-section>Save a copy</q-item-section>
        </q-item>
      </q-list>
    </q-btn-dropdown>
  </div>
</template>

<script setup>
function onMainClick() {
  console.log('Clicked on main button')
}

function onItemClick() {
  console.log('Clicked on an Item')
}
</script>
```

### Other

```vue
<template>
  <div class="q-pa-md">
    <q-toggle v-model="menu" label="Menu state" />

    <q-btn-dropdown
      v-model="menu"
      class="glossy q-ml-lg"
      color="primary"
      label="Dropdown"
      aria-haspopup="menu"
    >
      <q-list role="menu">
        <q-item v-close-popup @click="onItemClick">
          <q-item-section avatar>
            <q-avatar icon="folder" color="primary" text-color="white" />
          </q-item-section>
          <q-item-section>
            <q-item-label>Photos</q-item-label>
            <q-item-label caption>February 22, 2016</q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-icon name="info" color="amber" />
          </q-item-section>
        </q-item>

        <q-item v-close-popup @click="onItemClick">
          <q-item-section avatar>
            <q-avatar icon="assignment" color="secondary" text-color="white" />
          </q-item-section>
          <q-item-section>
            <q-item-label>Vacation</q-item-label>
            <q-item-label caption>February 22, 2016</q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-icon name="info" color="amber" />
          </q-item-section>
        </q-item>
      </q-list>
    </q-btn-dropdown>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const menu = ref(false)
function onItemClick() {
  console.log('Clicked on an Item')
}
</script>
```

### Disable

```vue
<template>
  <div class="q-pa-md">
    <div class="row q-gutter-sm">
      <q-btn-dropdown
        disable
        class="glossy"
        color="primary"
        label="Default"
        aria-haspopup="menu"
      >
        <q-list role="menu">
          <q-item clickable v-close-popup>
            <q-item-section avatar>
              <q-avatar icon="folder" color="primary" text-color="white" />
            </q-item-section>
            <q-item-section>
              <q-item-label>Photos</q-item-label>
              <q-item-label caption>February 22, 2016</q-item-label>
            </q-item-section>
            <q-item-section side>
              <q-icon name="info" color="amber" />
            </q-item-section>
          </q-item>
        </q-list>
      </q-btn-dropdown>

      <q-btn-dropdown
        split
        disable-main-btn
        class="glossy"
        color="primary"
        label="Only main btn"
        toggle-aria-haspopup="menu"
      >
        <q-list role="menu">
          <q-item clickable v-close-popup>
            <q-item-section avatar>
              <q-avatar icon="folder" color="primary" text-color="white" />
            </q-item-section>
            <q-item-section>
              <q-item-label>Photos</q-item-label>
              <q-item-label caption>February 22, 2016</q-item-label>
            </q-item-section>
            <q-item-section side>
              <q-icon name="info" color="amber" />
            </q-item-section>
          </q-item>

          <q-item clickable v-close-popup>
            <q-item-section avatar>
              <q-avatar
                icon="assignment"
                color="secondary"
                text-color="white"
              />
            </q-item-section>
            <q-item-section>
              <q-item-label>Vacation</q-item-label>
              <q-item-label caption>February 22, 2016</q-item-label>
            </q-item-section>
            <q-item-section side>
              <q-icon name="info" color="amber" />
            </q-item-section>
          </q-item>
        </q-list>
      </q-btn-dropdown>

      <q-btn-dropdown
        split
        disable-dropdown
        class="glossy"
        color="primary"
        label="Only dropdown"
        toggle-aria-haspopup="menu"
      >
        <q-list role="menu">
          <q-item clickable v-close-popup>
            <q-item-section avatar>
              <q-avatar icon="folder" color="primary" text-color="white" />
            </q-item-section>
            <q-item-section>
              <q-item-label>Photos</q-item-label>
              <q-item-label caption>February 22, 2016</q-item-label>
            </q-item-section>
            <q-item-section side>
              <q-icon name="info" color="amber" />
            </q-item-section>
          </q-item>
        </q-list>
      </q-btn-dropdown>
    </div>
  </div>
</template>
```

The following example won't work with UMD version (so in Codepen/jsFiddle too) because it relies on the existence of Vue Router.

### Split and router link on main

```vue
<template>
  <div class="q-pa-md">
    <q-btn-dropdown
      split
      to="/start/pick-quasar-flavour"
      color="teal"
      rounded
      label="Go to Docs Index"
      toggle-aria-haspopup="menu"
    >
      <q-list role="menu">
        <q-item clickable v-close-popup>
          <q-item-section>
            <q-item-label>Photos</q-item-label>
          </q-item-section>
        </q-item>

        <q-item clickable v-close-popup>
          <q-item-section>
            <q-item-label>Videos</q-item-label>
          </q-item-section>
        </q-item>

        <q-item clickable v-close-popup>
          <q-item-section>
            <q-item-label>Articles</q-item-label>
          </q-item-section>
        </q-item>
      </q-list>
    </q-btn-dropdown>
  </div>
</template>
```

## Accessibility *(v2.25+)*

The toggle button follows the [WAI-ARIA disclosure pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/): it exposes `aria-expanded` (plus `aria-controls` while the popup exists — the reference must not point to a missing id) and deliberately claims no `aria-haspopup` — that attribute's value must name the popup's ARIA role, and the dropdown content (which has no default role) can be anything. Once you give the content an actual role, mirror it with the `toggle-aria-haspopup` prop — for instance when declaring `role="menu"` on a wrapped [QList](list-and-list-items.md) (see [QMenu's Accessibility section](menu.md#accessibility)):

```html
<q-btn-dropdown label="Actions" toggle-aria-haspopup="menu">
  <q-list role="menu">
    <!-- clickable QItems become menuitems automatically -->
  </q-list>
</q-btn-dropdown>
```

The prop is the reliable way to do this in both designs: in `split` mode the fall-through attributes land on the wrapping button group rather than on the toggle button, so setting `aria-haspopup` as a plain attribute would never reach the control that opens the popup.

The toggle also carries an accessible name of its own, built from the `label` prop and the active [Quasar Language Pack](../options/quasar-language-packs.md) and following the state — `Expand "Actions"` while collapsed, `Collapse "Actions"` once open (a dropdown without a `label` falls back to a bare `Expand`/`Collapse`). Since it describes the disclosure rather than the action behind it, override it with the `toggle-aria-label` prop whenever the label alone doesn't tell the story — and note that, like `toggle-aria-haspopup`, the prop is what reaches the toggle button in `split` mode.