View Source SaladUI.DropdownMenu (SaladUI v1.0.0-beta.3)

Implementation of dropdown menu component for SaladUI framework.

Dropdown menus display a list of options when a trigger element is clicked. They provide a way to select from multiple options while conserving screen space.

Examples:

<.dropdown_menu id="user-menu">
  <.dropdown_menu_trigger>
    <.button variant="outline">Open Menu</.button>
  </.dropdown_menu_trigger>
  <.dropdown_menu_content>
    <.dropdown_menu_label>My Account</.dropdown_menu_label>
    <.dropdown_menu_separator />
    <.dropdown_menu_group>
      <.dropdown_menu_item on-select={JS.push("profile_selected")}>
        Profile
        <.dropdown_menu_shortcut>P</.dropdown_menu_shortcut>
      </.dropdown_menu_item>
      <.dropdown_menu_item on-select={JS.push("settings_selected")}>
        Settings
        <.dropdown_menu_shortcut>S</.dropdown_menu_shortcut>
      </.dropdown_menu_item>
      <.dropdown_menu_item disabled>
        Disabled Option
      </.dropdown_menu_item>
    </.dropdown_menu_group>
    <.dropdown_menu_separator />
    <.dropdown_menu_item variant="destructive" on-select={JS.push("logout")}>
      Log out
    </.dropdown_menu_item>
  </.dropdown_menu_content>
</.dropdown_menu>

Example with checkbox items

<.dropdown_menu id="options-menu">
  <.dropdown_menu_trigger>
    <.button variant="outline">Options</.button>
  </.dropdown_menu_trigger>
  <.dropdown_menu_content>
    <.dropdown_menu_checkbox_item
      checked={@is_bold}
      on-checked-change={JS.push("toggle_bold")}
    >
      Bold
    </.dropdown_menu_checkbox_item>
    <.dropdown_menu_checkbox_item
      checked={@is_italic}
      on-checked-change={JS.push("toggle_italic")}
    >
      Italic
    </.dropdown_menu_checkbox_item>
  </.dropdown_menu_content>
</.dropdown_menu>

Summary

Functions

The main dropdown menu component that manages state and positioning.

A checkbox item in the dropdown menu that can be toggled on/off.

The dropdown menu content that appears when triggered.

A group of related dropdown menu items.

An item in the dropdown menu.

A label for a section in the dropdown menu.

An item in the dropdown menu.

A separator for visually dividing sections of the dropdown menu.

A keyboard shortcut hint displayed in a dropdown menu item.

The trigger element that toggles the dropdown menu.

Functions