DOCUMENTATION

Dropdowns

Toggle contextual overlays for displaying lists of links and more with the tailwind dropdown component.

Single button

Any single button can be turned into a dropdown toggle with the help of tailwind and Alpine Javascript. Here’s how you can put them to work with either button elements:


<div x-data="{ open: false }" class="inline-block">
    <button @click="open = ! open" class="inline-block px-6 py-2 mr-4 mt-4 md:mt-0 text-center text-white transition-all duration-500 ease-in-out bg-gray-600 border border-gray-600 rounded shadow-md hover:shadow-xl hover:bg-gray-700 focus:bg-gray-700" type="button">Dropdown Button
    <svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-5 h-5" x-bind:style="open ? 'transform: rotate(180deg);transition-duration: 500ms' : 'transform: -rotate(180deg);transition-duration: 500ms'" viewBox="0 0 512 512" fill="currentColor">
        <path d="M128 192l128 128 128-128z"></path>
    </svg> 
    </button>
    <ul x-show="open" class="z-10 py-2 absolute text-left text-gray-500 bg-white border rounded min-w-36" @click.outside="open = false" x-transition.duration.500ms>
    <li>
        <h6 class="block px-4 py-2 mb-0 text-sm text-gray-600 whitespace-nowrap">Dropdown header</h6>
    </li>
    <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Action</a></li>
    <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Another action</a></li>
    <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Something else here</a></li>
    <li>
        <hr class="mx-2 mt-1 mb-1 overflow-hidden border-t">
    </li>
    <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Separated link</a></li>
    </ul>
</div>

Split Dropdowns

The best part is you can do this with any button variant, too:


<div>
<div x-data="{ open: false }" class="relative inline-block">
    <div class="flex mt-4">
        <button class="inline-block px-6 py-2 text-center text-white transition-all duration-500 ease-in-out bg-blue-500 border border-blue-500 rounded-l shadow-md hover:shadow-xl hover:bg-blue-600 focus:bg-blue-600">Primary</button>
        <button type="button" @click="open = ! open" class="inline-block px-6 py-2 mr-4 text-center text-white transition-all duration-500 ease-in-out bg-blue-500 border border-blue-500 rounded-r shadow-md hover:shadow-xl hover:bg-blue-600 focus:bg-blue-600">
            <svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-5 h-5" x-bind:style="open ? 'transform: rotate(180deg);transition-duration: 500ms' : 'transform: -rotate(180deg);transition-duration: 500ms'" viewBox="0 0 512 512" fill="currentColor" style="transform: -rotate(180deg);transition-duration: 500ms">
                <path d="M128 192l128 128 128-128z"></path>
            </svg>
        </button>
    </div>
    <ul x-show="open" @click.outside="open = false" x-transition.duration.500ms="" class="z-10 absolute py-2 -right-24 text-gray-500 bg-white border rounded min-w-36" style="display: none;">
        <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Action</a></li>
        <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Another action</a></li>
        <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Something else here</a></li>
    </ul>
</div>
<div x-data="{ open: false }" class="relative inline-block">
    <div class="flex mt-4">
        <button class="inline-block px-6 py-2 text-center text-white transition-all duration-500 ease-in-out bg-gray-600 border border-gray-600 rounded-l shadow-md hover:shadow-xl hover:bg-gray-700 focus:bg-gray-700">Secondary</button>
        <button type="button" @click="open = ! open" class="inline-block px-6 py-2 mr-4 text-center text-white transition-all duration-500 ease-in-out bg-gray-600 border border-gray-600 rounded-r shadow-md hover:shadow-xl hover:bg-gray-700 focus:bg-gray-700">
            <svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-5 h-5" x-bind:style="open ? 'transform: rotate(180deg);transition-duration: 500ms' : 'transform: -rotate(180deg);transition-duration: 500ms'" viewBox="0 0 512 512" fill="currentColor" style="transform: -rotate(180deg);transition-duration: 500ms">
                <path d="M128 192l128 128 128-128z"></path>
            </svg>
        </button>
    </div>
    <ul x-show="open" @click.outside="open = false" x-transition.duration.500ms="" class="z-10 absolute -right-24 py-2 text-left text-gray-500 bg-white border rounded min-w-36" style="display: none;">
        <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Action</a></li>
        <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Another action</a></li>
        <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Something else here</a></li>
    </ul>
