MenuList

A reusable role="menu" body for menu items, groups, and separators.

Usage

Use inside Popover / ContextMenu, or standalone; fill with MenuItem / MenuGroup / MenuSeparator.

Svelte

<MenuList {...props}>
  <MenuItem {...props}>Item</MenuItem>
</MenuList>

Anatomy

The class attribute values represent part names. Other attributes represent their corresponding props.

Svelte

<div class="whole" {...rest} role="menu" tabindex="-1" aria-orientation={orientation}>
  {#if children}
    {children}
  {:else if items}
    <MenuItem>{label}</MenuItem>
    <MenuSeparator />
  {/if}
</div>

Reusable role="menu" body. It reads an optional MenuContainerContext for open, close, variant, and styling; standalone usage still renders and navigates, while close() is a no-op without a container. When the container opens, the first enabled item is focused after tick().

Props

Name	Type	Default	Description
`children`	`Snippet`	-	Menu content; wins over `items` when both are given
`items`	`MenuItemData[]`	-	Data-mode sugar for rendering items and separators; ignored when `children` is present
`orientation`	`<enum>`	`"vertical"`	Sets keyboard direction and `aria-orientation`
`attach`	`Attachment`	-	Svelte attachment on the root list
`element`	`HTMLDivElement`	-	Bindable root element
`styling`	`SVSClass`	-	Styling override
`variant`	`SVSVariant`	`NEUTRAL`	List variant unless a menu container context is present; container context wins

Other HTMLAttributes are passed to <div> via rest props; class is merged onto the root.

Styling

To learn more, see Styling.

Variant Management

No automatic switching.

Default Class Name

svs-menu-list

Behavior

Accessibility

Keyboard Interactions

Key	Description
`ArrowDown` / `ArrowUp`	With `orientation="vertical"` (default), moves focus to the next or previous enabled menu item, wrapping at the ends
`ArrowRight` / `ArrowLeft`	With `orientation="horizontal"`, moves focus to the next or previous enabled menu item, wrapping at the ends
`Home` / `End`	Moves focus to the first or last enabled menu item
`Tab`	Closes the containing menu
Printable character	Moves focus by type-ahead to the next enabled item whose text starts with the typed buffer

The type-ahead buffer resets after 500 ms. When a containing menu opens, focus moves to the first enabled item.

ARIA Roles and Attributes

The component applies these automatically:

Root (whole): role="menu", aria-orientation, and tabindex="-1".
Items with aria-disabled="true" are skipped by keyboard navigation.

MenuList looks for descendant role="menuitem" elements; MenuItem provides that role. Provide an accessible name for standalone menus when surrounding context does not label the menu, by passing aria-label or aria-labelledby through rest props.

Exports

Types

TypeScript

interface MenuListProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role"> {
  children?: Snippet<[string]>; // Snippet<[variant]>; wins over `items` when both given
  items?: MenuItemData[]; // data-mode sugar; ignored when `children` is present
  orientation?: "horizontal" | "vertical"; // ("vertical")
  attach?: Attachment<HTMLDivElement>;
  element?: HTMLDivElement; // bindable
  styling?: SVSClass;
  variant?: SVSVariant; // (VARIANT.NEUTRAL); container context wins when present
  // other HTMLAttributes are passed to <div> via ...rest; `class` is merged onto root
  // role, tabindex, aria-orientation, and keyboard handling are component-owned
}
type MenuListReqdProps = never;
type MenuListBindProps = "element";
interface MenuContainerContext extends SVSContext {
  get open(): boolean;
  close(): void;
}
type MenuItemData = MenuItemEntry | MenuSeparatorData;
type MenuItemEntry = {
  label: string | Snippet<[string]>;
  onselect?: (ev: MouseEvent) => void;
  disabled?: boolean;
};
type MenuSeparatorData = { separator: true };

Others

No additional exports are available.

Examples

The example code uses Tailwind CSS along with SVSClass.

Basic

With Interactive Variant

Preset for Demo

Free Input

Enter variant as you like

With Data Items

Selected: None