# MenuList

Standalone list of menu actions, usually rendered inside a Menu. Subcomponents: MenuDivider, MenuGroup, MenuGroupHeader, MenuItem, MenuItemCheckbox, MenuItemLink, MenuItemRadio, MenuSplitGroup.

## Default

Source: CoreAI.

Displays a standalone list of common editing actions.

[Download source](/coreai-design-system/source/examples/components-menu-menulist--default.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import { MenuList } from "@coreai-ds/react-components";
import { MenuItem } from "@coreai-ds/react-components";

export const Default = () => {
    const styles = /* css */ `
      .menu-list-default-example {
        background-color: var(--colorNeutralBackground1);
        min-width: 128px;
        min-height: 48px;
        max-width: 300px;
        width: max-content;
        box-shadow: var(--shadow16);
        padding-top: var(--spacingVerticalXS);
        padding-bottom: var(--spacingVerticalXS);
      }
    `;
    return (<>
        <style>{styles}</style>
        <MenuList className="menu-list-default-example">
          <MenuItem>Cut</MenuItem>
          <MenuItem>Paste</MenuItem>
          <MenuItem>Edit</MenuItem>
        </MenuList>
      </>);
};

export default Default;
```

## API

Generated CoreAI prop summaries, not replacement type declarations. Most native DOM/event and ARIA props are omitted. `?` means optional; JSDoc shows defaults, deprecations, and conditional requirements. Defaults assume the standard CoreAI provider.

### MenuList API

Define a styled MenuList, using the `useMenuList_unstable` hook.

```ts
interface MenuListProps {
  as?: "div";

  /**
   * Map of all checked values
   */
  checkedValues?: Record<string, string[]>;

  children?: any;

  className?: string;

  /**
   * Default values to be checked on mount
   */
  defaultCheckedValues?: Record<string, string[]>;

  /**
   * States that menu items can contain selectable items and reserve slots for item alignment
   */
  hasCheckmarks?: boolean;

  /**
   * States that menu items can contain icons and reserve slots for item alignment
   */
  hasIcons?: boolean;

  /**
   * Callback when checked items change for value with a name
   */
  onCheckedValueChange?: ((e: MenuCheckedValueChangeEvent, data: MenuCheckedValueChangeData) => void);

  ref?: Ref<HTMLDivElement>;

  style?: CSSProperties;
}
```

### MenuDivider API

Define a styled MenuDivider, using the `useMenuDivider_unstable` hook.

```ts
interface MenuDividerProps {
  as?: "div";

  children?: any;

  className?: string;

  ref?: Ref<HTMLDivElement>;

  style?: CSSProperties;
}
```

### MenuGroup API

Define a styled MenuGroup, using the `useMenuGroup_unstable` hook.

```ts
interface MenuGroupProps {
  as?: "div";

  children?: any;

  className?: string;

  ref?: Ref<HTMLDivElement>;

  style?: CSSProperties;
}
```

### MenuGroupHeader API

Define a styled MenuGroupHeader, using the `useMenuGroupHeader_unstable` hook.

```ts
interface MenuGroupHeaderProps {
  as?: "div";

  children?: any;

  className?: string;

  ref?: Ref<HTMLDivElement>;

  style?: CSSProperties;
}
```

### MenuItem API

Define a styled MenuItem, using the `useMenuItem_unstable` and `useMenuItemStyles_unstable` hook.

```ts
interface MenuItemProps {
  as?: "div";

  /**
   * A helper slot for alignment when a menu item is used with selectable menuitems
   * Avoid using this slot as a replacement for MenuItemCheckbox and MenuItemRadio components
   */
  checkmark?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  children?: any;

  className?: string;

  /**
   * Component children are placed in this slot
   * Avoid using the `children` property in this slot in favour of Component children whenever possible
   */
  content?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  disabled?: boolean;

  /**
   * @deprecated this property does nothing.
   * disabled focusable is by default by simply using `disabled` property
   */
  disabledFocusable?: boolean;

  /**
   * If the menu item is a trigger for a submenu
   * @default false
   */
  hasSubmenu?: boolean;

  /**
   * Icon slot rendered before children content
   */
  icon?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  /**
   * Clicking on the menu item will not dismiss an open menu
   * @default false
   */
  persistOnClick?: boolean;

  ref?: Ref<HTMLDivElement>;

  /**
   * Secondary content rendered opposite the primary content (e.g Shortcut text)
   */
  secondaryContent?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  style?: CSSProperties;

  /**
   * Icon slot that shows the indicator for a submenu
   */
  submenuIndicator?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  /**
   * Additional descriptor to main content that creates a multiline layout
   */
  subText?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;
}
```

### MenuItemCheckbox API

Define a styled MenuItemCheckbox, using the `useMenuItemCheckbox_unstable` hook.

```ts
interface MenuItemCheckboxProps {
  as?: "div";

  /**
   * A helper slot for alignment when a menu item is used with selectable menuitems
   * Avoid using this slot as a replacement for MenuItemCheckbox and MenuItemRadio components
   */
  checkmark?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  children?: any;

  className?: string;

  /**
   * Component children are placed in this slot
   * Avoid using the `children` property in this slot in favour of Component children whenever possible
   */
  content?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  disabled?: boolean;

  /**
   * @deprecated this property does nothing.
   * disabled focusable is by default by simply using `disabled` property
   */
  disabledFocusable?: boolean;

  /**
   * If the menu item is a trigger for a submenu
   * @default false
   */
  hasSubmenu?: boolean;

  /**
   * Icon slot rendered before children content
   */
  icon?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  /**
   * Follows input convention
   * https://www.w3schools.com/jsref/prop_checkbox_name.asp
   */
  name: string;

  /**
   * Clicking on the menu item will not dismiss an open menu
   * @default false
   */
  persistOnClick?: boolean;

  ref?: Ref<HTMLDivElement>;

  /**
   * Secondary content rendered opposite the primary content (e.g Shortcut text)
   */
  secondaryContent?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  style?: CSSProperties;

  /**
   * Icon slot that shows the indicator for a submenu
   */
  submenuIndicator?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  /**
   * Additional descriptor to main content that creates a multiline layout
   */
  subText?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  /**
   * Follows input convention
   * https://www.w3schools.com/jsref/prop_checkbox_value.asp
   */
  value: string;
}
```

### MenuItemLink API

MenuItemLink component

```ts
interface MenuItemLinkProps {
  as?: "a";

  /**
   * A helper slot for alignment when a menu item is used with selectable menuitems
   * Avoid using this slot as a replacement for MenuItemCheckbox and MenuItemRadio components
   */
  checkmark?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  children?: any;

  className?: string;

  /**
   * Component children are placed in this slot
   * Avoid using the `children` property in this slot in favour of Component children whenever possible
   */
  content?: ((WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null) & string) | undefined;

  disabled?: boolean;

  href?: string;

  /**
   * Icon slot rendered before children content
   */
  icon?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  ref?: Ref<HTMLAnchorElement>;

  /**
   * Secondary content rendered opposite the primary content (e.g Shortcut text)
   */
  secondaryContent?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  style?: CSSProperties;
}
```

### MenuItemRadio API

Define a styled MenuItemRadio, using the `useMenuItemRadio_unstable` hook.

```ts
interface MenuItemRadioProps {
  as?: "div";

  /**
   * A helper slot for alignment when a menu item is used with selectable menuitems
   * Avoid using this slot as a replacement for MenuItemCheckbox and MenuItemRadio components
   */
  checkmark?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  children?: any;

  className?: string;

  /**
   * Component children are placed in this slot
   * Avoid using the `children` property in this slot in favour of Component children whenever possible
   */
  content?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  disabled?: boolean;

  /**
   * @deprecated this property does nothing.
   * disabled focusable is by default by simply using `disabled` property
   */
  disabledFocusable?: boolean;

  /**
   * If the menu item is a trigger for a submenu
   * @default false
   */
  hasSubmenu?: boolean;

  /**
   * Icon slot rendered before children content
   */
  icon?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  /**
   * Follows input convention
   * https://www.w3schools.com/jsref/prop_checkbox_name.asp
   */
  name: string;

  /**
   * Clicking on the menu item will not dismiss an open menu
   * @default false
   */
  persistOnClick?: boolean;

  ref?: Ref<HTMLDivElement>;

  /**
   * Secondary content rendered opposite the primary content (e.g Shortcut text)
   */
  secondaryContent?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  style?: CSSProperties;

  /**
   * Icon slot that shows the indicator for a submenu
   */
  submenuIndicator?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  /**
   * Additional descriptor to main content that creates a multiline layout
   */
  subText?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  /**
   * Follows input convention
   * https://www.w3schools.com/jsref/prop_checkbox_value.asp
   */
  value: string;
}
```

### MenuSplitGroup API

Layout wrapper that provides extra keyboard navigation behavior for two `MenuItem` components.

```ts
interface MenuSplitGroupProps {
  as?: "div";

  children?: any;

  className?: string;

  ref?: Ref<HTMLDivElement>;

  style?: CSSProperties;
}
```

## Implementation

CoreAI 0.12.0; Fluent 9.74.9.

[Setup and dependencies](/coreai-design-system/guides/Package.md).

Import components from `@coreai-ds/react-components`. CoreAI guidance above takes precedence over API demonstration examples.

## Checkbox Items

Source: Fluent, adapted for CoreAI.

[Download source](/coreai-design-system/source/examples/components-menu-menulist--checkbox-items.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import { tokens } from "@coreai-ds/react-components";
import { MenuList } from "@coreai-ds/react-components";
import { MenuItemCheckbox } from "@coreai-ds/react-components";
import { bundleIcon } from "@fluentui/react-icons";
import { CutFilled } from "@fluentui/react-icons";
import { CutRegular } from "@fluentui/react-icons";
import { ClipboardPasteFilled } from "@fluentui/react-icons";
import { ClipboardPasteRegular } from "@fluentui/react-icons";
import { EditFilled } from "@fluentui/react-icons";
import { EditRegular } from "@fluentui/react-icons";
import * as React from 'react';

const useMenuListContainerStyles = makeStyles({
    container: {
        backgroundColor: tokens.colorNeutralBackground1,
        minWidth: '128px',
        minHeight: '48px',
        maxWidth: '300px',
        width: 'max-content',
        boxShadow: `${tokens.shadow16}`,
        paddingTop: '4px',
        paddingBottom: '4px',
    },
});

const CutIcon = bundleIcon(CutFilled, CutRegular);

const PasteIcon = bundleIcon(ClipboardPasteFilled, ClipboardPasteRegular);

const EditIcon = bundleIcon(EditFilled, EditRegular);

export const CheckboxItems = (): JSXElement => {
    const styles = useMenuListContainerStyles();
    return (<div className={styles.container}>
      <MenuList>
        <MenuItemCheckbox icon={<CutIcon />} name="edit" value="cut">
          Cut
        </MenuItemCheckbox>
        <MenuItemCheckbox icon={<PasteIcon />} name="edit" value="paste">
          Paste
        </MenuItemCheckbox>
        <MenuItemCheckbox icon={<EditIcon />} name="edit" value="edit">
          Edit
        </MenuItemCheckbox>
      </MenuList>
    </div>);
};

export default CheckboxItems;
```

## Controlled Checkbox Items

Source: Fluent, adapted for CoreAI.

[Download source](/coreai-design-system/source/examples/components-menu-menulist--controlled-checkbox-items.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import { tokens } from "@coreai-ds/react-components";
import * as React from 'react';
import type { MenuProps } from "@coreai-ds/react-components";
import { MenuList } from "@coreai-ds/react-components";
import { MenuItemCheckbox } from "@coreai-ds/react-components";
import { bundleIcon } from "@fluentui/react-icons";
import { CutFilled } from "@fluentui/react-icons";
import { CutRegular } from "@fluentui/react-icons";
import { ClipboardPasteFilled } from "@fluentui/react-icons";
import { ClipboardPasteRegular } from "@fluentui/react-icons";
import { EditFilled } from "@fluentui/react-icons";
import { EditRegular } from "@fluentui/react-icons";

const useMenuListContainerStyles = makeStyles({
    container: {
        backgroundColor: tokens.colorNeutralBackground1,
        minWidth: '128px',
        minHeight: '48px',
        maxWidth: '300px',
        width: 'max-content',
        boxShadow: `${tokens.shadow16}`,
        paddingTop: '4px',
        paddingBottom: '4px',
    },
});

const CutIcon = bundleIcon(CutFilled, CutRegular);

const PasteIcon = bundleIcon(ClipboardPasteFilled, ClipboardPasteRegular);

const EditIcon = bundleIcon(EditFilled, EditRegular);

export const ControlledCheckboxItems = (): JSXElement => {
    const styles = useMenuListContainerStyles();
    const [checkedValues, setCheckedValues] = React.useState<Record<string, string[]>>({ edit: ['cut', 'paste'] });
    const onChange: MenuProps['onCheckedValueChange'] = (e, { name, checkedItems }) => {
        setCheckedValues(s => {
            return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems };
        });
    };
    return (<div className={styles.container}>
      <MenuList checkedValues={checkedValues} onCheckedValueChange={onChange}>
        <MenuItemCheckbox icon={<CutIcon />} name="edit" value="cut">
          Cut
        </MenuItemCheckbox>
        <MenuItemCheckbox icon={<PasteIcon />} name="edit" value="paste">
          Paste
        </MenuItemCheckbox>
        <MenuItemCheckbox icon={<EditIcon />} name="edit" value="edit">
          Edit
        </MenuItemCheckbox>
      </MenuList>
    </div>);
};

export default ControlledCheckboxItems;
```

## Controlled Radio Items

Source: Fluent, adapted for CoreAI.

[Download source](/coreai-design-system/source/examples/components-menu-menulist--controlled-radio-items.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import { tokens } from "@coreai-ds/react-components";
import * as React from 'react';
import type { MenuProps } from "@coreai-ds/react-components";
import { MenuList } from "@coreai-ds/react-components";
import { MenuItemRadio } from "@coreai-ds/react-components";
import { bundleIcon } from "@fluentui/react-icons";
import { CutFilled } from "@fluentui/react-icons";
import { CutRegular } from "@fluentui/react-icons";
import { ClipboardPasteFilled } from "@fluentui/react-icons";
import { ClipboardPasteRegular } from "@fluentui/react-icons";
import { EditFilled } from "@fluentui/react-icons";
import { EditRegular } from "@fluentui/react-icons";

const useMenuListContainerStyles = makeStyles({
    container: {
        backgroundColor: tokens.colorNeutralBackground1,
        minWidth: '128px',
        minHeight: '48px',
        maxWidth: '300px',
        width: 'max-content',
        boxShadow: `${tokens.shadow16}`,
        paddingTop: '4px',
        paddingBottom: '4px',
    },
});

const CutIcon = bundleIcon(CutFilled, CutRegular);

const PasteIcon = bundleIcon(ClipboardPasteFilled, ClipboardPasteRegular);

const EditIcon = bundleIcon(EditFilled, EditRegular);

export const ControlledRadioItems = (): JSXElement => {
    const styles = useMenuListContainerStyles();
    const [checkedValues, setCheckedValues] = React.useState<Record<string, string[]>>({ font: ['calibri'] });
    const onChange: MenuProps['onCheckedValueChange'] = (e, { name, checkedItems }) => {
        setCheckedValues(s => ({ ...s, [name]: checkedItems }));
    };
    return (<div className={styles.container}>
      <MenuList checkedValues={checkedValues} onCheckedValueChange={onChange}>
        <MenuItemRadio icon={<CutIcon />} name="font" value="segoe">
          Segoe
        </MenuItemRadio>
        <MenuItemRadio icon={<PasteIcon />} name="font" value="calibri">
          Calibri
        </MenuItemRadio>
        <MenuItemRadio icon={<EditIcon />} name="font" value="arial">
          Arial
        </MenuItemRadio>
      </MenuList>
    </div>);
};

export default ControlledRadioItems;
```

## Menu List With Nested Submenus

Source: Fluent, adapted for CoreAI.

A permanent `MenuList` can also nest `Menu` components. This can be useful when embedding `MenuList` inside
a custom temporary surface such as a popover dialog.

[Download source](/coreai-design-system/source/examples/components-menu-menulist--menu-list-with-nested-submenus.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import { tokens } from "@coreai-ds/react-components";
import { MenuList } from "@coreai-ds/react-components";
import { MenuItem } from "@coreai-ds/react-components";
import { Menu } from "@coreai-ds/react-components";
import { MenuTrigger } from "@coreai-ds/react-components";
import { MenuPopover } from "@coreai-ds/react-components";
import * as React from 'react';

const useMenuListContainerStyles = makeStyles({
    container: {
        backgroundColor: tokens.colorNeutralBackground1,
        minWidth: '128px',
        minHeight: '48px',
        maxWidth: '300px',
        width: 'max-content',
        boxShadow: `${tokens.shadow16}`,
        paddingTop: '4px',
        paddingBottom: '4px',
    },
});

export const MenuListWithNestedSubmenus = (): JSXElement => {
    const styles = useMenuListContainerStyles();
    return (<div className={styles.container}>
      <MenuList>
        <MenuItem>Cut</MenuItem>
        <MenuItem>Paste</MenuItem>
        <MenuItem>Edit</MenuItem>
        <Menu>
          <MenuTrigger disableButtonEnhancement>
            <MenuItem>Preferences</MenuItem>
          </MenuTrigger>
          <MenuPopover>
            <MenuList>
              <MenuItem>Cut</MenuItem>
              <MenuItem>Paste</MenuItem>
              <MenuItem>Edit</MenuItem>
            </MenuList>
          </MenuPopover>
        </Menu>
      </MenuList>
    </div>);
};

export default MenuListWithNestedSubmenus;
```

## Radio Items

Source: Fluent, adapted for CoreAI.

[Download source](/coreai-design-system/source/examples/components-menu-menulist--radio-items.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import { tokens } from "@coreai-ds/react-components";
import { MenuList } from "@coreai-ds/react-components";
import { MenuItemRadio } from "@coreai-ds/react-components";
import { bundleIcon } from "@fluentui/react-icons";
import { CutFilled } from "@fluentui/react-icons";
import { CutRegular } from "@fluentui/react-icons";
import { ClipboardPasteFilled } from "@fluentui/react-icons";
import { ClipboardPasteRegular } from "@fluentui/react-icons";
import { EditFilled } from "@fluentui/react-icons";
import { EditRegular } from "@fluentui/react-icons";
import * as React from 'react';

const useMenuListContainerStyles = makeStyles({
    container: {
        backgroundColor: tokens.colorNeutralBackground1,
        minWidth: '128px',
        minHeight: '48px',
        maxWidth: '300px',
        width: 'max-content',
        boxShadow: `${tokens.shadow16}`,
        paddingTop: '4px',
        paddingBottom: '4px',
    },
});

const CutIcon = bundleIcon(CutFilled, CutRegular);

const PasteIcon = bundleIcon(ClipboardPasteFilled, ClipboardPasteRegular);

const EditIcon = bundleIcon(EditFilled, EditRegular);

export const RadioItems = (): JSXElement => {
    const styles = useMenuListContainerStyles();
    return (<div className={styles.container}>
      <MenuList>
        <MenuItemRadio icon={<CutIcon />} name="font" value="segoe">
          Segoe
        </MenuItemRadio>
        <MenuItemRadio icon={<PasteIcon />} name="font" value="calibri">
          Calibri
        </MenuItemRadio>
        <MenuItemRadio icon={<EditIcon />} name="font" value="arial">
          Arial
        </MenuItemRadio>
      </MenuList>
    </div>);
};

export default RadioItems;
```