How to add opacity to the drawer background please?

  • Hello,

    Anyone knows a good trick for adding opacity to the drawer? Each time I try all the buttons become also transparent.

    .q-drawer__backdrop {
        z-index: 999 !important;
        will-change: background-color;


  • This doesn’t answer your question directly for the built-in/example drawer menu but

    I wrote a drawer menu component that one can drop into the drawer that gives more/easier control over the elements.
    If you don’t want to use it then try using similar classes in the existing drawer section of your template.

    fyi .q-drawer__content is the primary class element into which the component drops. Take a look at styling section below

    This component uses a menu prop which is just an object with the menu options. This for me was way easier than hard coding each choice. I just change an entry or change it’s disabled or hide property. Very easy to do dynamically too.


      <q-list class="q-drawer-menu">
        <q-item-label class="q-drawer-menu__heading" header v-if="menu.heading">{{ menu.heading }} </q-item-label>
        <q-separator v-if="menu.separator"/>
        <!-- <q-separator spaced v-if="menu.separator"/> -->
        <div :key="" v-for="item in menu.items">
          :class="item.disabled ? 'disabled':'enabled'"
            <q-tooltip v-if="item.tip">{{item.tip}}</q-tooltip>
            <q-item-section v-if="!menu.disableIcons" top avatar>
              <q-avatar v-if="item.icon" :color="item.iconColor" class="q-drawer-menu__item--icon" :icon="item.icon" />
              <!-- <q-icon v-if="item.icon" :color="item.iconColor || 'primary'" class="q-drawer-menu__item--icon" :name="item.icon" /> -->
              <q-item-label class="q-drawer-menu__item--name">{{ item.label ? item.label :[0].toUpperCase() }}</q-item-label>
              <q-item-label caption class="q-drawer-menu__item--caption" lines="2">{{item.caption}}</q-item-label>
          <q-separator v-if="!item.disabled & menu.separator" />
        <q-icon />
    import { QItem, QItemLabel, QItemSection, QSeparator, QIcon } from 'quasar'
    // is array of object that looks
    export default {
      data () {
        return {
          pin: '',
          disabled: false
      props: ['menu'],
      methods: {
      watch: {
        pin (val) {
          if (val && val.length === {
            this.disabled = true
      components: { QItem, QItemLabel, QItemSection, QSeparator, QIcon }
    <style lang="stylus">
      background-color $menu-color
      color $menu-heading-text-color
      background $menu-heading-color
      padding .2em
      color $menu-item-text-color
      background $menu-item-color
      background $menu-item-disabled-color
      color $menu-item-caption-text-color
      color $menu-item-icon-symbol-color
      background-color $menu-item-icon-color

    I put this in assets and then load it and set is as the passed menu prop.

    export default {
      heading: 'System Configuration',
      // disableIcons: true,
      // disabled: true,
      separator: true,
      items: [ // name is only required
        // full props supported are, label, name, caption,icon,hidden,disabled
        { label: 'Primary', name: 'config', caption: 'primay configuration', icon: 'fas fa-cog' },
        { name: 'network', path: 'service/network', caption: 'Networked Devices/SBCs/Computers', icon: 'fas fa-network-wired' },
        { name: 'hardware', path: 'service/hardware', caption: 'Hardware Firmware Setup', icon: 'fas fa-microchip' },
        { name: 'circuits', path: 'service/circuits', caption: 'Physical Light/Outlet Circuits Setup', icon: 'fas fa-lightbulb' },
        { name: 'switches', path: 'service/switches', caption: 'Physical and Virtual Switch Setup', icon: 'fas fa-toggle-on' },
        { name: 'security', caption: 'System User Credentials', icon: 'fa fa-shield-alt' },
        { name: 'backup', caption: 'Backup Underlying Database', icon: 'fas fa-save', disabled: true },
        { name: 'help', caption: 'Configuration Help/Docs', tip: 'this is a tip', icon: 'fas fa-info-circle' },
        { name: 'command', caption: 'Custom Command', icon: 'fas fa-chevron-right', hidden: true }
        <q-drawer show-if-above v-model="menuOpen" side="left" bordered>
          <q-drawer-menu :menu="menu" @active="(item) => active=item"/>
    import menu from 'assets/menu'
    import QDrawerMenu from 'src/components/DrawerMenu'
          menu: menu,
      components: {

  • Thank you so much, this looks really nice. I will check it further in the next couple of days as I am away at the moment.
    But this is exactly what I am looking for.

    Thanks again!

  • @bambinou just so you know this component also dependents on some dynamic font sizing otherwise it will look wonky.

    Here is my latest version of that

    @import '../../node_modules/rfs/stylus'
    // rfs settable variables - commented are defaults
    $rfs-base-font-size = 1rem
    // $rfs-font-size-unit = rem
    $rfs-breakpoint = 1400px
    // $rfs-breakpoint-unit = px
    // $rfs-factor = 10
    // $rfs-rem-value = 16
    $rfs-two-dimensional = true
    // $rfs-class = false
    $field-font-factor = 1.2  // relative to base font size
    $field-label-font-factor = 1 // relative to field font size
    $item-font-factor = 1.1  // relative to base font size
    $item-caption-font-factor = .8 // relative to item size
    $item-header-font-factor = 1.5 // relative to item size
      rfs($rfs-base-font-size * $item-font-factor)
      rfs($rfs-base-font-size * $item-font-factor * $item-header-font-factor)
      rfs($rfs-base-font-size * $field-label-font-factor * $item-caption-font-factor )
      padding-bottom .3em // needs to be dynamic based on font size
       rfs($rfs-base-font-size * $field-font-factor)
       rfs($rfs-base-font-size * $field-font-factor)
       padding-bottom .7em // needs to be dynamic based on font size
      rfs($rfs-base-font-size * $field-font-factor * $field-label-font-factor )
      padding-bottom .5em // needs to be dynamic based on font size

Log in to reply