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​

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>
    <BreadcrumbsItem>
      <Link href="/" passHref>
        <BreadcrumbsLink>Home</BreadcrumbsLink>
      </Link>
    </BreadcrumbsItem>
    <BreadcrumbsItem>
      <Link href="/order-tracker" passHref>
        <BreadcrumbsLink>Order Tracker</BreadcrumbsLink>
      </Link>
    </BreadcrumbsItem>
    <BreadcrumbsItem>
      <Link href="/BT Halo for business" passHref>
        <BreadcrumbsLink>Breadcrumbs</BreadcrumbsLink>
      </Link>
    </BreadcrumbsItem>
  </Breadcrumbs>
);

React Router

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

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