</div>
<div x-data="{ open: false }" class="relative inline-block">
    <div class="flex mt-4">
        <button class="inline-block px-6 py-2 text-center text-white transition-all duration-500 ease-in-out bg-green-500 border border-green-500 rounded-l shadow-md hover:shadow-xl hover:bg-green-600 focus:bg-green-600">Success</button>
        <button type="button" @click="open = ! open" class="inline-block px-6 py-2 mr-4 text-center text-white transition-all duration-500 ease-in-out bg-green-500 border border-green-500 rounded-r shadow-md hover:shadow-xl hover:bg-green-600 focus:bg-green-600">
            <svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-5 h-5" x-bind:style="open ? 'transform: rotate(180deg);transition-duration: 500ms' : 'transform: -rotate(180deg);transition-duration: 500ms'" viewBox="0 0 512 512" fill="currentColor" style="transform: -rotate(180deg);transition-duration: 500ms">
                <path d="M128 192l128 128 128-128z"></path>
            </svg>
        </button>
    </div>
    <ul x-show="open" @click.outside="open = false" x-transition.duration.500ms="" class="z-10 absolute -right-24 py-2 text-left text-gray-500 bg-white border rounded min-w-36" style="display: none;">
        <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Action</a></li>
        <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Another action</a></li>
        <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Something else here</a></li>
    </ul>
</div>
<div x-data="{ open: false }" class="relative inline-block">
    <div class="flex mt-4">
        <button type="button" class="inline-block px-6 py-2 text-center text-white transition-all duration-500 ease-in-out border rounded-l shadow-md bg-cyan-500 border-cyan-500 hover:shadow-xl hover:bg-cyan-600 focus:bg-cyan-600">Info</button>
        <button type="button" class="inline-block px-6 py-2 mr-4 text-center text-white transition-all duration-500 ease-in-out border rounded-r shadow-md bg-cyan-500 border-cyan-500 hover:shadow-xl hover:bg-cyan-600 focus:bg-cyan-600" @click="open = ! open">
            <svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-5 h-5" x-bind:style="open ? 'transform: rotate(180deg);transition-duration: 500ms' : 'transform: -rotate(180deg);transition-duration: 500ms'" viewBox="0 0 512 512" fill="currentColor" style="transform: -rotate(180deg);transition-duration: 500ms">
                <path d="M128 192l128 128 128-128z"></path>
            </svg>
        </button>
    </div>
    <ul x-show="open" @click.outside="open = false" x-transition.duration.500ms="" class="z-10 absolute -right-24 py-2 text-left text-gray-500 bg-white border rounded min-w-36" style="display: none;">
        <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Action</a></li>
        <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Another action</a></li>
        <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Something else here</a></li>
    </ul>
</div>
<div x-data="{ open: false }" class="relative inline-block">
    <div class="flex mt-4">
        <button type="button" class="inline-block px-6 py-2 text-center text-white transition-all duration-500 ease-in-out bg-orange-500 border border-orange-500 rounded-l shadow-md hover:shadow-xl hover:bg-orange-600 focus:bg-orange-600">Warning</button>
        <button type="button" class="inline-block px-6 py-2 mr-4 text-center text-white transition-all duration-500 ease-in-out bg-orange-500 border border-orange-500 rounded-r shadow-md hover:shadow-xl hover:bg-orange-600 focus:bg-orange-600" @click="open = ! open">
            <svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-5 h-5" x-bind:style="open ? 'transform: rotate(180deg);transition-duration: 500ms' : 'transform: -rotate(180deg);transition-duration: 500ms'" viewBox="0 0 512 512" fill="currentColor" style="transform: -rotate(180deg);transition-duration: 500ms">
                <path d="M128 192l128 128 128-128z"></path>
            </svg>
        </button>
    </div>
    <ul x-show="open" @click.outside="open = false" x-transition.duration.500ms="" class="z-10 absolute -right-24 py-2 text-left text-gray-500 bg-white border rounded min-w-36" style="display: none;">
        <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Action</a></li>
        <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Another action</a></li>
        <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Something else here</a></li>
    </ul>
