Design System: Creating a Breadcrumb

Why they exist

User experience is just as important as the content of your website. A user should be able to easily and intuitively navigate through your website. This is why “breadcrumbs” exists.

What it means

In simple terms, a breadcrumb is a footprint that helps a visitor navigate a website in an organized way.

In technical terms, a breadcrumb is a navigational element used to indicate the current page the user is relative to the page's hierarchy.

Scenario

Let's say we need to design a breadcrumb for when the user is searching for the award-winning fiction books.

Books › Science Fiction › Award Winners

UI exploration

HTML blueprint
Let's start with the semantic HTML Structure of a breadcrumb and I'll break down each part:

<nav aria-label="breadcrumb">
  <ol>
    <li>
      <a href="http://site.com/books">Books</a>
    </li>
    <li>
      <a href="http://site.com/books/sciencefiction">Science Fiction</a>
    </li>
    <li>
      <a
        href="http://site.com/books/sciencefiction/award-winners"
        aria-current="page"
      >
        Award Winners
      </a>
    </li>
  </ol>
</nav>

• The <nav> tag shows that the breadcrumb is a navigation element. Adding aria-label gives it a label that screen readers can announce.

A screen reader is a technology that speaks out text on a screen based on where the user is currently focused.

• The <ol> tag shows that the breadcrumb is an ordered list of links.

• The <li> tag represents a breadcrumb item that houses the link.

Typically when you use <ol> or <ui> in HTML, it needs to have a <li>.

• The <a> tag represents a breadcrumb link. Notice the last link has aria-current="page". This is used to indicate that it represents the current page.

Styling the breadcrumb
When styling widgets like this, I tend to limit the use of class names and prefer to leverage the structure of the HTML in CSS.

Recap: Here's the HTML structure

<nav aria-label="breadcrumb">
  <ol>
    <li>
      <a href="http://site.com/books">Books</a>
    </li>
    <li>
      <a href="http://site.com/books/sciencefiction">Science Fiction</a>
    </li>
    <li>
      <a
        href="http://site.com/books/sciencefiction/award-winners"
        aria-current="page"
      >
        Award Winners
      </a>
    </li>
  </ol>
</nav>

Then here's how I'd style it using SASS or SCSS.

nav[aria-label="breadcrumb"] {
  padding: 10px;

  ol {
    list-style-type: none;
    display: flex;

    li {
      // little trick to add "/" separators
      &:not(:last-child):after{
        content: "/";
        color: #c4c4c4;
        display: inline-block;
        margin: 0 12px;
      }

      a{
        color: rgb(102, 112, 255);
        text-decoration: none;

        &:hover{
          text-decoration: underline
        }

      // style the breadcrumb that represents the current page 
        &[aria-current="page"]{
          color: #333;
          text-decoration: none
        }
      }
    }
  }
}

Here's the codesandbox for the HTML and CSS. Feel free to play with it.

Creating a component

Since I mostly use React.js so here's I'd transform the HTML markup to composable components. I believe something similar could be done with Vue, Svelte, etc.

// encapsulate the `nav` and `ol`
function Breadcrumb(props) {
  const { children, ...rest } = props;
  return (
    <nav aria-label="breadcrumb" {...rest}>
      <ol>{children}</ol>
    </nav>
  );
}

// make this the `li`
function BreadcrumbItem(props) {
  return <li {...props} />;
}

// make this the `a`
function BreadcrumbLink(props) {
  const { isCurrent, ...rest } = props;
  return <a aria-current={isCurrent ? "page" : undefined} {...rest} />;
}

// then we create the breadcrumb like this
function Example() {
  return (
    <Breadcrumb>
      <BreadcrumbItem>
        <BreadcrumbLink>Books</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbItem>
        <BreadcrumbLink isCurrent>Science Fiction</BreadcrumbLink>
      </BreadcrumbItem>
    </Breadcrumb>
  );
}

I found that breaking a widget into smaller sub-parts makes it a lot easier to extend, compose, and style them. For instance, you could pass a style prop to any of the parts and style it anyhow you want.

That's it!

You've learned how to create a breadcrumb. Thanks for taking the time to read through this. I really hope you find it useful.

Comment below to let me know your thoughts

Feel free to check out the React component library I created called Chakra UI. Here's the link to the breadcrumb component specifically: http://chakra-ui.com/breadcrumb.

Stay safe!