Salad UI

Dropdown Menu

The main dropdown menu component that manages state and positioning.

Read more Read less

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.
Default dropdown menu with various options Open in playground 
<div class="p-24 flex justify-center">
  <.dropdown_menu id="dropdown-default">
    <.dropdown_menu_trigger>
      <.button variant="outline">Open Menu</.button>
    </.dropdown_menu_trigger>
    <.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>
Dropdown with checkbox Open in playground 
<.dropdown_menu id="text-formatting">
<.dropdown_menu_trigger>
<.button variant="outline">Format</.button>
</.dropdown_menu_trigger>
<.dropdown_menu_content>
<.dropdown_menu_checkbox_item
checked
on-checked-change="toggle_bold"
>
<span class="font-bold">Bold</span>
</.dropdown_menu_checkbox_item>
<.dropdown_menu_checkbox_item
on-checked-change={JS.push("toggle_italic")}
>
<span class="italic">Italic</span>
</.dropdown_menu_checkbox_item>
<.dropdown_menu_checkbox_item
on-select="format_underline"
on-checked-change={JS.push("toggle_underline")}
>
<span class="underline">Underline</span>
</.dropdown_menu_checkbox_item>
</.dropdown_menu_content>
</.dropdown_menu>