Menu

Basic menu

Basic optional menu with a list of items. By default <Menu> will render a vertical layout with 8px gap. Menu items wrapped in <a> or <button> will get background-color on hover.

<Menu>
  <a href="/">
    <Menu.Item>Home</Menu.Item>
  </a>
  <a href="/profile">
    <Menu.Item>Profile</Menu.Item>
  </a>
  <a href="/applications">
    <Menu.Item>Applications</Menu.Item>
  </a>
</Menu>
<Menu>
  <a href="/">
    <Menu.Item>Home</Menu.Item>
  </a>
  <a href="/profile">
    <Menu.Item>Profile</Menu.Item>
  </a>
  <a href="/applications">
    <Menu.Item>Applications</Menu.Item>
  </a>
</Menu>

Active item

Mark a <Menu.Item> as active by applying .active to <a> or <button>.

<a href="/" className="active">
  <Menu.Item>Home</Menu.Item>
</a>
<a href="/" className="active">
  <Menu.Item>Home</Menu.Item>
</a>

With icons

<a href="/">
  <Menu.Item>
    <Icon icon={faHouse} marginRight />
    Home
  </Menu.Item>
</a>
<a href="/">
  <Menu.Item>
    <Icon icon={faHouse} marginRight />
    Home
  </Menu.Item>
</a>

With steps

We can use <Icon.Step> to create a step-by-step wizard.

<Menu>
  <a href="/step1">
    <Menu.Item>
      <Icon.Step variant="completed" marginRight />
      Step 1
    </Menu.Item>
  </a>
  <a href="/step2">
    <Menu.Item>
      <Icon.Step variant="incomplete" marginRight />
      Step 2
    </Menu.Item>
  </a>
  <a href="/step3">
    <Menu.Item>
      <Icon.Step variant="active" marginRight />
      Step 3
    </Menu.Item>
  </a>
  <a href="/step4">
    <Menu.Item>
      <Icon.Step marginRight />
      Step 4
    </Menu.Item>
  </a>
</Menu>
<Menu>
  <a href="/step1">
    <Menu.Item>
      <Icon.Step variant="completed" marginRight />
      Step 1
    </Menu.Item>
  </a>
  <a href="/step2">
    <Menu.Item>
      <Icon.Step variant="incomplete" marginRight />
      Step 2
    </Menu.Item>
  </a>
  <a href="/step3">
    <Menu.Item>
      <Icon.Step variant="active" marginRight />
      Step 3
    </Menu.Item>
  </a>
  <a href="/step4">
    <Menu.Item>
      <Icon.Step marginRight />
      Step 4
    </Menu.Item>
  </a>
</Menu>

Horizontal

<Menu> can render items horizontaly by applying the horizontal prop.

  <Menu horizontal>
  <Menu horizontal>

Box wrapper

Wrap the <Menu> in a <Box> to add padding, background, and border.

<Box background radius border padding={16}>
  <Menu horizontal>...</Menu>
</Box>
<Box background radius border padding={16}>
  <Menu horizontal>...</Menu>
</Box>