How to create a responsive navigation bar in Vue 3? Use Vue 3's Composition API to build the basic structure and implement responsive layout through CSS. 1. Create a Vue component that includes logo, link and mobile switch buttons; 2. Use ref and toggleMenu functions to control the display status of mobile menus; 3. Use CSS Flex layout to realize desktop horizontal navigation; 4. Use media queries and max-height animation to realize mobile sliding menus; 5. Add a window size listener to automatically close the mobile menu.

Creating a responsive navigation bar in Vue is a common task when building modern web applications. The goal is to make the navigation accessible and visually consistent across different screen sizes — mobile, tablet, and desktop. Below is a practical example of how to implement a responsive navbar using Vue 3 (with the Composition API) and basic CSS.

Basic Structure with Vue Components

A responsive navbar usually includes a logo, a set of links, and a toggle button for mobile screens. Here's a simple Vue component structure:

 <template>
  <nav class="navbar">
    <div class="logo">MyLogo</div>
    <button class="toggle-btn" @click="toggleMenu">
      {{ isMobileMenuOpen ? &#39;?&#39; : &#39;?&#39; }}
    </button>
    <ul class="nav-links" :class="{ open: isMobileMenuOpen }">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</template>

<script setup>
import { ref } from &#39;vue&#39;

const isMobileMenuOpen = ref(false)
const toggleMenu = () => {
  isMobileMenuOpen.value = !isMobileMenuOpen.value
}
</script>

This sets up a basic layout with a toggle button that appears on smaller screens. The toggleMenu function controls the visibility of the mobile menu.

Responsive Styling with CSS

Now, let's make this layout responsive. We'll hide the menu on mobile and show it when the toggle is clicked.

 .navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 5%;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

.nav-links a {
  text-decoration: none;
  color: #333;
}

.toggle-btn {
  display: none;
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
}

/* Mobile styles */
@media (max-width: 768px) {
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffff;
    flex-direction: column;
    align-items: center;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .nav-links.open {
    max-height: 300px;
  }

  .toggle-btn {
    display: block;
  }
}

This CSS:

• Displays the links horizontally on desktop
• Hides them on mobile and shows a toggle button
• Slides the menu in/out smoothly using max-height animation

Handling Screen Resize Events

If you want to automatically close the mobile menu when the screen is resized back to desktop width, you can add a watcher for window size changes:

 import { onMounted, onUnmounted } from 'vue'

const handleResize = () => {
  if (window.innerWidth > 768 && isMobileMenuOpen.value) {
    isMobileMenuOpen.value = false
  }
}

onMounted(() => {
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})

This ensures the mobile menu doesn't stay open when the user resizes the browser to a larger width.

Final Notes

• You can enhance this with animations, transitions, or even use a UI library like Vuetify or Bootstrap Vue for pre-built components.
• Consider accessibility by adding aria attributes to the toggle button and nav links.
• If you're using Vue Router, replace <a href="#"></a> with <router-link></router-link> for SPA navigation.

Basically that's it. With just a few lines of Vue and CSS, you've got a fully functional responsive navigation bar that adapts to different screen sizes.

The above is the detailed content of Vue example of a responsive navigation bar. For more information, please follow other related articles on the PHP Chinese website!