Menu
- Home
- •
- Components
- •
- Menu
Basic
<div x-data="dropdown" class="relative mx-auto max-w-max">
<button @click="toggle" class="btn-default-outlined rounded-lg">Open Menu</button>
<ul x-show="isOpen" @click.outside="close" x-transition class="absolute left-0 top-full z-10 mt-1 w-40 rounded-xl border border-neutral-30 bg-neutral-0 p-2 shadow-lg dark:border-neutral-500 dark:bg-neutral-904">
<li><button @click="close" class="w-full rounded-lg px-3 py-2 text-start duration-300 hover:bg-primary-300/10 hover:text-primary-300">Profile</button></li>
<li><button @click="close" class="w-full rounded-lg px-3 py-2 text-start duration-300 hover:bg-primary-300/10 hover:text-primary-300">My Account</button></li>
<li><button @click="close" class="w-full rounded-lg px-3 py-2 text-start duration-300 hover:bg-primary-300/10 hover:text-primary-300">Logout</button></li>
</ul>
</div>
Selected
When device is locked
<div x-data="dropdown" class="relative mx-auto w-full">
<div @click="toggle" class="flex cursor-pointer items-center justify-between rounded-xl border border-neutral-30 bg-neutral-0 px-4 lg:px-6 py-4 dark:border-neutral-600 dark:bg-neutral-904">
<div>
<p class="m-text mb-1 font-medium">When device is locked</p>
<p class="text-xs" x-text="list[selected-1].title"></p>
</div>
<span :class="isOpen?'rotate-180':''" class="flex size-9 lg:size-11 items-center justify-center rounded-full border border-neutral-30 bg-neutral-20 duration-300 dark:border-neutral-500 dark:bg-neutral-903">
<i class="las la-angle-down text-lg"></i>
</span>
</div>
<ul x-show="isOpen" @click.outside="close" x-transition class="absolute left-0 top-full z-10 mt-1 w-full rounded-xl border border-neutral-30 bg-neutral-0 p-3 shadow-lg dark:border-neutral-500 dark:bg-neutral-904">
<template x-for="{id, title} in list">
<li><button :class="selected==id?'bg-primary-300/10 my-1 text-primary-300':''" @click="close,selected=id" class="block w-full rounded-lg px-3 py-2 text-start duration-300 hover:bg-primary-300/10 hover:text-primary-300 text-sm" x-text="title"></button></li>
</template>
</ul>
</div>
Max Height
<div x-data="dropdown" class="relative mx-auto max-w-max">
<button @click="toggle" class="size-12 rounded-xl border border-neutral-30 bg-neutral-0 dark:border-neutral-600 dark:bg-neutral-904">
<i class="las la-ellipsis-v text-2xl"></i>
</button>
<ul x-show="isOpen" @click.outside="close" x-transition class="absolute left-0 top-full z-10 mt-1 max-h-40 w-40 overflow-y-auto rounded-xl border border-neutral-30 bg-neutral-0 p-2 shadow-lg dark:border-neutral-500 dark:bg-neutral-904">
<li><button @click="close" class="w-full rounded-lg px-3 py-2 text-start duration-300 hover:bg-primary-300/10 hover:text-primary-300 text-sm">Profile</button></li>
<li><button @click="close" class="w-full rounded-lg px-3 py-2 text-start duration-300 hover:bg-primary-300/10 hover:text-primary-300 text-sm">My Account</button></li>
<li><button @click="close" class="w-full rounded-lg px-3 py-2 text-start duration-300 hover:bg-primary-300/10 hover:text-primary-300 text-sm">Wishlist</button></li>
<li><button @click="close" class="w-full rounded-lg px-3 py-2 text-start duration-300 hover:bg-primary-300/10 hover:text-primary-300 text-sm">Settings</button></li>
<li><button @click="close" class="w-full rounded-lg px-3 py-2 text-start duration-300 hover:bg-primary-300/10 hover:text-primary-300 text-sm">Chat</button></li>
<li><button @click="close" class="w-full rounded-lg px-3 py-2 text-start duration-300 hover:bg-primary-300/10 hover:text-primary-300 text-sm">Bookmarks</button></li>
<li><button @click="close" class="w-full rounded-lg px-3 py-2 text-start duration-300 hover:bg-primary-300/10 hover:text-primary-300 text-sm">History</button></li>
<li><button @click="close" class="w-full rounded-lg px-3 py-2 text-start duration-300 hover:bg-primary-300/10 hover:text-primary-300 text-sm">Favorites</button></li>
<li><button @click="close" class="w-full rounded-lg px-3 py-2 text-start duration-300 hover:bg-primary-300/10 hover:text-primary-300 text-sm">Logout</button></li>
</ul>
</div>