View Source SaladUI.DropdownMenu (SaladUI v1.0.0-beta.1)
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.