Wizard

You can combine <Menu> and <Icon.Step> with wrappers like <Accordion>, <Section>, and <Box> to create a multi-step wizard.

Menu with Icon.Step

<Menu>
  <a href="/name">
    <Menu.Item>
      <Icon.Step marginRight variant="completed" />
      Name
    </Menu.Item>
  </a>
  <a href="/address">
    <Menu.Item>
      <Icon.Step marginRight variant="incomplete" />
      Address
    </Menu.Item>
  </a>
  <a href="/phone">
    <Menu.Item>
      <Icon.Step marginRight variant="active" />
      Phone
    </Menu.Item>
  </a>
  <a href="/message">
    <Menu.Item>
      <Icon.Step marginRight />
      Message
    </Menu.Item>
  </a>
  <a href="/confirm">
    <Menu.Item>
      <Icon.Step marginRight />
      Confirm
    </Menu.Item>
  </a>
</Menu>
<Menu>
  <a href="/name">
    <Menu.Item>
      <Icon.Step marginRight variant="completed" />
      Name
    </Menu.Item>
  </a>
  <a href="/address">
    <Menu.Item>
      <Icon.Step marginRight variant="incomplete" />
      Address
    </Menu.Item>
  </a>
  <a href="/phone">
    <Menu.Item>
      <Icon.Step marginRight variant="active" />
      Phone
    </Menu.Item>
  </a>
  <a href="/message">
    <Menu.Item>
      <Icon.Step marginRight />
      Message
    </Menu.Item>
  </a>
  <a href="/confirm">
    <Menu.Item>
      <Icon.Step marginRight />
      Confirm
    </Menu.Item>
  </a>
</Menu>

Section wizard

<Section>
  <Section.Header>Order form</Section.Header>
  <Section.Content>
    <Menu>...</Menu>
  </Section.Content>
</Section>
<Section>
  <Section.Header>Order form</Section.Header>
  <Section.Content>
    <Menu>...</Menu>
  </Section.Content>
</Section>

Accordion wizard

<Accordion>
  <Accordion.Item
    title={
      <Inline>
        <Inline.Stretch>Phone</Inline.Stretch>
        <span className="bfc-base-2">Step 3/5</span>
      </Inline>
    }
  >
    <Menu>...</Menu>
  </Accordion.Item>
</Accordion>
<Accordion>
  <Accordion.Item
    title={
      <Inline>
        <Inline.Stretch>Phone</Inline.Stretch>
        <span className="bfc-base-2">Step 3/5</span>
      </Inline>
    }
  >
    <Menu>...</Menu>
  </Accordion.Item>
</Accordion>

Box wizard

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

Responsive

For small screens a horizontal menu will not fit. A good option is to use <Accordion> for smaller screens.

Using css breakpoint classes you can hide and show elements based on screen width.

For instance, using to-small and from-small classes we can hide and show our menu wrapped in either an <Accordion> or <Box> at 600px width.

<Accordion className="to-small">
  <Menu>...</Menu>
</Accordion>
<Box className="from-small">
  <Menu horizontal>...</Menu>
</Box>
<Accordion className="to-small">
  <Menu>...</Menu>
</Accordion>
<Box className="from-small">
  <Menu horizontal>...</Menu>
</Box>

Interactive example