MenuItem
An actionable item for a MenuList, rendered as a button or link.
Usage
Use inside MenuList.
<MenuList>
<MenuItem {...props}>Item</MenuItem>
</MenuList>Anatomy
The class attribute values represent part names. Other attributes represent their corresponding props.
{#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.
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", andaria-disabledwhendisabledis set.
Menu navigation and roving focus are owned by the parent menu; see MenuList 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 for the library's approach.
Exports
Types
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.