# MenuItem

An actionable item for a `MenuList`, rendered as a button or link.

## Usage

Use inside `MenuList`.
```svelte
<MenuList>
  <MenuItem {...props}>Item</MenuItem>
</MenuList>
```

## Anatomy

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

```svelte
{#if href}
  <a class="whole" {...rest} href role="menuitem" tabindex="-1" aria-disabled>{children}</a>
{:else}
  <button class="whole" {...rest} type="button" role="menuitem" tabindex="-1" aria-disabled>{children}</button>
{/if}
```

When embedded in `MenuList`, `variant` defaults to the menu's and `styling` falls back to it; activating the item closes the menu after `onselect`. The context can also carry the menu `orientation` for related descendants. Disabled anchor items are non-navigable.

## Props

| Name | Type | Default | Description |
|---|---|---|---|
| `children*` | `Snippet` | - | Item content; receives the variant as its argument |
| `href` | `string` | - | Renders an `<a>` instead of a `<button>` |
| `onselect` | `(ev: MouseEvent) => void` | - | Runs when the enabled item is activated, before the menu closes |
| `disabled` | `boolean` | `false` | Sets `aria-disabled`, skips menu navigation, and prevents activation without closing the menu |
| `attach` | `Attachment` | - | Svelte attachment on the root item |
| `element` | `HTMLButtonElement` | - | Bindable root element |
| `styling` | `SVSClass` | - | Styling override |
| `variant` | `SVSVariant` | `NEUTRAL` | Item variant |
`*` required. Other button/anchor attributes are passed to the `<button>`/`<a>` element via rest props; `class` is merged onto the root.

## Styling

To learn more, see [Styling](/docs/styling).

### Variant Management

No automatic switching.

### Default Class Name

`svs-menu-item`

## Behavior

When embedded in `MenuList`, `variant` defaults to the menu's and `styling` falls back to it; activating the item closes the menu after `onselect`. The context can also carry the menu `orientation` for related descendants. Disabled anchor items are non-navigable.

## Accessibility

### ARIA Roles and Attributes

The component applies these automatically:

- Item (`whole` `<a>` or `<button>`): `role="menuitem"`, `tabindex="-1"`, and `aria-disabled` when `disabled` is set.

Menu navigation and roving focus are owned by the parent menu; see [MenuList](/docs/menu-list) for keyboard behavior.

### Standards Basis

MenuItem is built on a native `<a>` when `href` is set, otherwise a native `<button>`, so activation support follows the browser standard for links and buttons. See the [Concepts standards-first guidance](/docs/concepts) for the library's approach.

## Exports

### Types

```ts
interface MenuItemProps extends Omit<HTMLButtonAttributes & HTMLAnchorAttributes, "children" | "type" | "role" | "disabled" | "onselect"> {
  children: Snippet<[string]>; // Snippet<[variant]>
  href?: string; // renders <a> instead of <button>
  onselect?: (ev: MouseEvent) => void;
  disabled?: boolean; // (false) -> aria-disabled; skipped in nav; non-activatable
  attach?: Attachment<HTMLButtonElement | HTMLAnchorElement>;
  element?: HTMLButtonElement | HTMLAnchorElement; // bindable
  styling?: SVSClass;
  variant?: SVSVariant; // (VARIANT.NEUTRAL)
  // other button/anchor attributes are passed via ...rest; `class` is merged onto root
  // type, href, role, tabindex, aria-disabled, and onclick are component-owned
}
type MenuItemReqdProps = "children";
type MenuItemBindProps = "element";
interface MenuItemContext extends SVSContext {
  close(): void;
  orientation?: "horizontal" | "vertical";
}
```

### Others

No additional exports are available.

## Examples

The example code uses Tailwind CSS along with `SVSClass`.

### Basic

**Code**

```svelte src=MenuItemBasic.svelte
<script lang="ts">
  import { MenuItem, MenuList, MenuSeparator } from "svseeds";

  const childStyle1 = {
    whole: "flex min-w-44 flex-col gap-1 rounded-md border bg-white p-1 shadow-lg dark:bg-black",
  };
  const styling = {
    whole:
      "rounded-sm px-2 py-1 text-left text-sm aria-disabled:opacity-50 hover:bg-gray-100 focus:bg-gray-100 focus:outline-hidden dark:hover:bg-gray-800 dark:focus:bg-gray-800",
  };
  const childStyle2 = {
    whole: "my-1 border-t border-gray-200 dark:border-gray-800",
  };
</script>

<MenuList styling={childStyle1}>
  <MenuItem {styling}>Open</MenuItem>
  <MenuItem href="/docs/menu-item" {styling}>Open docs</MenuItem>
  <MenuSeparator styling={childStyle2} />
  <MenuItem disabled {styling}>Unavailable</MenuItem>
</MenuList>
```
### With Interactive Variant

**Code**

```svelte src=MenuItemPract.svelte
<script lang="ts">
  import { MenuItem, MenuList, MenuSeparator } 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:bg-gray-100 dark:hover:bg-gray-800 dark:focus:bg-gray-800",
    active: "hover:bg-teal-100 focus:bg-teal-100 dark:hover:bg-teal-900 dark:focus:bg-teal-900",
    inactive: "hover:bg-red-100 focus:bg-red-100 dark:hover:bg-red-900 dark:focus:bg-red-900",
    blue: "hover:bg-blue-100 focus:bg-blue-100 dark:hover:bg-blue-900 dark:focus:bg-blue-900",
    yellow: "hover:bg-yellow-100 focus:bg-yellow-100 dark:hover:bg-yellow-900 dark:focus:bg-yellow-900",
    sky: "hover:bg-sky-100 focus:bg-sky-100 dark:hover:bg-sky-900 dark:focus:bg-sky-900",
  };
  const variantStyle3 = {
    neutral: "border-gray-200 dark:border-gray-800",
    active: "border-teal-200 dark:border-teal-900",
    inactive: "border-red-200 dark:border-red-900",
    blue: "border-blue-200 dark:border-blue-900",
    yellow: "border-yellow-200 dark:border-yellow-900",
    sky: "border-sky-200 dark:border-sky-900",
  };
  const childStyle1 = {
    whole: {
      base: "flex min-w-44 flex-col gap-1 rounded-md border bg-white p-1 shadow-lg dark:bg-black",
      ...variantStyle1,
    },
  };
  const styling = {
    whole: {
      base: "rounded-sm px-2 py-1 text-left text-sm aria-disabled:opacity-50 focus:outline-hidden",
      ...variantStyle2,
    },
  };
  const childStyle2 = {
    whole: {
      base: "my-1 border-t",
      ...variantStyle3,
    },
  };
</script>

<MenuList {variant} styling={childStyle1}>
  <MenuItem {styling}>Open</MenuItem>
  <MenuItem href="/docs/menu-item" {styling}>Open docs</MenuItem>
  <MenuSeparator styling={childStyle2} />
  <MenuItem disabled {styling}>Unavailable</MenuItem>
</MenuList>
```