@antadesign/anta
    Preparing search index...

    Interface MenuItemCommonPropsUnreviewed

    Props shared by every menu item, link or not.

    interface MenuItemCommonProps {
        icon?: keyof IconShapes;
        label?: ReactNode;
        hint?: ReactNode;
        kbd?: string;
        iconTrailing?: keyof IconShapes;
        disabled?: boolean;
        selected?: boolean;
        tone?:
            | "neutral"
            | "brand"
            | "info"
            | "success"
            | "warning"
            | "critical"
            | string & {};
        toneScope?: ToneScope;
        value?: string
        | number;
        onSelect?: (
            event: any,
            detail: { value?: string | number; label?: ReactNode },
        ) => void;
        onMouseDown?: (event: any) => void;
        role?: string;
        children?: ReactNode;
        className?: string;
        style?: CSSProperties;
        id?: string;
        title?: string;
        slot?: string;
        tabIndex?: number;
        key?: string | number | null;
        [key: `data-${string}`]: unknown;
        [key: `aria-${string}`]: unknown;
    }

    Hierarchy (View Summary)

    Indexable

    • [key: `data-${string}`]: unknown

      Any data-* attribute is forwarded to the rendered element.

    • [key: `aria-${string}`]: unknown

      Any aria-* attribute is forwarded to the rendered element.

    Index
    icon? label? hint? kbd? iconTrailing? disabled? selected? tone? toneScope? value? onSelect? onMouseDown? role? children? className? style? id? title? slot? tabIndex? key?
    icon?: keyof IconShapes

    Leading icon shape.

    label?: ReactNode

    The item's text. Usually a string, but any node is accepted — e.g. a filtered Select bolds the matched substring. Omit and pass children for richer content.

    hint?: ReactNode

    Secondary text under the label — explanatory copy, like RadioGroup's option hint. Requires label (it stacks in a column beneath it). Muted (--text-3) and tracks the row's tone. A string, or any node.

    kbd?: string

    Trailing shortcut hint, e.g. "⌘E". Anta translates it to aria-keyshortcuts and hides the visual glyphs from assistive technology. Use + within a chord and spaces between shortcuts ("⌘K ⌘S" becomes "Meta+K Meta+S"). Pass aria-keyshortcuts to override the translation. This does not bind the shortcut.

    iconTrailing?: keyof IconShapes

    A trailing icon. On a submenu item this overrides the default chevron (omit it to keep the chevron); on a normal item it's the trailing glyph (omit for none).

    disabled?: boolean

    Disable the item: greyed out, not focusable for activation, no close. A disabled link also drops its href, so it can't navigate.

    selected?: boolean

    Mark the item as selected. On a plain row (no selectionIndicator) this is a persistent background tint, the same resting fill a pressed row shows — also the way to flag the current page on a link item. On a checkable row (selectionIndicator set) it instead drives the indicator and the row's aria-checked.

    tone?:
        | "neutral"
        | "brand"
        | "info"
        | "success"
        | "warning"
        | "critical"
        | string & {}

    Semantic tone — colors the label, icon, hover/selected tint, and selection indicator. A named tone, or any literal CSS color ('#ff1493', 'rebeccapurple') for a one-off custom tone whose hue + chroma are kept while the lightness is pinned to match the brand text. critical is the destructive action; neutral (the default) is the standard gray.

    neutral
    toneScope?: ToneScope

    Apply tone to every row state, or only while the row is selected. In selected scope, an unselected row and its indicator stay neutral.

    'all'
    value?: string | number

    An opaque value identifying this item, handed back in onSelect's detail so a shared handler can tell which row was chosen without a per-item closure.

    onSelect?: (
        event: any,
        detail: { value?: string | number; label?: ReactNode },
    ) => void

    Activation handler — fires when this item is chosen (click / Enter / Space), unless it's disabled. It does not fire for a submenu parent (clicking that opens the flyout, which isn't a selection) nor for a selection bubbling up from a nested submenu. On a link item it fires alongside the navigation. Receives the event plus a { value, label } detail.

    onMouseDown?: (event: any) => void

    Raw mousedown on the row. Mainly to preventDefault() so the row doesn't take focus on a mouse press — e.g. a combobox option keeping focus in its input field while the click still selects.

    role?: string

    ARIA role override. Defaults to the role implied by selectionIndicator (menuitem / menuitemcheckbox / menuitemradio); set it to reparent the row under a different container role — e.g. option inside a listbox.

    children?: ReactNode

    Item content. With label set, children are extra content — most notably the nested <Menu> for a submenu parent.

    className?: string

    CSS class on the component's root element (merged with the component's own classes). Use it directly for layout and positioning — grid/flex placement, margins, alignment — rather than wrapping the component in a <div>/<span>.

    style?: CSSProperties

    Inline styles on the component's root element. Set layout/positioning here (or via className) directly on the component instead of adding a wrapper.

    id?: string

    HTML id attribute.

    title?: string

    HTML title attribute — native browser tooltip on hover.

    slot?: string

    Assigns the element to a named <slot> of a parent web component (e.g. slot="header" inside a <Card>, slot="footer" inside a <Dialog>).

    tabIndex?: number

    Tab order. Set to -1 to skip the element when tabbing.

    key?: string | number | null

    React/Preact reconciliation key when rendered inside a list. Consumed by the JSX runtime (not forwarded as a DOM attribute).

    Settings
    Member Visibility

    On This Page
    Properties