QDrawer prop: show-if-above

  • I don’t wanna display the q-drawer @initial rendering
    and I tried :show-if-above=“false” but it wouldnt work?
    Please is there a way to disable this?

  • Try using behavior = "mobile".


  • @s-molinari well, i tried your approach it works but i couldn’t control other props such overlay and breakpoint and to hide qdrawer under toolbar.
    but i found myself a quark solution:

    mounted () {
      leftDrawer = true
      setTimeout(() => {
        leftDrawer = false
       }, 0)

    Please, I would like to know if there is a better way to do this

  • Try this…

      <q-layout view="hHh lpR fFf">
        <q-header elevated class="bg-primary text-white" height-hint="98">
            <q-btn dense flat round icon="menu" @click="left = !left" />
                <img src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg">
          <q-tabs align="left">
            <q-route-tab to="/page1" label="Page One" />
            <q-route-tab to="/page2" label="Page Two" />
            <q-route-tab to="/page3" label="Page Three" />
        <q-drawer show-if-above v-model="left" side="left" bordered>
          <!-- drawer content -->
          <router-view />
        <q-footer elevated class="bg-grey-8 text-white">
                <img src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg">
    export default {
      data () {
        return {
          left: false


  • I tried the s.molinari solution but still didn’t work.
    I had to explicitly add behavior=“desktop” with :show-if-above=“false” to get it work properly.


    Hope that will save people time !


  • Thank you bago, Having :show-if-above=“false” does the job for me 🙂

  • @bago this solution worked me as the prop show-if-above had no effect.
    They should update the description to clarify more the inner workings of the flag as the current description doesn’t match:
    Force drawer to be shown on screen on initial render if the layout width is above breakpoint, regardless of v-model; This is the default behavior when SSR is taken over by client on initial render

  • @deadly Yeah I know, we should contact the dev team to address the issue properly but I had no time so far to do it.
    Will open an issue on their gitHub when I will have time. Meantime, I’m glad I saved your time ;).

Log in to reply