illustration for Build and Style a Dropdown in Tailwind

Design with Tailwind CSS MasterclassPart 4

Build and Style a Dropdown in Tailwind

Instructor

Adam Wathan
38m closed-captioning
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
4.8
254
people completed
Bookmark
Download
RSS

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.

Still Awesome

This course is direct from the library author and is still awesome even though it’s built on the previous version and there are minor API changes.

This course is part of the Design with Tailwind CSS Masterclass.

What you'll learn

  • Build and style a static dropdown menu
  • Creating keyboard accessible components
  • Best practices for mobile-first UI development

Learner Reviews

  • Learner
    2 years ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Extremely helpful course which helps me a lot to understand about how to use tailwind to create professional components like Navbar and Dropdown!

  • Learner
    3 years ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Fluent narration and useful content

  • Zhentian Wan
    3 years ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Nice course for introducing Tailwind

Course Content

38m • 4 lessons

    You might also like these resources:

    illustration for CSS Fundamentals

    CSS Fundamentals

    Tyler Clark・33m・Course

    Even the most experienced developer can learn something new when it comes to using and understanding how the browser interprets CSS. In this course, we will slowly style a website according to a mocked image

    illustration for Build Complex Layouts with CSS Grid Layout

    Build Complex Layouts with CSS Grid Layout

    Rory Smith・42m・Course

    CSS Grid layout is a two-dimensional layout method that gives you control over items in rows as well as columns. In this course we will look at multiple ways to divide the page into major regions with control of the size, position, and layer.

    illustration for Flexbox Fundamentals

    Flexbox Fundamentals

    Garth Braithwaite・18m・Course

    Flexbox is a wonderful tool built into the CSS specification. Using flexbox doesn't require any special framework or library, just a browser with CSS3 support. It is so awesome, and makes the arranging elements on a page almost fun!