English Espanol Japanese
Notifications
Critical alert: Server crash detected
Just now
Emiliya mentioned in you a comment
1h
Backup completed successfully
2h
Profile updated successfully
3h
Nikita sent you a friend request
Accept
2d
API updated
3d
View All
Theme
Sidebar

Dropdown

  1. Home
  3. Components
  5. Dropdown
Basic
Dropdown item Another item One more item 

<div class="inline-block relative">
 <button class="btn btn-default" type="button" data-bs-toggle="dropdown" aria-expanded="false">
  Open Dropdown
 </button>
  <div class="dropdown-menu z-50 absolute min-w-40 !start-0 top-full">
     <a href="#!" class="dropdown-item">
       Dropdown item
     </a>
     <a href="#!" class="dropdown-item">
       Another item
     </a>
     <a href="#!" class="dropdown-item">
      One more item
     </a>
  </div>
</div>
Split Icon

<!-- Example split button icon -->
<div class="inline-flex items-center relative">
    <button type="button" class="btn bg-primary h-10 !rounded-e-none text-white hover:bg-primary-deep">Danger</button>
    <div class="relative">
        <button type="button" class="btn bg-primary h-10 !rounded-s-none text-white hover:bg-primary-deep"
            data-bs-toggle="dropdown" aria-expanded="false">
            <span class="icon-[lucide--more-vertical] text-lg"></span>
        </button>
        <ul class="dropdown-menu absolute top-full min-w-40">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else</a></li>
            <li>
                <hr class="my-2 border-stone-200 dark:border-white/5">
            </li>
            <li><a class="dropdown-item" href="#">Separated link</a></li>
        </ul>
    </div>
</div>
Dropdown Icon
Dropdown item Another item One more item 

<div class="inline-block relative">
 <button class="btn btn-default" type="button" data-bs-toggle="dropdown" aria-expanded="false">
  Open Dropdown
 </button>
  <div class="dropdown-menu z-50 absolute min-w-40 !start-0 top-full">
     <a href="#!" class="dropdown-item">
      <span class="icon-[lucide--download] dropdown-icon"></span> Dropdown item
     </a>
     <a href="#!" class="dropdown-item">
      <span class="icon-[lucide--download] dropdown-icon"></span> Another item
     </a>
     <a href="#!" class="dropdown-item">
     <span class="icon-[lucide--download] dropdown-icon"></span> One more item
     </a>
  </div>
</div>
Dropdown Grid

<div class="block relative">
   <button class="btn btn-default" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      Open Dropdown
   </button>
   <div class="dropdown-menu z-50 absolute min-w-full !start-0 top-full">
      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
         <div>
            <a href="#!" class="dropdown-item">
               Dropdown item
            </a>
            <a href="#!" class="dropdown-item">
               Another item
            </a>
            <a href="#!" class="dropdown-item">
               One more item
            </a>
         </div>
         <div>
            <a href="#!" class="dropdown-item">
               Dropdown item
            </a>
            <a href="#!" class="dropdown-item">
               Another item
            </a>
            <a href="#!" class="dropdown-item">
               One more item
            </a>
         </div>
         <div>
            <a href="#!" class="dropdown-item">
               Dropdown item
            </a>
            <a href="#!" class="dropdown-item">
               Another item
            </a>
            <a href="#!" class="dropdown-item">
               One more item
            </a>
         </div>
         <div>
            <a href="#!" class="dropdown-item">
               Dropdown item
            </a>
            <a href="#!" class="dropdown-item">
               Another item
            </a>
            <a href="#!" class="dropdown-item">
               One more item
            </a>
         </div>
      </div>
   </div>
</div>