Skip to main content

Breadcrumbs

latest

Breadcrumbs was designed to be a fluid Arc component.

Breadcrumbs adapts to screen size and breadcrumbs content.

Mobile Trail​

When Screen size is < 425px breadcrumbs will revert to a back trail.

The backtrail will always the second from last item

Example​

{" "}

Mobile Behaviour​

Wrapping Behaviour​

Breadcrumbs will only wrap in two circumstances.

  1. The user expands compressed breadcrumbs

{" "}

  1. Breadcrumbs are bigger than the parent element

{" "}

Routing​

Arc Breadcrumbs are composable and allow Next/Router Links to be wrapped or nested. Below are useage examples of Breadcrumbs in a Next and React App.

Next Router

import { Breadcrumbs } from "@arc-ui/components";
import { Link } from "next/link";

  return (
    <Breadcrumbs>
      <Breadcrumbs.Item>
        <Link href="/" passHref>
          <Breadcrumbs.Link>Home</Breadcrumbs.Link>
        </Link>
      </Breadcrumbs.Item>
      <Breadcrumbs.Item>
        <Link href="/order-tracker" passHref>
          <Breadcrumbs.Link>Order Tracker</Breadcrumbs.Link>
        </Link>
      </Breadcrumbs.Item>
      <Breadcrumbs.Item>
        <Link href="/BT Halo for business" passHref>
          <Breadcrumbs.Link>Breadcrumbs</Breadcrumbs.Link>
        </Link>
      </Breadcrumbs.Item>
    </Breadcrumbs>
  );
};

React Router

import { Breadcrumbs } from "@arc-ui/components";
import Link from "react-router-dom";

  return (
    <Breadcrumbs>
      <Breadcrumbs.Item>
        <Breadcrumbs.Link>
          <Link to="/">Home</Link>
        </Breadcrumbs.Link>
      </Breadcrumbs.Item>
      <Breadcrumbs.Item>
        <Breadcrumbs.Link>
          <Link to="/order-tracker">Order Tracker</Link>
        </Breadcrumbs.Link>
      </Breadcrumbs.Item>
      <Breadcrumbs.Item>
        <Breadcrumbs.Link>BT Halo for business</Breadcrumbs.Link>
      </Breadcrumbs.Item>
    </Breadcrumbs>
  );
};