# 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](/docs/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](/docs/menu-list).

### 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](/docs/menu-list) components.

## Exports

### Types

```ts
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

**Code**

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

  const menuStyle = {
    whole: "flex min-w-44 flex-col gap-1 rounded-md border bg-white p-1 shadow-lg dark:bg-black",
  };
  const itemStyle = {
    whole:
      "rounded-sm px-2 py-1 text-left text-sm aria-disabled:opacity-50 hover:bg-gray-100 focus-visible:bg-gray-100 focus:outline-hidden dark:hover:bg-gray-800 dark:focus-visible:bg-gray-800",
  };
  const subStyle = {
    main: "flex w-full items-center justify-between gap-8 rounded-sm px-2 py-1 text-left text-sm aria-disabled:opacity-50 hover:bg-gray-100 focus-visible:bg-gray-100 focus:outline-hidden dark:hover:bg-gray-800 dark:focus-visible:bg-gray-800",
    middle: "m-0 overflow-visible border-0 bg-transparent p-0",
  };
  const nestedStyle = {
    whole: "flex min-w-40 flex-col gap-1 rounded-md border bg-white p-1 shadow-lg dark:bg-black",
  };
</script>

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

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

**Code**

```svelte src=MenuSubPract.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}
```