Dropdowns

Click trigger to toggle a menu panel; closes on click-away or Escape.

Preview

React preview

LiveView (HEEx)

alias DesignSystem.UI.{Buttons, Dropdowns}

<Dropdowns.dropdown id="user-menu">
  <:trigger>
    <Buttons.button variant="secondary">
      Options
      <.icon name="hero-chevron-down-mini" class="-mr-1 size-5 text-gray-400" />
    </Buttons.button>
  </:trigger>
  <:item href="/profile">Profile</:item>
  <:item href="/settings">Settings</:item>
  <:item phx-click="sign_out">Sign out</:item>
</Dropdowns.dropdown>

React (JSX)

import { Dropdown } from "../ui/index.mjs"

<Dropdown
  label="Options"
  items={[
    { label: "Profile", href: "/profile" },
    { label: "Settings", href: "/settings" },
    { label: "Sign out", onClick: () => signOut() },
  ]}
/>