[Solved] Q-toolbar dropdown menu possible ?

[jctrebalag]

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

[krsyoung]

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).

[Hawkeye64]

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>

[Hawkeye64]

and:

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

[krsyoung]

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.

[Hawkeye64]

Glad to hear it!

[krsyoung]

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.