tailwindcss dropdown

Tailwind CSS Dropdown

A plugin to create accessible, JavaScript free dropdowns with Tailwind CSS. This is not a component (although you can use the examples below as a blueprint).

? See it live on CodeSandbox

? Install

npm install tailwindcss-dropdown

In tailwind.config.js add dropdown to your display variants and require the plugin, like this:

module.exports = {
  theme: {},
  variants: {
    display: ['responsive', 'dropdown']
  },
  plugins: [require('tailwindcss-dropdown')],
}

Usage

This plugin adds dropdown as a variant for display utilities. Translating: you can use dropdown:block to change the display of a child ul to block (or any other property listed here)

It depends heavily on the structure of your HTML. eg:

Home

Support

Products

• macOS
• Windows

">

<ul class="flex space-x-6" role="navigation">
  <li><a href=#>Homea>li>
  <li><a href=#>Supporta>li>
  
  <li class="relative dropdown:block" aria-haspopup="true">
    <a href=#>Productsa>
    
    <ul class="hidden absolute right-0 w-auto" aria-label="submenu">
      <li><a href=#>macOSa>li>
      <li><a href=#>Windowsa>li>
    ul>
  li>
ul>

Note that dropdown:block must contain a ul as child. The same could be done with a button:

Products

• macOS
• Windows

">

<button class="relative dropdown:block" role="navigation" aria-haspopup="true">
  Products
  
  <ul class="absolute right-0 hidden w-auto" aria-label="submenu">
    <li><a href="#">macOSa>li>
    <li><a href="#">Windowsa>li>
  ul>
button>

More examples on CodeSandbox

?‍♂️ How it works?

The code for dropdown:block (and for every other display value, like dropdown:grid, etc) will look like this:

.dropdown:block:focus-within > ul {
  display: block;
}

So, when the element with class dropdown:block has focus within, the ul inside it turns into a block.