# Component/Menu

> Props: component-menu.props.txt

## Examples


### Base One Depth Menu

```tsx
{
  render: args => <Menu {...args}>
      <MenuItem id='menu-item-1' label='menu item 1' />
      <MenuItem id='menu-item-2' label='menu item 2' />
      <MenuItem id='menu-item-3' label='menu item 3' />
    </Menu>,
  args: {}
}
```

### Controlled Navigation

```tsx
{
  render: () => {
    const [currentMenu, setCurrentMenu] = useState<string | undefined>('menu-group-item-3-3');
    const handleMenuChange = (id?: string) => {
      setCurrentMenu(id);
    };
    return <Stack direction='row' p={20} height={800} gap={8} style={{
      backgroundColor: semantic_colors.border.primary
    }}>
        <Stack direction='column' width={210}>
          <Menu selectedMenu={currentMenu} onClickMenu={handleMenuChange}>
            <MenuItem id='menu-item-1' label='menu item 1' icon={<IconZDelivery size={20} />} suffix={<SuffixBeta />} />
            <MenuGroup id='menu-group-1' label='menu group 1' icon={<IconHomeDashboard size={20} />}>
              <MenuItem id='menu-group-item-1-1' label='menu item 1-1' suffix={<SuffixNew />} />
              <MenuItem id='menu-group-item-1-2' label='menu item 1-2' />
              <MenuItem id='menu-group-item-1-3' label='menu item 1-3' />
            </MenuGroup>
            <MenuGroup id='menu-group-2' label='menu group 2' icon={<IconBarChart size={20} />}>
              <MenuItem id='menu-group-item-2-1' label='menu item 2-1' suffix={<SuffixNew />} />
              <MenuItem id='menu-group-item-2-2' label='menu item 2-2' />
              <MenuItem id='menu-group-item-2-3' label='menu item 2-3' />
            </MenuGroup>
            <MenuGroup id='menu-group-3' label='menu group 3' icon={<IconCoupon size={20} />}>
              <MenuItem id='menu-group-item-3-1' label='menu item 3-1' suffix={<SuffixNew />} />
              <MenuItem id='menu-group-item-3-2' label='menu item 3-2' />
              <MenuItem id='menu-group-item-3-3' label='menu item 3-3' />
              <MenuItem id='menu-group-item-3-4' label='menu item 3-4' suffix={<SuffixBeta />} />
            </MenuGroup>
          </Menu>
        </Stack>
        <Stack direction='column'>
          <Button kind='black' onClick={() => setCurrentMenu('menu-item-1')}>
            reset to menu-item-1
          </Button>
        </Stack>
      </Stack>;
  }
}
```

### With Child Toggle

```tsx
{
  render: args => <Menu {...args}>
      <MenuGroup id='menu-group-1' label='menu group 1' icon={<IconZDelivery size={20} />}>
        <MenuItem id='menu-item-1-1' label='menu item 1-1' />
        <MenuItem id='menu-item-1-2' label='menu item 1-2' />
        <MenuItem id='menu-item-3-1' label='menu item 1-3' />
      </MenuGroup>
      <MenuGroup id='menu-group-2' label='menu group 2' icon={<IconHomeDashboard size={20} />}>
        <MenuItem id='menu-item-2-1' label='menu item 2-1' />
        <MenuItem id='menu-item-2-2' label='menu item 2-2' />
      </MenuGroup>
    </Menu>,
  args: {
    toggleMode: true
  }
}
```

### With Icon

```tsx
{
  render: args => <Menu {...args}>
      <MenuItem id='menu-item-1' label='menu item 1' icon={<IconZDelivery size={20} />} />
      <MenuItem id='menu-item-2' label='menu item 2' icon={<IconHomeDashboard size={20} />} />
      <MenuItem id='menu-item-3' label='menu item 3' icon={<IconCoupon size={20} />} />
    </Menu>,
  args: {}
}
```

### With Suffix

```tsx
{
  render: args => <Menu {...args}>
      <MenuItem id='menu-item-1' label='menu item 1' icon={<IconZDelivery size={20} />} suffix={<SuffixNew />} />
      <MenuItem id='menu-item-2' label='menu item 2' icon={<IconHomeDashboard size={20} />} suffix={<SuffixBeta />} />
    </Menu>,
  args: {}
}
```