[Solved] Q-toolbar dropdown menu possible ?



  • Hi all,

    I would like to know which component would be the best to create a dropdown menu from the Q-toolbar component like the one in Bootstrap navbar.
    Unfortunately, I can’t use Q-Tabs (with navigation slot) because of its horizontal display.

    Thanks in advance



  • Hey, curious if you ever found a solution here? I was looking to do the same thing (ideally with an avatar photo for the dropdown).



  • I do it like this:

              <q-tab
                v-if="isLoggedIn && checkFeature('settings')"
                label="Settings <i class='fas fa-caret-down' />"
                name="settings"
                slot="title"
                icon="fas fa-cogs faa-pulse"
                class="faa-parent animated-hover"
                @click="toggleSettingsPopover()"
              >
                <q-popover v-model="displaySettingsMenu">
                  <q-list item-separator link>
    
                    <q-item
                      v-if="checkFeature('settings-system')"
                      to="settings-system"
                      replace
                      v-close-overlay
                    >
                      <q-item-side left class="faa-parent animated-hover">
                        <q-item-tile icon="fas fa-cog faa-pulse" />
                      </q-item-side>
                      System
                    </q-item>
    
                    <q-item
                      v-if="checkFeature('settings-users') && isAdmin()"
                      to="settings-users"
                      replace
                      v-close-overlay
                    >
                      <q-item-side left class="faa-parent animated-hover">
                        <q-item-tile icon="fas fa-user faa-pulse" />
                      </q-item-side>
                      Users
                    </q-item>
    
                    <q-item
                      v-if="checkFeature('settings-sites') && isAdmin()"
                      to="settings-sites"
                      replace
                      v-close-overlay
                    >
                      <q-item-side left class="faa-parent animated-hover">
                        <q-item-tile icon="fas fa-map-marker faa-pulse" />
                      </q-item-side>
                      Sites
                    </q-item>
    
                    <q-item
                    v-if="checkFeature('settings-sam') && isAdmin()"
                      to="settings-sams"
                      replace
                      v-close-overlay
                    >
                      <q-item-side left class="faa-parent animated-hover">
                        <q-item-tile icon="fas fa-laptop faa-pulse" />
                      </q-item-side>
                      SAMs
                    </q-item>
    
                    <q-item
                      v-if="checkFeature('settings-hvr') && isAdmin()"
                      to="settings-hvrs"
                      replace
                      v-close-overlay
                    >
                      <q-item-side left class="faa-parent animated-hover">
                        <q-item-tile icon="fas fa-video faa-pulse" />
                      </q-item-side>
                      DCAMs/HVRs
                    </q-item>
    
                    <q-item
                      v-if="checkFeature('settings-ptz') && isAdmin()"
                      to="settings-ptzs"
                      replace
                      v-close-overlay
                    >
                      <q-item-side left class="faa-parent animated-hover">
                        <q-item-tile class="icon" icon="fas fa-ptz32 faa-pulse" />
                      </q-item-side>
                      PTZs
                    </q-item>
    
                    <q-item
                      v-if="checkFeature('settings-accessories') && isAdmin()"
                      to="settings-accessories"
                      replace
                      v-close-overlay
                      >
                      <q-item-side left class="faa-parent animated-hover">
                        <q-item-tile icon="fas fa-cubes faa-pulse" />
                      </q-item-side>
                      Accessories
                    </q-item>
    
                    <q-item
                      v-if="checkFeature('settings-analytic-control') && isAdmin()"
                      to="settings-analytic-control"
                      replace
                      v-close-overlay
                    >
                      <q-item-side left class="faa-parent animated-hover">
                        <q-item-tile icon="fas fa-microchip faa-pulse" />
                      </q-item-side>
                      Analytic Control
                    </q-item>
    
                    <q-item
                      to="themes"
                      replace
                      v-close-overlay
                    >
                      <q-item-side left class="faa-parent animated-hover">
                        <q-item-tile icon="fas fa-adjust faa-pulse" />
                      </q-item-side>
                      Themes
                    </q-item>
    
                  </q-list>
                </q-popover>
              </q-tab>
    


  • and:

        toggleSettingsPopover: function () {
          this.displaySettingsMenu = !this.displaySettingsMenu
        },
    


  • Slam dunk, thanks a million @Hawkeye64! I just switched the q-tab to a q-btn for my use case and it is working beautifully.



  • Glad to hear it!



  • I ended up modifying my approach again slightly to incorporate the ability to include an avatar into the “button”. Specific details are available here: https://forum.quasar-framework.org/topic/2602/image-in-top-dropdown-menu/2

    The short of it was to use a q-chip with avatar set to the image and no content – then use the clever popover approach above.


Locked