basecoat/docs/_includes/dropdown.njk

<section id="dropdown" class="w-full rounded-lg border">
  <header class="border-b px-4 py-3">
    <h2 class="text-sm font-medium">Dropdown</h2>
  </header>
  <div class="p-4">
    <div class="flex flex-wrap items-start gap-4">
      {% call dropdown(
        id="dropdown-menu",
        trigger="Open Menu",
        trigger_attrs={"class": "btn-outline"},
        menu_attrs={"class": "min-w-56"}
      ) %}
        <div role="group" aria-labelledby="account-options">
          <span id="account-options" role="heading">Account Options</span>
          <button type="button" role="menuitem">
            Profile
            <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
          </button>
          <button type="button" role="menuitem">
            Billing
            <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘B</span>
          </button>
          <button type="button" role="menuitem">
            Settings
            <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘S</span>
          </button>
          <button type="button" role="menuitem">
            Keyboard shortcuts
            <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘K</span>
          </button>
        </div>
        <hr role="separator">
        <button type="button" role="menuitem">GitHub</button>
        <button type="button" role="menuitem">Support</button>
        <button type="button" role="menuitem" disabled>API</button>
        <hr role="separator">
        <button type="button" role="menuitem">
          Logout
          <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
        </button>
      {% endcall %}

      {% set profile_menu %}
        <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
          <img src="https://avatar.vercel.sh/ronan_berder" class="size-8 shrink-0 rounded-full" alt="Ronan Berder"/>
          <div class="grid flex-1 text-left text-sm leading-tight">
            <span class="truncate font-semibold">hunvreus</span>
            <span class="text-muted-foreground truncate text-xs">hunvreus@example.com</span>
          </div>
        </div>
        <hr role="separator">
        <button type="button" role="menuitem">
          {% lucide "star" %}
          Upgrade to Pro
        </button>
        <hr role="separator">
        <button type="button" role="menuitem">
          {% lucide "user" %}
          Account
        </button>
        <button type="button" role="menuitem">
          {% lucide "credit-card" %}
          Billing
        </button>
        <button type="button" role="menuitem">
          {% lucide "bell" %}
          Notifications
        </button>
        <hr role="separator">
        <div role="group" aria-labelledby="theme-options">
          <span id="theme-options" role="heading">Theme</span>
          <button type="button" role="menuitem">
            {% lucide "check", { "class": "text-foreground" } %}
            Light
          </button>
          <button type="button" role="menuitem" >
            {% lucide "check", { "class": "text-transparent" } %}
            Dark
          </button>
          <button type="button" role="menuitem">
            {% lucide "check", { "class": "text-transparent" } %}
            System
          </button>
        </div>
        <hr role="separator">
        <button type="button" role="menuitem">
          {% lucide "log-out" %}
          Signout
        </button>
      {% endset %}

      {% set trigger %}
        <img src="https://avatar.vercel.sh/ronan_berder" class="size-8 shrink-0 rounded-full" alt="Ronan Berder"/>
        <div class="grid flex-1 text-left text-sm leading-tight">
          <span class="truncate font-semibold">hunvreus</span>
          <span class="text-muted-foreground truncate text-xs">hunvreus@example.com</span>
        </div>
        {% lucide "chevrons-up-down", { "class": "text-muted-foreground ml-auto" } %}
      {% endset %}
      {% call dropdown(
        id="dropdown-checkboxes",
        trigger=trigger,
        trigger_attrs={"class": "btn-outline h-12 justify-start px-2 md:max-w-[200px]"}
      ) %}
        {{ profile_menu | safe }}
      {% endcall %}

      {% set trigger %}
        <img src="https://avatar.vercel.sh/ronan_berder" class="size-8 shrink-0 rounded-full" alt="Ronan Berder"/>
      {% endset %}
      {% call dropdown(
        id="dropdown-checkboxes",
        trigger=trigger,
        trigger_attrs={"class": "btn-icon-ghost rounded-full size-8"}
      ) %}
        {{ profile_menu | safe }}
      {% endcall %}

      {% set trigger %}
        {% lucide "ellipsis" %}
      {% endset %}
      {% call dropdown(
        id="dropdown-checkboxes",
        trigger=trigger,
        trigger_attrs={"class": "btn-icon-ghost"},
        menu_attrs={"class": "min-w-32"}
      ) %}
        <button type="button" role="menuitem">
          {% lucide "pencil" %}
          Edit
        </button>
        <button type="button" role="menuitem">
          {% lucide "share" %}
          Share
        </button>
        <hr role="separator">
        <button type="button" role="menuitem" class="text-destructive hover:bg-destructive/10 dark:hover:bg-destructive/20 focus:bg-destructive/10 dark:focus:bg-destructive/20 focus:text-destructive [&_svg]:!text-destructive">
          {% lucide "trash-2" %}
          Delete
        </button>
      {% endcall %}
    </div>
  </div>
</section>