---
title: Menu
category: General
---

```jsx live
render(
  <Menu>
    <Menu.Item>Item 1</Menu.Item>
    <Menu.Item>Item 2</Menu.Item>
    <Menu.Item>Item 3</Menu.Item>
  </Menu>
)
```

```jsx live
render(
  <Menu>
    <Menu.Item isHighlighted>Can be highlighted</Menu.Item>
    <Menu.Item>Should be used as a child of Menu</Menu.Item>
    <Menu.Item>
      <Icon name="person" marginRight={1} /> Add icons and other things
    </Menu.Item>
  </Menu>
)
```

```jsx live
render(
  <Menu>
    <Menu.Heading>Heading 1</Menu.Heading>
    <Menu.Item>Item 1</Menu.Item>
    <Menu.Item>Item 2</Menu.Item>
    <Divider margin={0.5} />
    <Menu.Heading>Heading 2</Menu.Heading>
    <Menu.Item>Item 3</Menu.Item>
    <Menu.Item>Item 4</Menu.Item>
  </Menu>
)
```