</div>
<div x-data="{ open: false }" class="relative inline-block">
    <div class="flex mt-4">
        <button class="inline-block px-6 py-2 text-center text-white transition-all duration-500 ease-in-out bg-red-500 border border-red-500 rounded-l shadow-md hover:shadow-xl hover:bg-red-600 focus:bg-red-600">Danger</button>
        <button type="button" @click="open = ! open" class="inline-block px-6 py-2 mr-4 text-center text-white transition-all duration-500 ease-in-out bg-red-500 border border-red-500 rounded-r shadow-md hover:shadow-xl hover:bg-red-600 focus:bg-red-600">
            <svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-5 h-5" x-bind:style="open ? 'transform: rotate(180deg);transition-duration: 500ms' : 'transform: -rotate(180deg);transition-duration: 500ms'" viewBox="0 0 512 512" fill="currentColor" style="transform: -rotate(180deg);transition-duration: 500ms">
                <path d="M128 192l128 128 128-128z"></path>
            </svg>
        </button>
    </div>
    <ul x-show="open" @click.outside="open = false" x-transition.duration.500ms="" class="z-10 absolute -right-24 py-2 text-left text-gray-500 bg-white border rounded min-w-36" style="display: none;">
        <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Action</a></li>
        <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Another action</a></li>
        <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Something else here</a></li>
    </ul>
</div>
</div>

Sizing

Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.


<div class="flex justify-between items-center flex-wrap">
<div x-data="{ open: false }" class="inline-block">
    <button class="inline-block px-4 py-1 mr-4 text-sm text-center text-white transition-all duration-500 ease-in-out bg-gray-600 border border-gray-600 rounded shadow-md hover:shadow-xl hover:bg-gray-700 focus:bg-gray-700" type="button" @click="open = ! open"> Dropdown Button
    <svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-5 h-5" x-bind:style="open ? 'transform: rotate(180deg);transition-duration: 500ms' : 'transform: -rotate(180deg);transition-duration: 500ms'" viewBox="0 0 512 512" fill="currentColor">
    <path d="M128 192l128 128 128-128z"></path>
    </svg>
    </button>
    <ul x-show="open" class="z-10 py-2 absolute text-left text-gray-500 bg-white border rounded min-w-36" @click.outside="open = false" x-transition.duration.500ms>
    <li>
        <h6 class="block px-4 py-2 mb-0 text-sm text-gray-600 whitespace-nowrap">Dropdown header</h6>
    </li>
    <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Action</a></li>
    <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Another action</a></li>
    <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Something else here</a></li>
    <li>
        <hr class="mx-2 mt-1 mb-1 overflow-hidden border-t">
    </li>
    <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Separated link</a></li>
    </ul>
</div>
<div x-data="{ open: false }" class="inline-block">
    <button @click="open = ! open" class="inline-block px-6 py-2 mr-4 mt-4 md:mt-0 text-center text-white transition-all duration-500 ease-in-out bg-gray-600 border border-gray-600 rounded shadow-md hover:shadow-xl hover:bg-gray-700 focus:bg-gray-700" type="button">Dropdown Button
    <svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-5 h-5" x-bind:style="open ? 'transform: rotate(180deg);transition-duration: 500ms' : 'transform: -rotate(180deg);transition-duration: 500ms'" viewBox="0 0 512 512" fill="currentColor">
        <path d="M128 192l128 128 128-128z"></path>
    </svg> 
    </button>
    <ul x-show="open" class="z-10 py-2 absolute text-left text-gray-500 bg-white border rounded min-w-36" @click.outside="open = false" x-transition.duration.500ms>
    <li>
        <h6 class="block px-4 py-2 mb-0 text-sm text-gray-600 whitespace-nowrap">Dropdown header</h6>
    </li>
    <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Action</a></li>
    <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Another action</a></li>
    <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Something else here</a></li>
    <li>
        <hr class="mx-2 mt-1 mb-1 overflow-hidden border-t">
    </li>
    <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Separated link</a></li>
    </ul>
