---
layout: layouts/component.njk
title: Dropdown Menu
description: Displays a menu to the user — such as a set of actions or functions — triggered by a button.
---

{% from "macros/code_block.njk" import code_block %}
{% from "macros/code_preview.njk" import code_preview %}
{% from "components/dropdown-menu.njk" import dropdown_menu %}

{% set code %}{% call dropdown_menu(
  id="dropdown-menu",
  trigger="Open",
  trigger_attrs={"class": "btn-outline"},
  content_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">
    {% lucide "user" %}
    Profile
    <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
  </button>
  <button type="button" role="menuitem">
    {% lucide "credit-card" %}
    Billing
    <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘B</span>
  </button>
  <button type="button" role="menuitem">
    {% lucide "settings" %}
    Settings
    <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘S</span>
  </button>
  <button type="button" role="menuitem">
    {% lucide "keyboard" %}
    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">
  {% lucide "github" %}
  GitHub
</button>
<button type="button" role="menuitem">
  {% lucide "life-buoy" %}
  Support
</button>
<button type="button" role="menuitem" disabled>
  {% lucide "cloud" %}
  API
</button>
<hr role="separator">
<button type="button" role="menuitem">
  {% lucide "log-out" %}
  Logout
  <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
</button>{% endcall %}{% endset %}
{{ code_preview("dropdown-menu", code | prettyHtml) }}

<h2 id="usage">Usage</h2>

<section class="prose my-6">
  <p>You can use one of the <code class="">btn</code> classes to style any element as a button:</p>

  <ul>
    <li>
      <b>Variants</b>: <code>btn</code> or <code>btn-primary</code> for primary
      buttons, then <code>btn-secondary</code>, <code>btn-destructive</code>, <code>btn-outline</code>,
      <code>btn-ghost</code>, <code>btn-link</code>. You can also use <code>btn-icon</code> to
      style an icon as a button, along with all of its variants (e.g. <code>btn-icon-destructive</code>).
    </li>
    <li>
      <b>Sizes</b>: <code>btn-sm</code> for small and <code>btn-lg</code> for large.
      You can combine this with other attributes, for example <code>btn-lg-destructive</code>
      or <code>btn-icon-sm-secondary</code>.
    </li>
  </ul>
</section>