Breadcrumbs for Magento e-commerce step by step 

Better accessibility with React Spectrum – Part 1 breadcrumbs

React Spectrum is a collection of libraries and tools from Adobe to build a better design system. It contains three libraries: React Aria, React Stately, React Spectrum. We are going to focus on the first two in this post.

In part one, you will get short information on what the breadcrumbs are and why they are important and in the second part we would like to show you how to use breadcrumbs with our documentation.

Briefly, breadcrumbs allow for better accessibility by letting users know where they are in your site’s hierarchy. It also helps search engines (SEO) find content easier. Learn how to make this great component with our documentation and demo at the end of the article!

How breadcrumbs are used for website navigation

Well-structured e-commerce needs to have easy navigation to allow the user to recognize where they are on the website and not to let them feel confused. The Breadcrumbs provide a great solution for this.

The name comes from a story of kids leaving breadcrumbs on their way to find their way back and not to get lost. Yes, you remember well it is a fairy tale written by the Grimm brothers.

This picture explains the idea of site breadcrumbs. They are to show you where you are on the category or product page and what is your way back. You can easily return and will not be lost whenever you decide to change your mind.

History and hierarchy-based breadcrumbs

There are basically two types of breadcrumbs: history-based breadcrumbs and hierarchy-based ones. The first ones are those showing you the history of your search on the website. The second type is based on hierarchy and that’s what we are gonna talk about in this post.

How do breadcrumbs work?

They provide a link to every page you visit which helps your user to easily recognize where they are heading, but also how many steps it takes them to get there.

Breadcrumbs are used to help the user understand where they are, and how to get back home or go one step further in your website structure. It provides a sense of order while browsing through categories because it’s easy for your users to see their place within them.

Magento hierarchy-based breadcrumb

The Magento breadcrumb is also a good example of a hierarchy-based breadcrumb. It is easy to understand which category you are now in and it also indicates how many steps it took from your home page.

In Magento, as in other e-commerce platforms such as Prestashop or OpenCart, Breadcrumbs can be found at the top of the page, on every category or product page.

Source: https://docs.magento.com/user-guide/catalog/navigation-breadcrumb-trail.html

It is a very useful tool for Magento users because it helps them to identify how many categories they have visited before reaching their final destination and what is its name.

Breadcrumbs for SEO

Breadcrumbs not only provide a better way to let your users navigate through your Magento e-commerce platform but also are very useful when it comes to SEO because they help search engines find content easier, mainly if you add some keywords into them.

The Magento breadcrumb example is a good SEO practice in Magento because it provides keywords and dropdown menus that help your user understand what they are looking for, but also provide you with some keyword content.

How to create breadcrumbs with React Spectrum

In the second part of the article, we have shown how to create the Magento CMS breadcrumbs component using React Spectrum libraries. Learn how to use React Spectrum breadcrumbs by checking out our documentation!

Magento Breadcrumbs step by step

First, we should install and import two React Hooks.

npm install @react-aria/breadcrumbs
import { useBreadcrumbs, useBreadcrumbItem } from '@react-aria/breadcrumbs'

Next, let’s build the main component.

type BreadcrumbsProps = {
    children: React.ReactNode;
};
const Breadcrumbs = (props: BreadcrumbsProps) => {
  const { navProps } = useBreadcrumbs(props);
  const children = React.Children.toArray(props.children);
  return (
    <nav {...navProps}>
      <ul>
        {children.map((child, i) =>
          React.cloneElement(child, { isCurrent: i === children.length - 1 })
        )}
      </ul>
    </nav>
  );
};

In the beginning, we call `useBreadcrumbs` hook with props. In props we pass React components but we tell more about it later. `navProps` has props for the breadcrumbs navigation element. For example aria-label with the correct name in user language. In the middle we map children elements and set `isCurrent` it means the last element.

Let’s move on to a single list item. Create `BreadcrumbItem` component:

type BreadcrumbItemProps = {
  isCurrent: boolean
  href: string
  children: React.ReactNode
}
const BreadcrumbItem = (props: BreadcrumbItemProps) => {
  const { isCurrent, children, href } = props;
  const ref = React.useRef();
  const { itemProps } = useBreadcrumbItem(props, ref);
  return (
    <li>
      <a {...itemProps} ref={ref} href={href}>
        {children}
      </a>
      {!isCurrent && (
        <span aria-hidden="true">
          {'›'}
        </span>
      )}
    </li>
  );
};

We have to call `useBreadcrumbItem` with props and link ref element. Props contain our `isCurrent` from the Breadcrumbs component and `href` which we must pass when calling. `useBreadcrumbItem` will return to `itemProps` similar things like in `useBreadcrumbs` to `navProps`.
Finally, we need to put everything together.

const App = () => {
    return (
        <Breadcrumbs>
            <BreadcrumbItem href="/page1">Page 1</BreadcrumbItem>
            <BreadcrumbItem href="/page2">Page 2</BreadcrumbItem>
            <BreadcrumbItem href="/page3">Page 3</BreadcrumbItem>
        </Breadcrumbs>
    )
}

This is enough for a fully accessible Breadcrumbs navigation with support tabindex and aria out of the box. In the next examples, we will look at more complex components.
Here you have access to the DEMO version.