Building a Custom Dropdown Menu with Headless UI React and Tailwind CSS

In this video, we combine Tailwind CSS with Headless UI React to build a fully accessible dropdown menu with robust keyboard navigation support and correct ARIA attribute management.

[maurogarcia]

The attention to detail on Headless UI is remarkable. Congrats to the TailwindLabs team!

[Svish_]

Any chance of getting walkthroughs like this for the other components of headless ui as well? 🙏

[adammenczykowski]

You did a great job of stepping through the implementation. Love this library! As a Vue only developer seeing React syntax made me laugh / gasp at points!

[ulvidamirli]

I love Tailwind and everything related to it. I think we need Svelte support as well in Headless UI.

[AlejandroVivas]

Every time I realize you upload a video, I know I will learn something very important for me. Thank you, always.

I love your seamless style of explaining, great screencast! Headless UI is 😍

[mustafwm]

Transition comes with sound effect! Cool

[nubl]

Kent C Dodds deserves a lot of credit for popularising this api design with downshift

[aram]

Love that you pay attention to these a11y issues. Much less do I like react and the markup

[JimOHalloran]

I picked up the pre-release version of Headless UI and used it to provide the implementation for one of Tailwind UI's custom selects a couple of weeks ago. I'm using Vue3 and everything "just worked". When you look at the number of components required to implement a "simple" select it looks a bit overwhelming, but the control you get is pretty cool. As you'd expect (since it all comes from the same people) it mapped really easily onto the Tailwind UI sample and made everything really easily (this was about a week before Tailwind UI started publishing code samples in Vue with Headless UI).

This is really amazing work, congrats to the entire team, Tailwind CSS + Tailwind UI + Headless UI has been a total game changer for me.

[tusharpatel]

Love the work by Tailwind Team. Keep posting such awesome content.

[jimbosupernova]

I don't get why people hate on tailwind so much. This stuff is awesome!

[iamdavidwparker]

This is pretty cool, for React/Vue folks. As a Svelte person, I think some of it would be nice (aria, etc), but the things like transitions aren't needed (svelte already can do all that easily).

[johnnybravohonk]

I've literally used it today to get a nice looking (dark) dropdown and it worked great (although took 2 hours to understand and integrate).

[technikhil]

This is awesome. I always like to have controls of styles. I feel this with framer motion will be killer combination.

[techrun]

wooow, Just a single Component needs 700 Lines of CSS Code! Awesome!!

[skylerdjy]

me watching these tutorials every time they pop up on my feed just because of his energy 👁👄👁

[KeithGraves]

This is great. I would love to see a component, similar to this, as a drop down for auto complete suggestions for a search box.

[bamboooholic]

Svelte support would be dope for headless UI!

[JKhalaf]

Elm support for Headless UI would be awesome.