求助：如何使用Quasar Framework实现顶部菜单栏

Hey there! Totally get it—top navigation bars are such a fundamental part of most web apps, so it’s super frustrating when you can’t find clear examples right away. Let me break down exactly how to build a standard, responsive top menu bar using Quasar’s built-in components, since they’re designed specifically for this use case.

Core Components to Use #

Quasar doesn’t label it a "top menu" directly, but the QToolbar component is your go-to for building top navigation. Pair it with QBtn, QMenu, and QDrawer for responsive behavior, and you’ll have a polished menu in no time.

1. Basic Desktop-First Top Menu #

Here’s a simple, functional top bar with brand/logo, menu items, and a user dropdown:

<template>
  <q-layout view="hHh lpR fFf">
    <!-- Header container with shadow -->
    <q-header elevated>
      <q-toolbar>
        <!-- Brand/Logo section -->
        <q-toolbar-title>
          <q-icon name="logo-quasar" class="mr-2" />
          My Awesome App
        </q-toolbar-title>

        <!-- Push menu items to the right -->
        <q-space />

        <!-- Main menu items -->
        <q-btn flat label="Home" class="q-mx-sm" />
        <q-btn flat label="About" class="q-mx-sm" />
        <q-btn flat label="Services" class="q-mx-sm" />
        <q-btn flat label="Contact" class="q-mx-sm" />

        <!-- User dropdown menu -->
        <q-menu>
          <template v-slot:trigger>
            <q-btn flat icon="person" />
          </template>
          <q-list>
            <q-item clickable>
              <q-item-label>Profile</q-item-label>
            </q-item>
            <q-item clickable>
              <q-item-label>Logout</q-item-label>
            </q-item>
          </q-list>
        </q-menu>
      </q-toolbar>
    </q-header>

    <!-- Page content area -->
    <q-page-container>
      <q-page class="row items-center justify-center">
        <p>Your page content goes here!</p>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

2. Add Responsive Mobile Support #

For mobile devices, you’ll want to collapse the menu into a hamburger button that opens a side drawer. Here’s how to adjust the code:

<template>
  <q-layout view="hHh lpR fFf">
    <q-header elevated>
      <q-toolbar>
        <!-- Hamburger button (only visible on mobile) -->
        <q-btn flat icon="menu" @click="drawer = !drawer" class="q-md-none" />

        <q-toolbar-title>
          <q-icon name="logo-quasar" class="mr-2" />
          My Awesome App
        </q-toolbar-title>

        <q-space />

        <!-- Desktop menu (hidden on mobile) -->
        <div class="hidden-xs-down">
          <q-btn flat label="Home" class="q-mx-sm" />
          <q-btn flat label="About" class="q-mx-sm" />
          <q-btn flat label="Services" class="q-mx-sm" />
          <q-btn flat label="Contact" class="q-mx-sm" />

          <q-menu>
            <template v-slot:trigger>
              <q-btn flat icon="person" />
            </template>
            <q-list>
              <q-item clickable>
                <q-item-label>Profile</q-item-label>
              </q-item>
              <q-item clickable>
                <q-item-label>Logout</q-item-label>
              </q-item>
            </q-list>
          </q-menu>
        </div>
      </q-toolbar>
    </q-header>

    <!-- Mobile side drawer -->
    <q-drawer v-model="drawer" side="left" behavior="mobile">
      <q-list>
        <q-item clickable @click="drawer = false">
          <q-item-label>Home</q-item-label>
        </q-item>
        <q-item clickable @click="drawer = false">
          <q-item-label>About</q-item-label>
        </q-item>
        <q-item clickable @click="drawer = false">
          <q-item-label>Services</q-item-label>
        </q-item>
        <q-item clickable @click="drawer = false">
          <q-item-label>Contact</q-item-label>
        </q-item>
        <q-separator />
        <q-item clickable @click="drawer = false">
          <q-item-label>Profile</q-item-label>
        </q-item>
        <q-item clickable @click="drawer = false">
          <q-item-label>Logout</q-item-label>
        </q-item>
      </q-list>
    </q-drawer>

    <q-page-container>
      <q-page class="row items-center justify-center">
        <p>Your page content goes here!</p>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

<script setup>
import { ref } from 'vue'
const drawer = ref(false)
</script>

3. Integrate Vue Router (Optional) #

If you’re using Vue Router for navigation, replace the plain q-btn with q-router-link to add route navigation and active state highlighting:

<!-- Route link with active state -->
<q-router-link 
  flat 
  label="Home" 
  to="/" 
  class="q-mx-sm" 
  active-class="text-primary font-medium"
/>

<!-- Or use a button with router push -->
<q-btn 
  flat 
  label="About" 
  class="q-mx-sm" 
  @click="$router.push('/about')"
/>

Key Notes #

• q-header wraps the toolbar to ensure it stays fixed at the top of the page.
• elevated adds a subtle shadow for depth (you can remove it if you prefer a flat look).
• q-space is a handy component to push elements to opposite sides of the toolbar.
• Quasar’s built-in responsive classes (like q-md-none and hidden-xs-down) make it easy to show/hide elements based on screen size.

Hope this helps you build exactly the top menu you need! 😊

内容的提问来源于stack exchange，提问作者Vuzi