Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

egghead.io

Build and Style a Dropdown in Tailwind

via egghead.io

Overview

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.

Syllabus

  • Style the Basic Dropdown Elements with Tailwind
  • Use Absolute Positioning to Position a Tailwind Styled Dropdown Area in a Navbar
  • Make a Tailwind Styled Dropdown Interactive
  • Redesign a Dropdown List for Mobile with Tailwind

Taught by

Adam Wathan

Reviews

4.8 rating at egghead.io based on 31 ratings

Start your review of Build and Style a Dropdown in Tailwind

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.