Menu – Code – AI Kit

Implementation
Menu Props
MenuOption

Common Examples

To use the Menu, pass a Carto Button through trigger and configured MenuOption objects through items. The kit forbids composed menu-item children.

import { Button, Menu } from "@servicetitan/anvil2-ai-kit";

function ExampleComponent() {
  return (
    <Menu
      trigger={<Button label="Options" variant="secondary" />}
      items={[
        { id: "rename", label: "Rename", onAction: rename },
        { id: "delete", label: "Delete", onAction: remove },
      ]}
    />
  );
}

Selection

The default selectionMode="none" creates an action menu that closes after activation. Use "single" or "multiple" for persistent checked selections.

Icons and disabled options

Pass an icon from @servicetitan/anvil2-icons through an option’s icon field. Set isDisabled on an option to prevent focus, selection, and activation.

Link options

Pass href to render an option as a navigation link. An option with target="_blank" receives a safe rel default and a localized new-tab announcement.

Placement and long lists

placement opens the popover above or below its trigger with a fixed 4px gap. Long labels wrap at the 360px width ceiling, and long lists scroll within available viewport height.

Internationalization

Menu option labels are consumer content and must be localized before they are passed in items. External link options use ai-kit.menu.opensInNewTab for the hidden new-tab announcement.

<AiKitIntlProvider
  messages={{
    "ai-kit.menu.opensInNewTab": "(opens in a separate tab)",
  }}
>
  <Menu
    trigger={<Button label="Help" />}
    items={[
      {
        id: "docs",
        label: "Documentation",
        href: "https://example.com",
        target: "_blank",
      },
    ]}
  />
</AiKitIntlProvider>

React Accessibility

React Aria supplies keyboard navigation, typeahead, focus management, and selection semantics.
Arrow keys move between options. Enter or Space activates the focused option. Escape closes the menu and restores focus to the trigger.
External link options include a localized hidden new-tab announcement.

<Menu
  trigger={<Button label="Options" />}
  items={[{ id: "rename", label: "Rename" }]}
  placement="bottom"
  selectionMode="none"
/>

The Menu accepts the following props and forwards remaining React Aria MenuTrigger and Menu props except their composed children and render slots.

MenuOption[]

required

Options to render from top to bottom.

ReactElement<ButtonProps>

required

Carto Button that opens the menu.

string

Class merged onto the popover surface.

boolean

Whether the menu starts open when uncontrolled.

boolean

Controlled open state. Pair with onOpenChange.

(isOpen: boolean) => void

Called when the menu’s open state changes.

(keys: Selection) => void

Called when selected option keys change.

"top" | "bottom"

default:"bottom"

Side where the popover opens relative to its trigger.

Selection

Controlled selected option keys.

"none" | "single" | "multiple"

default:"none"

"none" creates an action menu. "single" and "multiple" persist checked selection.

const option: MenuOption = {
  id: "rename",
  label: "Rename",
  icon: <IconPencil />,
  onAction: rename,
};

`MenuOption`

MenuOption extends React Aria MenuItem props with configured content.

Key

required

Selection key reported through the menu’s selection APIs.

string

required

Visible label and accessible name.

Href

Destination that renders the option as a navigation link.

IconElement

Leading icon rendered before the label.

boolean

Prevents focus, selection, and activation.

() => void

Handles activation for an action option.

string

Link target. "_blank" adds the localized new-tab announcement.

AI Kit

Agent Experience

Menu – Code

Common Examples

Selection

Icons and disabled options

Link options

Placement and long lists

Internationalization

React Accessibility

`Menu` Props

`MenuOption`

​Common Examples

​Selection

​Icons and disabled options

​Link options

​Placement and long lists

​Internationalization

​React Accessibility

​Menu Props

​MenuOption

Common Examples

Selection

Icons and disabled options

Link options

Placement and long lists

Internationalization

React Accessibility

`Menu` Props

`MenuOption`