SaladUI.DropdownMenu (SaladUI v1.0.0)

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 as={&SaladUI.Button.button/1} variant="outline">
    Open Menu
  </.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 as={&SaladUI.Button.button/1} variant="outline">
    Options
  </.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>

Component events

:on-open - Maps the open event. Fired when the dropdown menu enters open state.
:on-close - Maps the close event. Fired when the dropdown menu enters closed state.
:on-select - Maps the select event on a dropdown_menu_item. Fired when the item is activated.
:on-checked-change - Maps the checked-change event on a dropdown_menu_checkbox_item.

Server commands

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

Summary

Functions

dropdown_menu(assigns)

The main dropdown menu component that manages state and positioning.

dropdown_menu_checkbox_item(assigns)

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

dropdown_menu_content(assigns)

The dropdown menu content that appears when triggered.

dropdown_menu_group(assigns)

A group of related dropdown menu items.

dropdown_menu_item(assigns)

An item in the dropdown menu.

dropdown_menu_label(assigns)

A label for a section in the dropdown menu.

dropdown_menu_link_item(assigns)

An item in the dropdown menu.

dropdown_menu_separator(assigns)

A separator for visually dividing sections of the dropdown menu.

dropdown_menu_shortcut(assigns)

A keyboard shortcut hint displayed in a dropdown menu item.

dropdown_menu_trigger(assigns)

The trigger element that toggles the dropdown menu.

Functions

dropdown_menu(assigns)

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.

Attributes

id (:string) (required) - Unique identifier for the dropdown menu.
open (:boolean) - Whether the dropdown menu is initially open. Defaults to false.
use-portal (:boolean) - Whether to render the content in a portal. Defaults to false.
portal-container (:string) - CSS selector for the portal container. Defaults to nil.
on-open (:any) - Handler for dropdown menu open event. Defaults to nil.
on-close (:any) - Handler for dropdown menu close event. Defaults to nil.
class (:string) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)

dropdown_menu_checkbox_item(assigns)

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

Options

:checked - Whether the item is initially checked. Defaults to false.
:disabled - Whether the item is disabled. Defaults to false.
:on-checked-change - Handler for when checked state changes.
:on-select - Handler for item selection.
:class - Additional CSS classes.

Attributes

class (:string) - Defaults to nil.
value (:string) - Defaults to nil.
checked (:boolean) - Defaults to false.
disabled (:boolean) - Defaults to false.
on-select (:any) - Handler for item selected event. Defaults to nil.
on-checked-change (:any) - Handler for when checked state changes. Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)

dropdown_menu_content(assigns)

The dropdown menu content that appears when triggered.

Options

:side - Placement of the dropdown menu relative to the trigger (top, right, bottom, left). Defaults to "bottom".
:align - Alignment of the dropdown menu (start, center, end). Defaults to "start".
:side-offset - Distance from the trigger in pixels. Defaults to 4.
:align-offset - Offset along the alignment axis. Defaults to 0.
:class - Additional CSS classes.

Attributes

class (:string) - Defaults to nil.
side (:string) - Defaults to "bottom". Must be one of "top", "right", "bottom", or "left".
align (:string) - Defaults to "start". Must be one of "start", "center", or "end".
side-offset (:integer) - Distance from the trigger in pixels. Defaults to 4.
align-offset (:integer) - Offset along the alignment axis. Defaults to 0.
Global attributes are accepted.

Slots

inner_block (required)

dropdown_menu_group(assigns)

A group of related dropdown menu items.

Options

:class - Additional CSS classes.

Attributes

class (:string) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)

dropdown_menu_item(assigns)

An item in the dropdown menu.

Options

:disabled - Whether the item is disabled. Defaults to false.
:variant - Visual style variant of the item (default or destructive).
:on-select - Handler for item selection.
:class - Additional CSS classes.

Attributes

class (:string) - Defaults to nil.
value (:string) - Defaults to nil.
variant (:string) - Defaults to "default". Must be one of "default", or "destructive".
disabled (:boolean) - Defaults to false.
on-select (:any) - Handler for item selection. Defaults to nil.
as (:any) - Defaults to "div".
Global attributes are accepted.

Slots

inner_block (required)

dropdown_menu_label(assigns)

A label for a section in the dropdown menu.

Options

:inset - Whether to inset the label. Defaults to false.
:class - Additional CSS classes.

Attributes

class (:string) - Defaults to nil.
inset (:boolean) - Defaults to false.
Global attributes are accepted.

Slots

inner_block (required)

dropdown_menu_link_item(assigns)

An item in the dropdown menu.

Options

:disabled - Whether the item is disabled. Defaults to false.
:variant - Visual style variant of the item (default or destructive).
:on-select - Handler for item selection.
:class - Additional CSS classes.

Attributes

class (:string) - Defaults to nil.
value (:string) - Defaults to nil.
variant (:string) - Defaults to "default". Must be one of "default", or "destructive".
disabled (:boolean) - Defaults to false.
Global attributes are accepted. Supports all globals plus: ["href", "method"].

Slots

inner_block (required)

dropdown_menu_separator(assigns)

A separator for visually dividing sections of the dropdown menu.

Options

:class - Additional CSS classes.

Attributes

class (:string) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block

dropdown_menu_shortcut(assigns)

A keyboard shortcut hint displayed in a dropdown menu item.

Options

:class - Additional CSS classes.

Attributes

class (:string) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)

dropdown_menu_trigger(assigns)

The trigger element that toggles the dropdown menu.

Renders a native <button type="button"> by default. Set :as to an HTML tag or function component to render another trigger root.

Options

:class - Additional CSS classes.
:as - The HTML tag or function component to use for the trigger. Defaults to "button".

Attributes

as (:any) - Defaults to "button".
type (:string) - Defaults to nil.
class (:string) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)