No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    [Solved] Q-toolbar dropdown menu possible ?

    Help
    3
    7
    4870
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • J
      jctrebalag last edited by Shone

      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

      1 Reply Last reply Reply Quote 2
      • krsyoung
        krsyoung last edited by

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

        1 Reply Last reply Reply Quote 0
        • Hawkeye64
          Hawkeye64 last edited by

          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>
          
          1 Reply Last reply Reply Quote 2
          • Hawkeye64
            Hawkeye64 last edited by

            and:

                toggleSettingsPopover: function () {
                  this.displaySettingsMenu = !this.displaySettingsMenu
                },
            
            1 Reply Last reply Reply Quote 2
            • krsyoung
              krsyoung last edited by

              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.

              1 Reply Last reply Reply Quote 1
              • Hawkeye64
                Hawkeye64 last edited by

                Glad to hear it!

                1 Reply Last reply Reply Quote 0
                • krsyoung
                  krsyoung last edited by

                  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.

                  1 Reply Last reply Reply Quote 0
                  • First post
                    Last post