</div>
<div x-data="{ open: false }" class="inline-block">
    <button @click="open = ! open" class="inline-block px-6 py-2 mr-4 mt-4 md:mt-0 text-xl text-center text-white transition-all duration-500 ease-in-out bg-gray-600 border border-gray-600 rounded shadow-md hover:shadow-xl hover:bg-gray-700 focus:bg-gray-700" type="button">Dropdown Button
    <svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-5 h-5" x-bind:style="open ? 'transform: rotate(180deg);transition-duration: 500ms' : 'transform: -rotate(180deg);transition-duration: 500ms'" viewBox="0 0 512 512" fill="currentColor">
        <path d="M128 192l128 128 128-128z"></path>
    </svg>
    </button>
    <ul x-show="open" class="z-10 py-2 absolute text-left text-gray-500 bg-white border rounded min-w-36"
    @click.outside="open = false" x-transition.duration.500ms>
    <li>
        <h6 class="block px-4 py-2 mb-0 text-sm text-gray-600 whitespace-nowrap">Dropdown header
        </h6>
    </li>
    <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Action</a></li>
    <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Another action</a></li>
    <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Something else here</a></li>
    <li>
        <hr class="mx-2 mt-1 mb-1 overflow-hidden border-t">
    </li>
    <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Separated link</a></li>
    </ul>
</div>
</div>

Dropup

By default the positioning is set to the top side of the button.


<div x-data="{ open: false }" class="relative inline-block mb-4">
    <button @click="open = ! open" class="inline-block px-6 py-2 mr-4 text-center text-white transition-all duration-500 ease-in-out bg-gray-600 border border-gray-600 rounded shadow-md hover:shadow-xl hover:bg-gray-700 focus:bg-gray-700" type="button">Dropup button
        <svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-4 h-4 mb-1" x-bind:style="open ? 'transform: rotate(180deg);transition-duration: 500ms' : 'transform: -rotate(180deg);transition-duration: 500ms'" viewBox="0 0 256 256" fill="currentColor" style="transform: -rotate(180deg);transition-duration: 500ms">
            <path d="M213.65674,154.34326l-80-80a8,8,0,0,0-11.31348,0l-80,80A7.99981,7.99981,0,0,0,48,168H208a7.99981,7.99981,0,0,0,5.65674-13.65674Z"></path>
        </svg>
    </button>
    <ul x-show="open" x-transition.duration.500ms="" class="absolute bottom-10 mb-1 py-2 text-left text-gray-500 bg-white border rounded min-w-36" @click.outside="open = false" style="display: none;">
        <li>
            <h6 class="block px-4 py-1 mb-0 text-sm text-gray-600 whitespace-nowrap">Dropdown header</h6>
        </li>
        <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Action</a></li>
        <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Another action</a></li>
        <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Something else here</a></li>
        <li>
            <hr class="mx-2 overflow-hidden border-t mt-1 mb-1">
        </li>
        <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Separated link</a></li>
    </ul>
</div>

Dropright

By default the positioning is set to the right side of the button.


<div x-data="{ open: false }" class="relative inline-block">
    <button @click="open = ! open" class="inline-block px-6 py-2 mr-4 mb-4 text-center text-white transition-all duration-500 ease-in-out bg-gray-600 border border-gray-600 rounded shadow-md hover:shadow-xl hover:bg-gray-700 focus:bg-gray-700" type="button">Dropend button
        <svg class="inline-block w-4 h-4 mb-1" x-bind:style="open ? 'transform: rotate(180deg);transition-duration: 500ms' : 'transform: -rotate(180deg);transition-duration: 500ms'" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" style="transform: -rotate(180deg);transition-duration: 500ms">
            <path d="M181.65674,122.34277l-80-80A8.0001,8.0001,0,0,0,88,48V208a8.00018,8.00018,0,0,0,13.65674,5.65723l80-80A8.00034,8.00034,0,0,0,181.65674,122.34277Z"></path>
        </svg>
    </button>
    <ul x-show="open" class="z-10 absolute top-0 md:left-44 left-28 ml-3 px-2 text-left text-gray-500 bg-white border rounded min-w-36" @click.outside="open = false" x-transition.duration.500ms="" style="display: none;">
        <li>
            <h6 class="block px-4 py-1 mb-0 text-sm text-gray-600 whitespace-nowrap">Dropdown header</h6>
        </li>
        <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Action</a></li>
        <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Another action</a></li>
        <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Something else here</a></li>
        <li>
            <hr class="mx-2 overflow-hidden border-t mt-1 mb-1">
        </li>
        <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Separated link</a></li>
    </ul>
