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>

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.

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

Box wrapper

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

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

Sandbox

This demo below is using <button> just to show active state.

For navigation you would use <a> or <Link> from your routing library instead.

import { useState } from "react";
import { faHouse } from "@fortawesome/free-solid-svg-icons/faHouse";
import { faUser } from "@fortawesome/free-solid-svg-icons/faUser";
import { faPenRuler } from "@fortawesome/free-solid-svg-icons/faPenRuler";
import Menu from "@intility/bifrost-react/Menu";
import Box from "@intility/bifrost-react/Box";
import Icon from "@intility/bifrost-react/Icon";

export default function MenuDemo() {
  const [active, setActive] = useState("home");

  return (
    <Box background radius border padding={16}>
      <Menu>
        <button
          type="button"
          className={active === "home" ? "active" : ""}
          onClick={() => setActive("home")}
        >
          <Menu.Item>
            <Icon icon={faHouse} marginRight />
            Home
          </Menu.Item>
        </button>
        <button
          type="button"
          className={active === "profile" ? "active" : ""}
          onClick={() => setActive("profile")}
        >
          <Menu.Item>
            <Icon icon={faUser} marginRight />
            Profile
          </Menu.Item>
        </button>
        <button
          type="button"
          className={active === "apps" ? "active" : ""}
          onClick={() => setActive("apps")}
        >
          <Menu.Item>
            <Icon icon={faPenRuler} marginRight />
            Applications
          </Menu.Item>
        </button>
      </Menu>
    </Box>
  );
}