Core UI

Menu

Display a list of navigation items or actions in a menu format.

Installation

Import 
import { Menu, Button } from '@svelte-atoms/core/menu';

Preset Configuration

Customize the menu appearance using presets

You can customize the default styles for Menu components by defining presets in your configuration:

Examples

Explore different menu variations

Basic Menu

Simple menu with items

Code 
<Menu.Root>
  <Menu.Trigger base={Button}>Open Menu</Menu.Trigger>
  <Menu.Content class="max-w-xs rounded-lg border">
    <Menu.Item>New File</Menu.Item>
    <Menu.Item>Open File</Menu.Item>
    <Menu.Item>Save</Menu.Item>
    <Menu.Item>Save As...</Menu.Item>
    <Menu.Item class="text-red-600">Exit</Menu.Item>
  </Menu.Content>
</Menu.Root>

Interactive Menu

Menu with click handlers

Code 
<Menu.Root>
  <Menu.Trigger base={Button}>Open Menu</Menu.Trigger>
  <Menu.Content class="max-w-xs rounded-lg border">
    <Menu.Item onclick={() => alert('Profile clicked')}>Profile</Menu.Item>
    <Menu.Item onclick={() => alert('Settings clicked')}>Settings</Menu.Item>
    <Menu.Item onclick={() => alert('Logout clicked')}>Logout</Menu.Item>
  </Menu.Content>
</Menu.Root>

API Reference

Menu.Root Props

Prop
Type
Default
Description
class
string
''
Additional CSS classes

Menu.List Props

Prop
Type
Default
Description
bond
Bond
undefined
Bond object for component communication
base
Component | Snippet
undefined
Base component or snippet to render
preset
PresetModuleName | string
undefined
Preset module name for styling
variants
VariantDefinition | Function
undefined
Variant definition or function to resolve variants
class
ClassValue | ClassValue[]
undefined
CSS class(es) to apply to the element
as
string
undefined
HTML tag to render as
global
boolean
false
Whether to use global styles
initial
NodeFunction
undefined
Function called on initial render
enter
TransitionFunction
undefined
Transition function for entering
exit
TransitionFunction
undefined
Transition function for exiting
animate
NodeFunction
undefined
Animation function
onmount
NodeFunction
undefined
Function called when element is mounted
ondestroy
NodeFunction
undefined
Function called when element is destroyed
children
Snippet
undefined
Children content snippet

Menu.Item Props

Prop
Type
Default
Description
class
ClassValue
undefined
Custom CSS class(es) to apply to the menu item
preset
string | undefined
'menu.item'
Preset key for styling
disabled
boolean | undefined
false
Whether the menu item is disabled
onclick
((event: MouseEvent) => void) | undefined
undefined
Click event handler
onmount
((this: MenuItemController) => void) | undefined
undefined
Function called when element is mounted
ondestroy
((this: MenuItemController) => void) | undefined
undefined
Function called when element is destroyed
animate
((this: MenuItemController) => any) | undefined
undefined
Animation configuration
enter
((this: MenuItemController) => any) | undefined
undefined
Transition function for entering
exit
((this: MenuItemController) => any) | undefined
undefined
Transition function for exiting
initial
((this: MenuItemController) => any) | undefined
undefined
Initial state configuration
factory
(() => MenuItemController) | undefined
undefined
Factory function to create a custom MenuItemController instance
children
Snippet<[{ menuItem: MenuItemController; }]> | undefined
undefined
Render prop for children
...atomProps
HtmlAtomProps
-
All HTML element props are supported. See [Atom Props](/docs/components/atom#props) for the complete list of inherited properties.

Accessibility

Built-in Accessibility Features

  • • Keyboard navigation (Arrow keys)
  • • ARIA menu role
  • • Focus management
  • • Screen reader friendly
  • • Disabled state support
Previous
List
Next
Popover