The <luna-menu> and <luna-menu-item> components provide menus with checkbox support, icons, and variants.
Paths
/lunadom/components/menu/menu.js REQUIRED
/lunadom/components/menu-item/menu-item.js REQUIRED
Standard & Variants
Profile Configuration
Security Settings
Terminal Connection
Interactive Items
Hardware Acceleration
Real-time Debugging
Experimental Features
Icons & Media
📁 Open Project...
⌘O
💾 Secure Save
⌘S
🚫 Terminate Process
Customization
Slots
default - List of luna-menu-item or luna-divider components
Attributes
max-width - The maximum width of the menu (default: 250px)
CSS Variables
--luna-menu-bg - Background color of the menu.
--luna-menu-border - Border color of the menu.
--luna-menu-radius - Border radius for the menu corners.
--luna-menu-shadow - Box shadow for the menu.
Example Code
<!-- Standard Menu -->
<luna-menu>
<luna-menu-item>Profile Configuration</luna-menu-item>
<luna-menu-item>Security Settings</luna-menu-item>
<luna-divider></luna-divider>
<luna-menu-item variant="danger">Terminal Connection</luna-menu-item>
</luna-menu>
<!-- Interactive Items -->
<luna-menu>
<luna-menu-item type="checkbox" checked>Hardware Acceleration</luna-menu-item>
<luna-menu-item type="checkbox">Real-time Debugging</luna-menu-item>
<luna-menu-item disabled>Experimental Features</luna-menu-item>
</luna-menu>
<!-- With Icons -->
<luna-menu-item>
<span slot="prefix">📁</span> Open Project
<span slot="suffix">⌘O</span>
</luna-menu-item>