Menu

A dropdown menu component for displaying a list of actions or options triggered by a button.

Anatomy 

<script>
  import {
    Menu,
    MenuButton,
    MenuContent,
    MenuItem,
    MenuItemGroup,
    MenuSeparator,
  } from "@saas-ui/svelte/components/menu";
</script>

<Menu.Root>
  <MenuButton>Open Menu</MenuButton>
  <MenuContent>
    <MenuItemGroup>
      <MenuItem value="edit">Edit</MenuItem>
      <MenuItem value="duplicate">Duplicate</MenuItem>
    </MenuItemGroup>
    <MenuSeparator />
    <MenuItem value="delete">Delete</MenuItem>
  </MenuContent>
</Menu.Root>

Examples

Basic Accessibility

Basic menu with default styling and simple menu items.

Checkbox Accessibility

Checkbox items in a menu for multi-selection options using Menu.CheckboxItem.

Colours Accessibility

Use the colour prop to change the colour scheme of the menu.

Command Accessibility

Use the Menu.ItemCommand component to display keyboard shortcuts alongside menu items.

Context Menu Accessibility

Use Menu.ContextTrigger to create a right-click context menu.

Group Accessibility

Use Menu.ItemGroup to group related menu items together with an optional label.

Icon And Command Accessibility

Compose menu items with icons and keyboard command shortcuts.

Mixed Layout Accessibility

Mixed layout with horizontal and vertical items for complex menu structures.

Placement Accessibility

Use positioning.placement to control menu placement relative to the trigger.

Radio Accessibility

Radio items in a menu for single-selection options using Menu.RadioItemGroup.

Sizes Accessibility

Use the size prop to control the size of the menu. Available sizes: sm, md.

Props

Menu.Root

The root container component that provides context for the menu.

Prop Type Default Description
children Snippet - The menu content.
id string - The unique identifier for the menu. If not provided, a unique ID will be auto-generated.
size "sm" | "md" "md" The size of the menu.
colour ColourName "indigo" The colour palette for highlighted items.
open boolean - Whether the menu is open.
closeOnSelect boolean true Whether to close the menu when an option is selected.
loopFocus boolean false Whether to loop the keyboard navigation.
onPrefetch (value: string) => void - Callback invoked when hovering over an item (for prefetching content). Similar to Astro's link prefetching, this allows preloading data before selection.

Menu.Button

The button that triggers the menu to open.

Prop Type Default Description
children Snippet - The button content.
class string - Additional CSS classes to apply.
variant "solid" | "subtle" | "outline" | "ghost" | "plain" | "breadcrumb" "outline" The visual style of the button.
size "xs" | "sm" | "md" | "lg" | "xl" | "2xl" "md" The size of the button.
colour ColourName "gray" The colour palette of the button.
showIndicator boolean false Whether to show the dropdown indicator.
asChild boolean - Whether to render as a child element.
style string - Additional inline styles.

Menu.Content

The container for menu items that appears when the menu is open.

Prop Type Default Description
children Snippet - The menu content.
class string - Additional CSS classes to apply.
portal boolean true Whether to render the menu in a portal.

Menu.Item

A single menu item that can be selected.

Prop Type Default Description
children Snippet - The menu item content.
value string - The unique value of the menu item.
class string - Additional CSS classes to apply.
disabled boolean - Whether the menu item is disabled.

Menu.ItemLink

A menu item that renders as a navigation link.

Prop Type Default Description
children Snippet - The link text.
value string - The unique value of the menu item.
href string - The URL to navigate to.
target string - Where to open the link.
rel string - Relationship of the linked URL.
class string - Additional CSS classes to apply.

Menu.ItemCommand

Displays a keyboard shortcut alongside a menu item.

Prop Type Default Description
children Snippet - The command content (keyboard shortcut).
class string - Additional CSS classes to apply.

Menu.ItemGroup

Groups related menu items together with an optional label.

Prop Type Default Description
children Snippet - The menu item group content.
title string - The group title/label.
class string - Additional CSS classes to apply.

Menu.Separator

A visual separator between menu items.

Prop Type Default Description
class string - Additional CSS classes to apply.

Menu.TriggerItem

A menu item that opens a submenu when hovered or selected.

Prop Type Default Description
children Snippet - The trigger item content.
value string - The unique value of the menu item.
class string - Additional CSS classes to apply.

Menu.ContextTrigger

A trigger that opens the menu on right-click (context menu).

Prop Type Default Description
children Snippet - The context trigger content.
class string - Additional CSS classes to apply.

Menu.CheckboxItem

A menu item with a checkbox for multi-selection options.

Prop Type Default Description
children Snippet - The checkbox item content.
value string - The unique value of the checkbox item.
checked boolean - Whether the checkbox is checked.
class string - Additional CSS classes to apply.
showIndicator boolean true Whether to show the checkbox indicator.
startElement Snippet - Element to render at the start of the item (for custom content, overrides showIndicator).
disabled boolean - Whether the checkbox item is disabled.

Menu.RadioItemGroup

Groups radio items together for single-selection options.

Prop Type Default Description
children Snippet - The radio item group content.
value string - The controlled value of the radio group.
onValueChange (details: { value: string }) => void - Handler called when the value changes.
class string - Additional CSS classes to apply.

Menu.RadioItem

A menu item with a radio button for single-selection within a group.

Prop Type Default Description
children Snippet - The radio item content.
value string - The unique value of the radio item.
class string - Additional CSS classes to apply.
showIndicator boolean true Whether to show the radio indicator.
startElement Snippet - Element to render at the start of the item (for custom content, overrides showIndicator).
disabled boolean - Whether the radio item is disabled.

Menu.ItemIndicator

The indicator element shown for checked checkbox or radio items.

Prop Type Default Description
children Snippet - Custom indicator content.
class string - Additional CSS classes to apply.