</div>

Dropleft

By default the positioning is set to the left side of the button.


<div x-data="{ open: false }" class="relative inline-block">
    <button @click="open = ! open" class="inline-block px-6 py-2 mr-4 text-center text-white transition-all duration-500 ease-in-out bg-gray-600 border border-gray-600 rounded shadow-md hover:shadow-xl hover:bg-gray-700 focus:bg-gray-700" type="button">
        <svg class="inline-block w-4 h-4 mb-1" x-bind:style="open ? 'transform: rotate(180deg);transition-duration: 500ms' : 'transform: -rotate(180deg);transition-duration: 500ms'" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" style="transform: -rotate(180deg);transition-duration: 500ms">
            <path d="M163.06152,40.60889a8.00159,8.00159,0,0,0-8.71826,1.73388l-80,80a8.00034,8.00034,0,0,0,0,11.31446l80,80A8.0001,8.0001,0,0,0,168,208V48A8.00065,8.00065,0,0,0,163.06152,40.60889Z"></path>
        </svg>Dropstart button
    </button>
    <ul x-show="open" x-transition.duration.500m class="absolute md:right-52 right-16 z-10 mr-0.25 top-0 text-left py-2 text-gray-500 bg-white border rounded min-w-36" @click.outside="open = false" style="display: none;">
        <li>
            <h6 class="block px-4 py-1 mb-0 text-sm text-gray-600 whitespace-nowrap">Dropdown header</h6>
        </li>
        <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Action</a></li>
        <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Another action</a></li>
        <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Something else here</a></li>
        <li>
            <hr class="mx-2 overflow-hidden border-t mt-1 mb-1">
        </li>
        <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Separated link</a></li>
    </ul>
</div>

Dropdown

By default the positioning is set to the bottom side of the button.


<div x-data="{ open: false }" class="relative inline-block">
    <button @click="open = ! open" class="inline-block px-6 py-2 mt-4 mr-4 text-center text-white transition-all duration-500 ease-in-out bg-gray-600 border border-gray-600 rounded shadow-md hover:shadow-xl hover:bg-gray-700 focus:bg-gray-700" type="button">End-aligned menu
        <svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-5 h-5" x-bind:style="open ? 'transform: rotate(180deg);transition-duration: 500ms' : 'transform: -rotate(180deg);transition-duration: 500ms'" viewBox="0 0 512 512" fill="currentColor" style="transform: -rotate(180deg);transition-duration: 500ms">
            <path d="M128 192l128 128 128-128z"></path>
        </svg>
    </button>
    <ul x-show="open" class="absolute right-4 z-10 text-left py-2 text-gray-500 bg-white border rounded min-w-36" @click.outside="open = false" x-transition.duration.500ms="" style="display: none;">
        <li>
            <h6 class="block px-4 py-1 mb-0 text-sm text-gray-600 whitespace-nowrap">Dropdown header</h6>
        </li>
        <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Action</a></li>
        <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Another action</a></li>
        <li>
            <hr class="mx-2 overflow-hidden border-t mt-1 mb-1">
        </li>
        <li><a class="block w-full px-4 py-1 text-gray-600 bg-transparent whitespace-nowrap" href="#">Separated link</a></li>
    </ul>
</div>

Previous Next

Updated on February 28, 2022

Was this page helpful?