Logo

mistral ui

Dropdown

Simple dropdown/dropup menu with key navigation.

PREVIEW
HTML 


    <div x-data="{ open: false  }" class="relative">
        <button @click="open = !open" aria-expanded="false" class="bg-blue-400 text-white px-4 py-2 rounded-lg font-semibold hover:brightness-110 flex items-center whitespace-nowrap">
            Dropdown button
            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 inline ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M5 10l7 7 7-7"></path></svg>
        </button>
        <ul x-show="open" x-cloak x-trap="open" @click.outside="open = false" @keydown.escape.window="open = false" x-transition:enter=" ease-[cubic-bezier(.3,2.3,.6,1)] duration-200" x-transition:enter-start="!opacity-0 !mt-0" x-transition:enter-end="!opacity-1 !mt-3" x-transition:leave=" ease-out duration-200" x-transition:leave-start="!opacity-1 !mt-3" x-transition:leave-end="!opacity-0 !mt-0" class="absolute bg-white rounded-lg shadow-lg py-3 w-max z-10 mt-3">
            <li><a class="px-4 py-2 flex gap-2 items-center outline-0 focus:bg-neutral-100 hover:bg-neutral-100 whitespace-nowrap" href="#">Action</a></li>
            <li><a class="px-4 py-2 flex gap-2 items-center outline-0 focus:bg-neutral-100 hover:bg-neutral-100 whitespace-nowrap" href="#">Another action</a></li>
            <li><a class="px-4 py-2 flex gap-2 items-center outline-0 focus:bg-neutral-100 hover:bg-neutral-100 whitespace-nowrap" href="#">Something else here very long</a></li>
        </ul>
    </div>

Dropup

PREVIEW
HTML 

    <div x-data="{ open: false  }" class="relative">
        <button @click="open = !open" aria-expanded="false" class="bg-blue-400 text-white px-4 py-2 rounded-lg font-semibold hover:brightness-110 flex items-center whitespace-nowrap">
            Dropup button
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-5 h-5 inline ml-1"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 14l7-7 7 7"></path></svg>
        </button>
        <ul x-show="open" x-trap="open" @click.outside="open = false" @keydown.escape.window="open = false" x-transition:enter=" ease-[cubic-bezier(.3,2.3,.6,1)] duration-200" x-transition:enter-start="!opacity-0 !mt-0" x-transition:enter-end="!opacity-1 !-mt-3" x-transition:leave=" ease-out duration-200" x-transition:leave-start="!opacity-1 !-mt-3" x-transition:leave-end="!opacity-0 !mt-0" class="absolute bg-white rounded-lg shadow-lg py-3 w-max z-10 -mt-3 top-0 -translate-y-full">
            <li><a class="px-4 py-2 flex gap-2 items-center outline-0 focus:bg-neutral-100 hover:bg-neutral-100 whitespace-nowrap" href="#">Action</a></li>
            <li><a class="px-4 py-2 flex gap-2 items-center outline-0 focus:bg-neutral-100 hover:bg-neutral-100 whitespace-nowrap" href="#">Another action</a></li>
            <li><a class="px-4 py-2 flex gap-2 items-center outline-0 focus:bg-neutral-100 hover:bg-neutral-100 whitespace-nowrap" href="#">Something else here very long</a></li>
        </ul>
    </div>

How to use it

Copy the code above into your project and modify the list items links.

You can replace the button with any element you want, just make sure to add the @click="open = !open" attribute to it.

Designed by @Zraly.