MenuSub

A submenu trigger that opens a nested menu list inside a parent menu.

Usage

Use inside MenuList to trigger a nested MenuList.

Svelte

<MenuList>
  <MenuSub label="More">
    <MenuList />
  </MenuSub>
</MenuList>

Anatomy

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

Svelte

<div class="whole" role="none">
  <button class="main" {...rest} id type="button" role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded aria-disabled style>{label}</button>
  <div class="middle" role="none" popover="manual" style>{children}</div>
</div>

Provides MenuContainerContext to its nested MenuList, labels that submenu from the trigger, opens on click, hover, Enter, Space, and the forward arrow for the parent menu orientation, and closes one level on Escape or the back arrow. Hover uses a per-level safe triangle while moving toward the submenu. Hover-opening focuses the submenu's first enabled item through MenuList's existing open effect.

Props

Name	Type	Default	Description
`children*`	`Snippet`	-	Must render the submenu's `MenuList`; receives the variant as its argument
`label*`	`string` / `Snippet`	-	Trigger content; a snippet receives the variant as its argument
`open`	`boolean`	`false`	Bindable open state; observable, not a positioning control
`disabled`	`boolean`	`false`	Sets `aria-disabled`, skips menu navigation, and prevents opening
`attach`	`Attachment`	-	Svelte attachment on the trigger
`element`	`HTMLButtonElement`	-	Bindable trigger element
`styling`	`SVSClass`	-	Styling override
`variant`	`SVSVariant`	`NEUTRAL`	Submenu variant

* required. Other button attributes are passed to the trigger via rest props; class is merged onto the trigger.

Styling

To learn more, see Styling.

Variant Management

No automatic switching. Inside a MenuList, variant and styling fall back to the parent menu's via context.

Default Class Name

svs-menu-sub

Behavior

Provides MenuContainerContext to its nested MenuList and labels that submenu from the trigger. It opens on click, hover, Enter, Space, and the forward arrow for the parent menu's orientation, and closes one level on Escape or the back arrow.

Hover uses a per-level safe triangle while the pointer moves toward the submenu. Hover-opening focuses the submenu's first enabled item through MenuList's existing open effect.

Accessibility

Keyboard Interactions

Key	Description
`Enter` / `Space`	Toggles the submenu
`ArrowRight` / `ArrowDown`	Opens the submenu; `ArrowRight` in a vertical menu, `ArrowDown` in a horizontal one
`ArrowLeft` / `ArrowUp`	Closes the submenu and returns focus to the trigger; `ArrowLeft` in a vertical menu, `ArrowUp` in a horizontal one
`Escape`	Closes the submenu, returning focus to the trigger

For item navigation and type-ahead, see MenuList.

ARIA Roles and Attributes

The component applies these automatically:

Trigger (main <button>): role="menuitem", tabindex="-1", aria-haspopup="menu", aria-expanded, and aria-disabled when disabled.
Wrappers (whole and middle): role="none".
Submenu: named from the trigger.

Menu navigation and roving focus are owned by the parent and nested MenuList components.

Exports

Types

TypeScript

interface MenuSubProps extends Omit<HTMLButtonAttributes, "children" | "type" | "role" | "disabled"> {
  children: Snippet<[string]>; // Snippet<[variant]>; must render the submenu's MenuList
  label: string | Snippet<[string]>; // Snippet<[variant]>; trigger content
  open?: boolean; // bindable (false); to observe state, not to control
  disabled?: boolean; // (false) -> aria-disabled; skipped in nav; non-openable
  attach?: Attachment<HTMLButtonElement>;
  element?: HTMLButtonElement; // bindable; the trigger
  styling?: SVSClass;
  variant?: SVSVariant; // (VARIANT.NEUTRAL)
  // other HTMLButtonAttributes are passed to the trigger via ...rest; `class` is merged onto the trigger
  // id, type, role, tabindex, aria-haspopup, aria-expanded, aria-disabled, style, and handlers are component-owned
}
type MenuSubReqdProps = "children" | "label";
type MenuSubBindProps = "open" | "element";

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

Svelte

<script lang="ts">
  import ChevronRight from "@lucide/svelte/icons/chevron-right";
  import { MenuItem, MenuList, MenuSub } from "svseeds";

  let { variant = $bindable() } = $props();
  const variantStyle1 = {
    neutral: "border-gray-400",
    active: "border-teal-500",
    inactive: "border-red-500",
    blue: "border-blue-500",
    yellow: "border-yellow-500",
    sky: "border-sky-500",
  };
  const variantStyle2 = {
    neutral: "hover:bg-gray-100 focus-visible:bg-gray-100 dark:hover:bg-gray-800 dark:focus-visible:bg-gray-800",
    active: "hover:bg-teal-100 focus-visible:bg-teal-100 dark:hover:bg-teal-900 dark:focus-visible:bg-teal-900",
    inactive: "hover:bg-red-100 focus-visible:bg-red-100 dark:hover:bg-red-900 dark:focus-visible:bg-red-900",
    blue: "hover:bg-blue-100 focus-visible:bg-blue-100 dark:hover:bg-blue-900 dark:focus-visible:bg-blue-900",
    yellow: "hover:bg-yellow-100 focus-visible:bg-yellow-100 dark:hover:bg-yellow-900 dark:focus-visible:bg-yellow-900",
    sky: "hover:bg-sky-100 focus-visible:bg-sky-100 dark:hover:bg-sky-900 dark:focus-visible:bg-sky-900",
  };
  const menuStyle = {
    whole: {
      base: "flex min-w-44 flex-col gap-1 rounded-md border bg-white p-1 shadow-lg dark:bg-black",
      ...variantStyle1,
    },
  };
  const itemStyle = {
    whole: {
      base: "rounded-sm px-2 py-1 text-left text-sm aria-disabled:opacity-50 focus:outline-hidden",
      ...variantStyle2,
    },
  };
  const subStyle = {
    main: {
      base: "flex w-full items-center justify-between gap-8 rounded-sm px-2 py-1 text-left text-sm aria-disabled:opacity-50 focus:outline-hidden",
      ...variantStyle2,
    },
    middle: "m-0 overflow-visible border-0 bg-transparent p-0",
  };
  const nestedStyle = {
    whole: {
      base: "flex min-w-40 flex-col gap-1 rounded-md border bg-white p-1 shadow-lg dark:bg-black",
      ...variantStyle1,
    },
  };
</script>

<MenuList {variant} styling={menuStyle}>
  <MenuItem {variant} styling={itemStyle}>New file</MenuItem>
  <MenuItem {variant} styling={itemStyle}>Open</MenuItem>
  <MenuSub {variant} label={moreLabel} styling={subStyle}>
    <MenuList {variant} styling={nestedStyle}>
      <MenuItem {variant} styling={itemStyle}>Duplicate</MenuItem>
      <MenuItem {variant} styling={itemStyle}>Move</MenuItem>
      <MenuItem {variant} styling={itemStyle}>Archive</MenuItem>
    </MenuList>
  </MenuSub>
  <MenuItem {variant} disabled styling={itemStyle}>Delete</MenuItem>
</MenuList>

{#snippet moreLabel(_variant: string)}
  <span>More</span>
  <ChevronRight class="size-4" />
{/snippet}