tailwindcss dropdown

Menu suspenso CSS do Tailwind

Um plugin para criar menus suspensos acessíveis e gratuitos de JavaScript com Tailwind CSS. Este não é um componente (embora você possa usar os exemplos abaixo como modelo).

? Veja ao vivo no CodeSandbox

? Instalar

npm install tailwindcss-dropdown

Em tailwind.config.js adicione dropdown às suas variantes display e exija o plugin, assim:

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

Uso

Este plugin adiciona dropdown como uma variante para utilitários display . Traduzindo: você pode usar dropdown:block para alterar a display de um filho ul para block (ou qualquer outra propriedade listada aqui)

Depende muito da estrutura do seu HTML. por exemplo:

 < ul class =" flex space-x-6 " role =" navigation " >
  < li > < a href = # > Home </ a > </ li >
  < li > < a href = # > Support </ a > </ li >
  <!-- 1) dropdown:block -->
  < li class =" relative dropdown:block " aria-haspopup =" true " >
    < a href = # > Products </ a >
    <!-- 2) will transform this ul in a block when focused -->
    < 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 >

Observe que dropdown:block deve conter um ul como filho. O mesmo poderia ser feito com um button :

 <!-- 1) dropdown:block -->
< button class =" relative dropdown:block " role =" navigation " aria-haspopup =" true " >
  Products
  <!-- 2) will transform this ul in a block when focused -->
  < 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 >

Mais exemplos no CodeSandbox

?‍♂️ Como funciona?

O código para dropdown:block (e para todos os outros valores de exibição, como dropdown:grid , etc) será parecido com este:

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

Então, quando o elemento com classe dropdown:block tem foco dentro, o ul dentro dele se transforma em um block .