Design System: Creating a Breadcrumb
Tags: component, breadcrumb, ui, design
Published: 2020-05-14 17:13:22

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

![Breadcrumb Component](https://dev-to-uploads.s3.amazonaws.com/i/1md9fr6wta2x167pgg2m.png)

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

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

```html
<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.

```css
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.

{% codesandbox breadcrumbhtml-3ryf1 %}

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

```jsx
// 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!