Enable Hamburger Menu in Navbar in Vue 3 - 52

▶

Now let's go back to what would be our navbar that we created earlier:

Redirect 404 in Vue Router - 51

Specifically, the hamburger menu. Before we begin, it's important to remember that there was a link here, which is where we defined the hamburger button link:

<button data-collapse-toggle="navbar-default" type="button"
  class="*** md:hidden ***"
  aria-controls="navbar-default" aria-expanded="false">
  <span class="sr-only">Open main menu</span>
</button>

The Problem in Mobile Mode

So, going back to the hamburger menu, which is the one we have configured here... what's the problem?

Here, in desktop mode, everything works perfectly. The menu displays without any problems.

But when we switch to mobile mode, we have the hamburger menu. Based on what I explained earlier, what's happening here is that the md:block rule is no longer met. That class is somewhere — if we do a Control+F and search for md:block, we'll see that it's responsible for displaying the menu on desktop. Since that condition isn't met on mobile, the menu is hidden, and from there other mobile-specific rules apply.

Suppose we remove that class: notice that the menu reappears, and we can navigate again without any problem. However, I don't want the menu to be visible by default; rather, I want it to be shown or hidden when we press the hamburger button.

Mobile menu

We've already identified that the "problem" in quotes is in this hidden class we have here. So, programmatically, we have to hide or show it based on the user's criteria.

Implementing Toggle Logic

Let's handle the toggle logic directly in the component. I'll place the <script> block and the data inside:

<button @click="showMenuMobile=!showMenuMobile" data-collapse-toggle="navbar-default" type="button" ***>***</button>
***
<div class="w-full md:block md:w-auto" :class="{ 'hidden' : showMenuMobile }" id="navbar-default">
***
<script>
export default {
  data() {
    return {
      showMenuMobile: false,
    }
  },
}
</script>

Apply Conditional Classes

The next step is to configure the classes, i.e., remove or show the menu depending on the state:

<button data-collapse-toggle="navbar-default" type="button"
  class="*** md:hidden ***"
  aria-controls="navbar-default" aria-expanded="false">
  <span class="sr-only">Open main menu</span>
</button>

For this, we use :class. We may not have seen this in the course yet, but it's very useful. Vue is smart enough to evaluate the condition and automatically append or remove the class:

<div class="w-full md:block md:w-auto" :class="{ 'hidden' : showMenuMobile }" id="navbar-default">

Style Details

You can apply transitions, but that's not the focus here (this is a basic course). What we're doing is selecting the menu, which has many classes. Notice that the hidden attribute appears at the beginning, and when we click on it, it disappears, thanks to the logic we applied.

This works the same as using a conditional attribute: if it's true, it's applied; if not, it's not. Vue handles this :class attribute internally, because in HTML there can only be one class attribute per element.

What Vue does is mix static classes with dynamic ones based on the condition. You can add more conditions if necessary. For example:

:class="{ 'hidden': !showMenuMobile, 'otra-clase': otraCondicion }"