DEV Community

Cover image for Design System: Creating a Breadcrumb
Segun Adebayo
Segun Adebayo

Posted on

2 1

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

Breadcrumb Component

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>
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode

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
        }
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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!

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay