tailwindcss dropdown

Menú desplegable CSS de viento de cola

Un complemento para crear menús desplegables accesibles y sin JavaScript con Tailwind CSS. Esto no es un componente (aunque puede utilizar los ejemplos siguientes como modelo).

? Véalo en vivo en CodeSandbox

? Instalar

npm install tailwindcss-dropdown

En tailwind.config.js agregue dropdown a sus variantes display y requiera el complemento, así:

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

Uso

Este complemento agrega dropdown como variante para las utilidades display . Traduciendo: puede usar dropdown:block para cambiar la display de una ul secundaria a block (o cualquier otra propiedad enumerada aquí)

Depende en gran medida de la estructura de su HTML. p.ej:

Home

Support

Products

• macOS
• Windows

">

 < ul class =" flex space-x-6 " role =" navigation " >
  < li > < a href = # > Home  a >  li >
  < li > < a href = # > Support  a >  li >
  
  < li class =" relative dropdown:block " aria-haspopup =" true " >
    < a href = # > Products  a >
    
    < ul class =" hidden absolute right-0 w-auto " aria-label =" submenu " >
      < li > < a href = # > macOS  a >  li >
      < li > < a href = # > Windows  a >  li >
     ul >
   li >
 ul >

Tenga en cuenta que dropdown:block debe contener una ul como elemento secundario. Lo mismo se podría hacer con un 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 =" # " > macOS  a >  li >
    < li > < a href =" # " > Windows  a >  li >
   ul >
 button >

Más ejemplos en CodeSandbox

?‍♂️ ¿Cómo funciona?

El código para dropdown:block (y para cualquier otro valor de visualización, como dropdown:grid , etc.) se verá así:

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

Entonces, cuando el elemento con clase dropdown:block tiene el foco dentro, el ul dentro se convierte en un block .