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 Property Type Description
split Boolean Use a split QBtnDropdown
icon String Name of the icon to use.
icon-right String Name of the icon to place on right side of button. (only usable with split set to true)
loading Boolean Display a spinner, if true. Can be optionally used along v-model. Check Button with Progress section.
percentage Number Optional property for displaying a determinate progress. Use along loading.
dark-percentage Boolean Optional property for displaying a determinate progress on a light button color. Use along loading and percentage.
disable Boolean The button is disabled, if true. @click event won’t be triggered while in this state.
label String/Number Button label.
tabindex Number Set explicit tab index.
repeat-timeout Number/Function Enables multiple @click events on click/tap and hold. Function gets a Number (timesTriggered) as parameter.
wait-for-ripple Boolean Wait for ripple then before emitting @click event. Mat theme only.
content-class String/Array/Object Classes applied to the Popover container.
content-style String/Array/Object Style applied to the Popover container.

Apearance

Vue Property Type Description
size String Button size. One of xs, sm, md, lg, xl, or a css string size eg. 25px, 2rem, 3vw.
color String A color from Quasar Color Palette.
text-color String A color from Quasar Color Palette.
align String Label/Content alignment. One of left, center, right, around, between.
dense Boolean Dense Button.
round Boolean Set true, if you want a round button.
outline Boolean Set true, if you want an outlined button.
flat Boolean Set true, if you want a flat button.
push Boolean Set true, if the button should have a push effect.
rounded Boolean Set true, if the square button should have rounded corners.
glossy Boolean Set true, if the button should be glossy.
fab Boolean Floating Action Button. See
fab-mini Boolean Smaller Floating Action Button.
no-wrap Boolean Prevent text wrapping
no-caps Boolean Set true, if you don’t want button content/label to be transformed to uppercase letter on Material Theme.
no-ripple Boolean Disable Material Ripple. Mat theme only.

Vue Events

Vue Event Description
@click Triggered 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

<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: Mon Jul 23 2018
Caught a mistake or want to contribute to the documentation? Suggest an edit on GitHub