The menu can be rendered with icons:

const AddPersonIcon = require('../../visuals/Icon/svg/ic_person_add.svg');
const items = [1, 2, 3, 4].map(n => ({
  label: `Option ${n}`,
  key: String(n),
  'data-something': n,
  onSelect: () => alert(`Clicked on option ${n}`),
  icon: AddPersonIcon
}));

<Page>
  <div style={{ width: '300px' }}>
    <VerticalMenu selected={items[1]} items={items} header="Some nice menu" />
  </div>
</Page>;

The header is optional and will be not rendered if it is not specified:

const items = [1, 2, 3, 4].map(n => ({
  label: `Option ${n}`,
  key: String(n),
  onSelect: () => alert(`Clicked on option ${n}`),
}));

<Page>
  <div style={{ width: '300px' }}>
    <VerticalMenu selected={items[1]} items={items} />
  </div>
</Page>;

The menu can also be rendered in a disabled state:

const items = [1, 2, 3, 4].map(n => ({
  label: `Option ${n}`,
  key: String(n),
  onSelect: () => alert(`Clicked on option ${n}`),
}));

<Page>
  <div style={{ width: '300px' }}>
    <VerticalMenu selected={items[1]} items={items} header="This menu is disabled" disabled={true} />
  </div>
</Page>;