Skip to main content
The Menu component provides a popover-based dropdown menu system with support for custom triggers, list items, and nested content.

​
Structure

The Menu component consists of several subcomponents:
  • Menu.Root - The root container that manages menu state
  • Menu.Trigger - The button or element that opens the menu
  • Menu.Content / Menu.List - The container for menu items
  • Menu.Item - Individual selectable menu items
  • Menu.Divider - Visual separator between menu items
  • Menu.Group - Groups related menu items
  • Menu.Title - Title for menu groups
  • Menu.Arrow - Optional arrow pointing to the trigger
  • Menu.Indicator - Visual indicator for the menu state

​
Import

import { Menu } from '@svelte-atoms/core';

​
Usage

​
Basic Menu

<script>
  import { Menu, Button } from '@svelte-atoms/core';
  let open = $state(false);
</script>

<Menu.Root bind:open>
  <Menu.Trigger base={Button}>Select a language</Menu.Trigger>
  <Menu.Content>
    <Menu.Item onclick={() => console.log('Arabic')}>Arabic</Menu.Item>
    <Menu.Item onclick={() => console.log('English')}>English</Menu.Item>
    <Menu.Item onclick={() => console.log('Spanish')}>Spanish</Menu.Item>
    <Menu.Item onclick={() => console.log('Italian')}>Italian</Menu.Item>
  </Menu.Content>
</Menu.Root>

​
Menu with Groups

<Menu.Root>
  <Menu.Trigger base={Button}>Options</Menu.Trigger>
  <Menu.Content>
    <Menu.Group>
      <Menu.Title>Actions</Menu.Title>
      <Menu.Item onclick={() => console.log('Edit')}>Edit</Menu.Item>
      <Menu.Item onclick={() => console.log('Duplicate')}>Duplicate</Menu.Item>
    </Menu.Group>
    <Menu.Divider />
    <Menu.Group>
      <Menu.Title>Danger Zone</Menu.Title>
      <Menu.Item onclick={() => console.log('Delete')}>Delete</Menu.Item>
    </Menu.Group>
  </Menu.Content>
</Menu.Root>

​
Disabled Items

<Menu.Root>
  <Menu.Trigger base={Button}>File</Menu.Trigger>
  <Menu.Content>
    <Menu.Item onclick={() => console.log('New')}>New File</Menu.Item>
    <Menu.Item onclick={() => console.log('Open')}>Open</Menu.Item>
    <Menu.Item disabled>Save (Unavailable)</Menu.Item>
  </Menu.Content>
</Menu.Root>

​
API Reference

​
Menu.Root

The root container component that manages the menu’s open/closed state.
​
open
boolean
default:"false"
Controls the open state of the menu. Use bind:open for two-way binding.
​
factory
Factory<MenuBond>
Optional factory function to create a custom MenuBond instance.
​
children
Snippet
The menu trigger and content components.

​
Menu.Trigger

The element that triggers the menu to open when clicked.
​
base
Component
Base component to use for the trigger (e.g., Button).
​
as
keyof HTMLElementTagNameMap
default:"'button'"
HTML element type to render.
​
class
string
Additional CSS classes to apply.

​
Menu.Content / Menu.List

The container that holds the menu items. Appears as a popover when the menu is open.
Menu.List is deprecated. Use Menu.Content instead.
​
as
keyof HTMLElementTagNameMap
default:"'ul'"
HTML element type to render.
​
base
Component
Base component to customize the content container.
​
preset
string
default:"'menu.content'"
Preset key for styling.
​
class
string
Additional CSS classes to apply.
​
onmount
(this: MenuBondState) => void
Callback when the content is mounted.
​
ondestroy
(this: MenuBondState) => void
Callback when the content is destroyed.
​
animate
(this: MenuBondState) => any
Animation configuration.
​
enter
(this: MenuBondState) => any
Enter animation configuration.
​
exit
(this: MenuBondState) => any
Exit animation configuration.
​
initial
(this: MenuBondState) => any
Initial state configuration.

​
Menu.Item

An individual menu item that can be clicked to perform an action.
​
onclick
(event: MouseEvent) => void
Click event handler. The menu automatically closes after a click unless event.preventDefault() is called.
​
disabled
boolean
Whether the menu item is disabled.
​
class
string
Additional CSS classes to apply.
​
preset
string
default:"'menu.item'"
Preset key for styling.
​
onmount
(this: MenuItemController) => void
Callback when the item is mounted.
​
ondestroy
(this: MenuItemController) => void
Callback when the item is destroyed.
​
animate
(this: MenuItemController) => any
Animation configuration.
​
enter
(this: MenuItemController) => any
Enter animation configuration.
​
exit
(this: MenuItemController) => any
Exit animation configuration.
​
initial
(this: MenuItemController) => any
Initial state configuration.
​
children
Snippet<[{ menuItem: MenuItemController }]>
Render prop for children with access to the menu item controller.

​
Menu.Divider

A visual separator between menu items.
​
class
string
Additional CSS classes to apply.

​
Menu.Group

Groups related menu items together.
​
class
string
Additional CSS classes to apply.
​
children
Snippet
The menu items and title to group.

​
Menu.Title

A title for a group of menu items.
​
class
string
Additional CSS classes to apply.
​
children
Snippet
The title content.

​
Menu.Arrow

An optional arrow that points from the menu to the trigger.
​
class
string
Additional CSS classes to apply.

​
Menu.Indicator

A visual indicator for the menu state.
​
class
string
Additional CSS classes to apply.

​
Features

  • Popover-based: Built on top of the Popover component for positioning and behavior
  • Keyboard navigation: Support for keyboard navigation through menu items
  • Auto-close: Automatically closes when an item is clicked
  • Flexible styling: Full control over styling with presets and custom classes
  • Animation support: Built-in support for enter/exit animations
  • Accessible: Follows accessibility best practices with proper ARIA attributes

​
Related Components

  • Popover - The underlying component for menu positioning
  • List - Used internally for menu item layout
  • Button - Commonly used as the menu trigger

Build docs developers (and LLMs) love

Get started for freeTalk to us