Dropdown

Import

import Dropdown from '../../components/ui/Dropdown.astro'
import DropdownItem from '../../components/ui/DropdownItem.astro'

Example

<Dropdown>
  <DropdownItem>Action</DropdownItem>
  <DropdownItem>Another action</DropdownItem>
  <DropdownItem>Something else here</DropdownItem>
</Dropdown>

Usage

Placement

Customization menu

<Dropdown>
  <DropdownItem>Action</DropdownItem>
  <DropdownItem>Another action</DropdownItem>
  <DropdownItem>Something else here</DropdownItem>
  <div class="w-full border my-2 dark:border-white/5" />
  <DropdownItem>Another action</DropdownItem>
  <DropdownItem>Something else here</DropdownItem>
</Dropdown>

Frank Esteban

@frankuxui

Dashboard Configuration Pricing

Privacy Policy Terms of Service Logout

<Dropdown>
  <header class="flex items-start p-4 gap-4">
    <figure class="relative">
      <img class="flex-none w-12 h-12" src="https://api.multiavatar.com/Binx.png" />
      <span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 border-2 border-white dark:border-gray-800 rounded-full"></span>
    </figure>
    <div class="flex flex-col">
      <h5 class="font-medium">Frank Esteban</h5>
      <span class="text-sm text-gray-600 dark:text-gray-500">@frankuxui</span>
    </div>
  </header>
  <main>
    <DropdownItem class="group">
      <span>Dashboard</span>
      <span class="invisible opacity-0 group-hover:visible transition-transform duration-300 -translate-x-3 group-hover:translate-x-0 group-hover:opacity-100">
        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h13M12 5l7 7-7 7"/></svg>
      </span>
    </DropdownItem>
    <DropdownItem>Configuration</DropdownItem>
    <DropdownItem>Pricing</DropdownItem>
    <div class="w-full border my-2 dark:border-white/5" />
    <DropdownItem>Privacy Policy</DropdownItem>
    <DropdownItem>Terms of Service</DropdownItem>
    <DropdownItem>Logout</DropdownItem>
  </main>
</Dropdown>