Build and Style a Dropdown in Tailwind
Offered By: egghead.io
Course Description
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.
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
Related Courses
Architect an Extensible Digital Garden with Next.js, Tailwind, and Nxegghead.io Build a Responsive Navbar with Tailwind
egghead.io Build User Interfaces by Composing CSS Utility Classes with Tailwind
egghead.io Craft Scalable, Custom-Made Interfaces with Tailwind CSS
egghead.io Design and Implement Common Tailwind Components
egghead.io