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>
  [more items...]
</Menu>

Place <Menu> inside a box with background to make the hover style visible.

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>

With icons

<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.

<a href="/step1">
  <Menu.Item>
    <Icon.Step variant="completed" marginRight />
    Step 1
  </Menu.Item>
</a>

Horizontal

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

<Menu horizontal>