##### Recently Browses

- Apps Api
- Dashboard Marketing

##### Memebers

- Ethan Smith Backend Developer
- Isabella Garcia Digital Marketer
- Noah Walker Full Stack Developer

##### Filters

- customers:
  All customers list
- products:
  Bestselling products
- events:
  All upcoming events

## Dropdown

1. Home
3. Components
5. Dropdown

##### Basic

    <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-zinc-200 dark:border-white/5">
                </li>
                <li><a class="dropdown-item" href="#">Separated link</a></li>
            </ul>
        </div>
    </div>

##### Dropdown Icon

    <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>