QBtnDropdown is a very convenient dropdown button. Goes very well with QList 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 instead.
Usage
Basic
Split
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).
Customization and slots
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 to it below (the label slot covers the main button):
Other
The following example won’t work with UMD version (so in Codepen/jsFiddle too) because it relies on the existence of Vue Router.
Accessibility v2.25+
The toggle button follows the WAI-ARIA disclosure pattern: 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 (see QMenu’s Accessibility section):
<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 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.