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!

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

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

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay