Salad UI - Dropdown Menu

Salad UI

Dropdown Menu

The main dropdown menu component that manages state and positioning.

Options

:id - Required unique identifier for the dropdown menu.
:open - Whether the dropdown is initially open. Defaults to false.
:use-portal - Whether to render the dropdown in a portal. Defaults to false.
:portal-container - CSS selector for the portal container. Defaults to nil.
:on-open - Handler for dropdown menu open event.
:on-close - Handler for dropdown menu close event.
:class - Additional CSS classes.

Component events

:on-open - Fired when the dropdown menu opens.
:on-close - Fired when the dropdown menu closes.

Server commands

"open" - Opens the dropdown menu.
"close" - Closes the dropdown menu.
"toggle" - Toggles the dropdown menu.

Default dropdown menu with various options Open in playground

<div class="p-24 flex justify-center">
  <.dropdown_menu id="dropdown-default">
    <.as_child tag={&dropdown_menu_trigger/1} child={&button/1} variant="outline">
      Open Menu
    </.as_child>
    <.dropdown_menu_content class="w-56">
      <.dropdown_menu_label>Account</.dropdown_menu_label>
      <.dropdown_menu_separator />
      <.dropdown_menu_group>
        <.dropdown_menu_item on-select="on_command" value="profile">
          <.icon name="hero-user" class="mr-2 h-4 w-4" />
          <span>Profile</span>
          <.dropdown_menu_shortcut>⌘P</.dropdown_menu_shortcut>
        </.dropdown_menu_item>
        <.dropdown_menu_item on-select="on_command">
          <.icon name="hero-cog-6-tooth" class="mr-2 h-4 w-4" />
          <span>Settings</span>
          <.dropdown_menu_shortcut>⌘S</.dropdown_menu_shortcut>
        </.dropdown_menu_item>
        <.dropdown_menu_item on-select="on_command">
          <.icon name="hero-banknotes" class="mr-2 h-4 w-4" />
          <span>Billing</span>
          <.dropdown_menu_shortcut>⌘B</.dropdown_menu_shortcut>
        </.dropdown_menu_item>
      </.dropdown_menu_group>
      <.dropdown_menu_separator />
      <.dropdown_menu_group>
        <.dropdown_menu_item on-select="on_command">
          <.icon name="hero-users" class="mr-2 h-4 w-4" />
          <span>Team</span>
        </.dropdown_menu_item>
        <.dropdown_menu_item disabled>
          <.icon name="hero-plus" class="mr-2 h-4 w-4" />
          <span>New Team</span>
          <.dropdown_menu_shortcut>⌘T</.dropdown_menu_shortcut>
        </.dropdown_menu_item>
      </.dropdown_menu_group>
      <.dropdown_menu_separator />
      <.dropdown_menu_item on-select="on_command">
        <.icon name="hero-arrow-left-on-rectangle" class="mr-2 h-4 w-4" />
        <span>Log out</span>
      </.dropdown_menu_item>
    </.dropdown_menu_content>
  </.dropdown_menu>
</div>

Checkbox items toggle independently and keep the menu open, so you can flip several without reopening it Open in playground

<div class="p-24 flex justify-center">
  <.dropdown_menu id="text-formatting">
    <.as_child tag={&dropdown_menu_trigger/1} child={&button/1} variant="outline">
      Format
    </.as_child>
    <.dropdown_menu_content class="w-48">
      <.dropdown_menu_checkbox_item checked value="bold" on-checked-change="toggle_bold">
        <span class="font-bold">Bold</span>
      </.dropdown_menu_checkbox_item>
      <.dropdown_menu_checkbox_item value="italic" on-checked-change="toggle_italic">
        <span class="italic">Italic</span>
      </.dropdown_menu_checkbox_item>
      <.dropdown_menu_checkbox_item value="underline" on-checked-change="toggle_underline">
        <span class="underline">Underline</span>
      </.dropdown_menu_checkbox_item>
      <.dropdown_menu_checkbox_item disabled value="strikethrough">
        <span class="line-through">Strikethrough</span>
      </.dropdown_menu_checkbox_item>
    </.dropdown_menu_content>
  </.dropdown_menu>
</div>

Items rendered as links, for menus that navigate instead of dispatching actions Open in playground

<div class="p-24 flex justify-center">
  <.dropdown_menu id="dropdown-links">
    <.as_child tag={&dropdown_menu_trigger/1} child={&button/1} variant="outline">
      Help
    </.as_child>
    <.dropdown_menu_content class="w-56">
      <.dropdown_menu_link_item href="/docs">
        <.icon name="hero-book-open" class="mr-2 h-4 w-4" />
        <span>Documentation</span>
      </.dropdown_menu_link_item>
      <.dropdown_menu_link_item href="https://github.com">
        <.icon name="hero-code-bracket" class="mr-2 h-4 w-4" />
        <span>GitHub</span>
      </.dropdown_menu_link_item>
      <.dropdown_menu_separator />
      <.dropdown_menu_link_item disabled href="/changelog">
        <.icon name="hero-clock" class="mr-2 h-4 w-4" />
        <span>Changelog</span>
      </.dropdown_menu_link_item>
    </.dropdown_menu_content>
  </.dropdown_menu>
</div>