A menu dropdown is a common component that you will build and style in any application.

In this course, we'll start from scratch, build and style a static dropdown menu and then add functionality to the component so you can open and close the dropdown. There are some keyboard accessibility topics we'll cover when adding interactivity to the dropdown. We'll use Vue in this example but these concepts will apply to any framework. 

After the drop down is fully functional and styled properly, we'll see how sometimes you need to rethink the design of a component when considering the mobile view. For this case, the dropdown is removed entirely and the links shown inline underneath the navbar content.

A menu dropdown is a common component that you will build and style in any application. In this lesson, we'll start by building a dropdown defining the HTML structure with a profile picture image as a button and links that one would likely find in a dropdown.

After the structure is defined, we'll style the the image to be a round button with a nice border outline. The links will be displayed below stacked atop eachother with a fixed width and nice hover effect.

Style the Basic Dropdown Elements with Tailwind

In [Build a Responsive Navbar with Tailwind](https://egghead.io/playlists/build-a-responsive-navbar-with-tailwind-4d328a35), we built a navbar that we'll use to start out this lesson and drop our account info button and dropdown.

We'll see that adding the dropdown to the navbar won't just work - the positioning is a little off and the navbar is expanding to contain the dropdown as well. We'll see how `absolute` positioning solves this issue for us when we anchor it's position to the button it's associated with (by making that button a "positioned" element with `relative`)

Use Absolute Positioning to Position a Tailwind Styled Dropdown Area in a Navbar

The dropdown looks great but right now it's completely static - it's stuck in an open position. For it to be complete, we'll want to be able to toggle it open and closed.

To do that, we'll add some Vue specific that will track an `isOpen` variable in the component state that we'll use to open and close the dropdown. After that we'll hook up a click handler to the button to do just that, close and open the dropdown. 

Once that is done, we'll handle the case where a user clicks outside of the dropdown to close it as well as add a keyboard accessible variant to close the dropdown

Make a Tailwind Styled Dropdown Interactive

The dropdown looks great on desktop sized screens but is kind of a mess on mobile. To fix that we'll need to rethink the design of the drop down for the mobile space.

In this lesson, we'll create a duplicate acount link list and remove the dropdown functionality in preference of showing the account links inline with the other navbar links on mobile with clear separation between the two lists.

Build and Style a Dropdown in Tailwind

Instructor

Course content (4 lessons)

Instructor