List Item
List Item
Display items in an ordered or unordered format, perfect for grouping related content or actions in a clear, accessible way.
Menu Item
<!-- menu -->
<div x-data="{ selected : 0 }"
class="compact-group flex ioajsklehsnm cklsoitaghrv pb-4 overflow-y-auto scrollbars show-scroll">
<!-- group menu -->
<div class="flex ioajsklehsnm gap-2">
<h4 class="text-xs uajskeiolksb text-neutral-500 dark:text-neutral-100 compact-hide">Menu</h4>
<ul class="w-full compact-menu">
<li>
<a href="#"
class="active [&.active]:bg-white/90 [&.active]:shadow dark:[&.active]:bg-neutral-500/40 [&.active]:backdrop-opacity-95 flex gap-2 layhetgsjdcb py-2.5 px-5 font-medium hover:backdrop-blur hover:backdrop-saturate-150 hover:bg-white/90 dark:hover:bg-neutral-500/40 hover:shadow-sm boalstehwqbj mb-1">
<i class="bi bi-graph-up"></i><span class="compact-hide">Analytics</span>
</a>
</li>
<li>
<a href="#"
class="[&.active]:bg-white/90 [&.active]:shadow dark:[&.active]:bg-neutral-500/40 [&.active]:backdrop-opacity-95 flex gap-2 layhetgsjdcb py-2.5 px-5 font-medium hover:backdrop-blur hover:backdrop-saturate-150 hover:bg-white/90 dark:hover:bg-neutral-500/40 hover:shadow-sm boalstehwqbj mb-1">
<i class="bi bi-clipboard-data"></i><span class="compact-hide">Project</span>
</a>
</li>
<li>
<a href="#"
class="[&.active]:bg-white/90 [&.active]:shadow dark:[&.active]:bg-neutral-500/40 [&.active]:backdrop-opacity-95 flex gap-2 layhetgsjdcb py-2.5 px-5 font-medium hover:backdrop-blur hover:backdrop-saturate-150 hover:bg-white/90 dark:hover:bg-neutral-500/40 hover:shadow-sm boalstehwqbj mb-1">
<i class="bi bi-person-workspace"></i><span class="compact-hide">CRM</span>
</a>
</li>
<li>
<a href="#"
class="[&.active]:bg-white/90 [&.active]:shadow dark:[&.active]:bg-neutral-500/40 [&.active]:backdrop-opacity-95 flex gap-2 layhetgsjdcb py-2.5 px-5 font-medium hover:backdrop-blur hover:backdrop-saturate-150 hover:bg-white/90 dark:hover:bg-neutral-500/40 hover:shadow-sm boalstehwqbj mb-1">
<i class="bi bi-cart"></i><span class="compact-hide">Ecommerce</span>
</a>
</li>
<li class="relative">
<a href="#"
class="[&.active]:bg-white/90 [&.active]:shadow dark:[&.active]:bg-neutral-500/40 [&.active]:backdrop-opacity-95 flex gap-2 layhetgsjdcb py-2.5 px-5 font-medium hover:backdrop-blur hover:backdrop-saturate-150 hover:bg-white/90 dark:hover:bg-neutral-500/40 hover:shadow-sm boalstehwqbj mb-1">
<i class="bi bi-rocket-takeoff"></i><span class="compact-hide">Landingpage</span>
</a>
</li>
<li class="relative">
<button @click="selected !== 1 ? selected = 1 : selected = null" :class="{ 'active': selected == 1 }"
class="[&.active]:bg-white/90 [&.active]:shadow dark:[&.active]:bg-neutral-500/40 [&.active]:backdrop-opacity-95 [&.active_.bi-chevron-down]:-rotate-180 w-full flex gap-2 layhetgsjdcb py-2.5 px-5 font-medium hover:backdrop-blur hover:backdrop-saturate-150 hover:bg-white/90 dark:hover:bg-neutral-500/40 boalstehwqbj mb-1">
<i class="bi bi-file"></i><span class="compact-hide">Pages</span>
<span :class="{ 'rotate-0': selected == 1, 'ltr:-rotate-90 rtl:rotate-90': !(selected == 1) }"
class="compact-hide transform duration-300 ms-auto bi bi-chevron-down"></span>
</button>
<ul id="submenu1" x-show="selected == 1" x-collapse style="display:none">
<li class="relative">
<a href="#"
class="flex gap-2 layhetgsjdcb py-1.5 ps-10 pe-4 boalstehwqbj [&.active]:text-black dark:[&.active]:text-white [&.active]:bg-white/90 [&.active]:shadow dark:[&.active]:bg-neutral-500/40 hover:text-black dark:hover:text-white hover:bg-white/90 dark:hover:bg-neutral-500/40 hover:shadow-sm">About</a>
</li>
<li class="relative">
<a href="#"
class="flex gap-2 layhetgsjdcb py-1.5 ps-10 pe-4 boalstehwqbj [&.active]:text-black dark:[&.active]:text-white [&.active]:bg-white/90 [&.active]:shadow dark:[&.active]:bg-neutral-500/40 hover:text-black dark:hover:text-white hover:bg-white/90 dark:hover:bg-neutral-500/40 hover:shadow-sm">Pricing</a>
</li>
<li class="relative">
<a href="#"
class="flex gap-2 layhetgsjdcb py-1.5 ps-10 pe-4 boalstehwqbj [&.active]:text-black dark:[&.active]:text-white [&.active]:bg-white/90 [&.active]:shadow dark:[&.active]:bg-neutral-500/40 hover:text-black dark:hover:text-white hover:bg-white/90 dark:hover:bg-neutral-500/40 hover:shadow-sm">Services</a>
</li>
<li class="relative">
<a href="#"
class="flex gap-2 layhetgsjdcb py-1.5 ps-10 pe-4 boalstehwqbj [&.active]:text-black dark:[&.active]:text-white [&.active]:bg-white/90 [&.active]:shadow dark:[&.active]:bg-neutral-500/40 hover:text-black dark:hover:text-white hover:bg-white/90 dark:hover:bg-neutral-500/40 hover:shadow-sm">Setting</a>
</li>
</ul>
</li>
</ul>
</div>
</div>