1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Toggle Navar Menu Links in Tailwind with Vue

    tailwindTailwind

    Now that we have the navbar set up in a static fashion, we want to make the button that was added to drop down into a menu on click.

    We'll start by adding the markup and then style that. The mark up will need to be refactored a bit so that flexbox is only affecting the navbar and not the menu that is generated. After the refactor, we'll color and size the menu with Tailwind Utility classes.

    Finally, to get the menu to show and hide on click, we'll add a Vue @click directive that will toggle component state which in turn controls Tailwind classes that control whether the menu is hidden or shown.