PineUiPhoenix.Dropdown (Pine UI v0.1.3)
View SourceProvides dropdown menu components for displaying lists of actions or options.
The Dropdown module offers components for creating dropdown menus that can contain links, buttons, and other interactive elements. Includes variants for different trigger styles and positioning.
Summary
Functions
Renders a basic dropdown menu component.
Renders a contextual menu.
Renders a dropdown menu with item icons.
Functions
Renders a basic dropdown menu component.
This component creates a dropdown menu that appears when a trigger button is clicked. The menu can contain links, buttons, or other elements.
Examples
<.basic id="user-menu" label="Options">
<:item href="/profile">Profile</:item>
<:item href="/settings">Settings</:item>
<:divider />
<:item href="/logout" class="text-red-600">Log out</:item>
</.basic>
<.basic id="actions-menu" icon={~H"<svg>...</svg>"}>
<:item on_click="edit">Edit</:item>
<:item on_click="duplicate">Duplicate</:item>
<:divider />
<:item on_click="delete" class="text-red-600">Delete</:item>
</.basic>
Options
:id
- Unique identifier for the dropdown (required):label
- Text for the trigger button (either this or icon is required):icon
- Icon markup for the trigger button (either this or label is required):position
- Menu position: "bottom-left", "bottom-right", "top-left", "top-right" (optional, defaults to "bottom-left"):width
- Menu width: "auto", "sm", "md", "lg" (optional, defaults to "auto"):button_class
- CSS classes for the trigger button (optional):menu_class
- CSS classes for the dropdown menu (optional):item
- Menu item slots with the following attributes::href
- URL for link items (either this or on_click is typically provided):on_click
- Click event name for button items (either this or href is typically provided):class
- CSS classes for the item (optional):disabled
- Whether the item is disabled (optional, defaults to false)
:divider
- Slot for menu divider lines (no attributes required)
Renders a dropdown menu with item icons.
This component creates a dropdown menu with icon support for menu items.
Examples
<.with_icons id="file-menu" label="File">
<:item
href="#"
icon={~H"<svg class='h-4 w-4' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 6v6m0 0v6m0-6h6m-6 0H6' />
</svg>"}
>
New Document
</:item>
<:item
href="#"
icon={~H"<svg class='h-4 w-4' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12' />
</svg>"}
>
Open
</:item>
<:divider />
<:item
href="#"
icon={~H"<svg class='h-4 w-4' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4' />
</svg>"}
>
Save
</:item>
</.with_icons>
Options
:id
- Unique identifier for the dropdown (required):label
- Text for the trigger button (either this or icon is required):icon
- Icon markup for the trigger button (either this or label is required):position
- Menu position: "bottom-left", "bottom-right", "top-left", "top-right" (optional, defaults to "bottom-left"):width
- Menu width: "auto", "sm", "md", "lg" (optional, defaults to "auto"):button_class
- CSS classes for the trigger button (optional):menu_class
- CSS classes for the dropdown menu (optional):item
- Menu item slots with the following attributes::href
- URL for link items (either this or on_click is typically provided):on_click
- Click event name for button items (either this or href is typically provided):icon
- Icon markup for the menu item (optional):class
- CSS classes for the item (optional):disabled
- Whether the item is disabled (optional, defaults to false)
:divider
- Slot for menu divider lines (no attributes required)