Dropdown — lunaDOM Docs

The <luna-dropdown> component displays a popup menu with flexible positioning and support for nested dropdowns.

Paths

/lunadom/components/dropdown/dropdown.js

REQUIRED

/lunadom/components/menu/menu.js

REQUIRED

/lunadom/components/menu-item/menu-item.js

REQUIRED

Placements

Bottom Start

Project Settings

Team Access

Top End

View Logs

Quit Application

Nested Interactions

System Menu

Network Proxy

Encrypted Link

⚙️ Advanced Preferences ›

Security Settings

Privacy Options

Developer Tools

Customization

Slots
default - Menu content (typically <luna-menu>)
trigger - Element that triggers the dropdown

Attributes
placement - Dropdown position ('top-start', 'top-end', 'bottom-start', 'bottom-end', 'right-start', 'left-start')
open - Whether the dropdown panel is currently visible

CSS Variables
--luna-dropdown-bg - Background color of the dropdown panel
--luna-dropdown-border - Border color of the dropdown panel
--luna-dropdown-radius - Border radius for the panel corners
--luna-dropdown-shadow - Box shadow for the panel
--luna-dropdown-z - Z-index for the panel

Events
luna-show - Emitted when the dropdown panel opens
luna-hide - Emitted when the dropdown panel closes

Example Code

<luna-dropdown placement="bottom-start"> <luna-button slot="trigger" variant="primary">Menu</luna-button> <luna-menu> <luna-menu-item>Settings</luna-menu-item> <luna-menu-item>Team Access</luna-menu-item> </luna-menu> </luna-dropdown>  <luna-dropdown placement="top-end"> <luna-button slot="trigger" caret>Options</luna-button> <luna-menu> <luna-menu-item variant="danger">Delete</luna-menu-item> </luna-menu> </luna-dropdown>