Dropdown Button     

QBtnDropdown is a very convenient dropdown button. Goes very well with QList as dropdown content, but it’s by no means limited to it.

Installation

Edit /quasar.conf.js:

framework: {
  components: ['QBtnDropdown']
}

Basic usage

Simple dropdown menu

<q-btn-dropdown label="Button">
  <!-- dropdown content -->
  <q-list link>
    <q-item>
      <q-item-main>
        <q-item-tile label>Item</q-item-tile>
      </q-item-main>
    </q-item>
  </q-list>
</q-btn-dropdown>

Use the split prop to separate target areas for opening dropdown and triggering @click event

<q-btn-dropdown split label="Button" @click="handlerFunction">
  <!-- dropdown content -->
  <q-list link>
    <q-item>
      <q-item-main>
        <q-item-tile label>Item</q-item-tile>
      </q-item-main>
    </q-item>
  </q-list>
</q-btn-dropdown>

Vue Properties

All props except split are shared with QBtn.

Vue PropertyTypeDescription
splitBooleanUse a split QBtnDropdown
iconStringName of the icon to use.
icon-rightStringName of the icon to place on right side of button. (only usable with split set to true)
loadingBooleanDisplay a spinner, if true. Can be optionally used along v-model. Check Button with Progress section.
percentageNumberOptional property for displaying a determinate progress. Use along loading.
dark-percentageBooleanOptional property for displaying a determinate progress on a light button color. Use along loading and percentage.
disableBooleanThe button is disabled, if true. @click event won’t be triggered while in this state.
labelString/NumberButton label.
tabindexNumberSet explicit tab index.
repeat-timeoutNumber/FunctionEnables multiple @click events on click/tap and hold. Function gets a Number (timesTriggered) as parameter.
wait-for-rippleBooleanWait for ripple then before emitting @click event. Mat theme only.
content-classString/Array/ObjectClasses applied to the Popover container.
content-styleString/Array/ObjectStyle applied to the Popover container.
typeString(v0.17+) One of “a” (uses an <a> tag), “button”, “submit”, “reset”.

Router syntax sugar

Vue PropertyTypeDescription
toString/ObjectMakes button go to the indicated route when clicked.
replaceBooleanReplaces current route instead of pushing to window history.

The properties above are just syntactic sugar and work similar to <router-link> Vue component.

<q-btn-dropdown to="/" ...> ... </q-btn-dropdown>
<!-- equivalent to: -->
<q-btn-dropdown @click="$router.push('/')" ...> ... </q-btn-dropdown>

Apearance

Vue PropertyTypeDescription
sizeStringButton size. One of xs, sm, md, lg, xl, or a css unit string size eg. 25px, 2rem, 3vw.
colorStringA color from Quasar Color Palette.
text-colorStringA color from Quasar Color Palette.
alignStringLabel/Content alignment. One of left, center, right, around, between.
denseBooleanDense Button.
roundBooleanSet true, if you want a round button.
outlineBooleanSet true, if you want an outlined button.
flatBooleanSet true, if you want a flat button.
pushBooleanSet true, if the button should have a push effect.
roundedBooleanSet true, if the square button should have rounded corners.
glossyBooleanSet true, if the button should be glossy.
fabBooleanFloating Action Button. See
fab-miniBooleanSmaller Floating Action Button.
no-wrapBooleanPrevent text wrapping
no-capsBooleanSet true, if you don’t want button content/label to be transformed to uppercase letter on Material Theme.
no-rippleBooleanDisable Material Ripple. Mat theme only.

Vue Events

Vue EventDescription
@clickTriggered on button click/tap, if button is not disabled.

More examples

Complete example with QList:

Note the use of the v-close-overlay directive to close the dropdown on click. Don’t forget to register it in quasar.conf.js (as a directive, not a component)

framework: {
  directives: [
    'CloseOverlay'
  ],
<q-btn-dropdown
  color="primary"
  label="Dropdown"
>
  <q-list link>
    <q-item v-for="n in 2" :key="`1.${n}`" v-close-overlay @click.native="handlerFunction">
      <q-item-side icon="folder" inverted color="primary" />
      <q-item-main>
        <q-item-tile label>Photos</q-item-tile>
        <q-item-tile sublabel>February 22, 2016</q-item-tile>
      </q-item-main>
      <q-item-side right icon="info" color="amber" />
    </q-item>
    <q-item-separator inset />
    <q-list-header inset>Files</q-list-header>
    <q-item v-close-overlay @click.native="handlerFunction">
      <q-item-side icon="assignment" inverted color="secondary" />
      <q-item-main>
        <q-item-tile label>Vacation</q-item-tile>
        <q-item-tile sublabel>February 22, 2016</q-item-tile>
      </q-item-main>
      <q-item-side right icon="info" color="amber" />
    </q-item>
  </q-list>
</q-btn-dropdown>
Button Group Toolbar
Last updated: Sat May 25 2019
Caught a mistake or want to contribute to the documentation? Suggest an edit on GitHub