Implementing breadcrumbs

Chapter Outline

Implementing Breadcrumbs and Navigation Patterns

Breadcrumbs and navigation patterns are essential for improving the usability and user experience of web applications. They provide users with contextual information about their current location within the app and allow them to navigate efficiently. In React applications, React Router makes implementing these patterns seamless with its powerful routing capabilities. In this article, we’ll explore how to implement breadcrumbs and other navigation patterns using the React Router.

Why Use Breadcrumbs?

Breadcrumbs are a navigational aid that display the hierarchy of the user's current page relative to the app's structure. For example, in an e-commerce application, breadcrumbs might look like this:

Home > Electronics > Mobile Phones > Product Name

This structure helps users:

  1. Understand their current location in the app.
  2. Navigate back to higher-level pages easily.

Implementing Breadcrumbs in React Router

React Router doesn't have a built-in breadcrumb component, but we can implement one by leveraging the useLocation and useMatches hooks. The useLocation hook gives us access to the current URL path, while useMatches helps retrieve route metadata for dynamically generating breadcrumb items.

Example: Breadcrumb Component

  1. Set Up Routes with Metadata

Each route in the configuration should include a breadcrumb property for generating breadcrumbs dynamically. The breadcrumb property is added as a child of the handle property of each route. Any value is allowed within the handle property, and therefore we add our breadcrumb value there.

jsx
1import Home from "./pages/Home";
2import Electronics from "./pages/Electronics";
3import MobilePhones from "./pages/MobilePhones";
4import Product from "./pages/Product";
5import Layout from "./Layout";
6import NotFound from "./404";
7

8const routes = [
9  {
10    element: <Layout />,
11    errorElement: <NotFound />,
12    children: [
13      {
14        id: "home",
15        path: "/",
16        element: <HomePage />,
17        handle: { breadcrumb: "Home" },
18        children: [
19          {
20            id: "electronics",
21            path: "electronics",
22            element: <ElectronicsPage />,
23            handle: { breadcrumb: "Electronics" },
24            children: [
25              {
26                id: "mobile-phones",
27                path: "mobile-phones",
28                element: <MobilePhonesPage />,
29                handle: { breadcrumb: "Mobile Phones" },
30                children: [
31                  {
32                    id: "product",
33                    path: ":productId",
34                    element: <ProductPage />,
35                    handle: { breadcrumb: "Product Details" },
36                  }
37                ],
38              }
39            ],
40          }
41        ],
42      },
43    ],
44  },
45];
46

47export default routes;
  1. Create the Breadcrumb Component
jsx
1import { Link, useMatches } from 'react-router-dom';
2

3export default function Breadcrumbs() {
4  const matches = useMatches();
5

6  return (
7    <nav aria-label="breadcrumb">
8      <ol>
9        {matches.map((match, index) => (
10          <li key={index}>
11            {index < matches.length - 1 ? (
12              <Link to={match.pathname}>{match.handle.breadcrumb}</Link>
13            ) : (
14              <span>{match.handle.breadcrumb}</span>
15            )}
16          </li>
17        ))}
18      </ol>
19    </nav>
20  );
21}
  1. Pass Metadata to Routes

The breadcrumb metadata needs to be passed using the handle property in the route configuration:

jsx
1import { createBrowserRouter, RouterProvider } from 'react-router-dom';
2import routes from './routes';
3import Breadcrumbs from './components/Breadcrumbs';
4

5const router = createBrowserRouter(routes);
6

7function App() {
8  return (
9    <RouterProvider router={router} />
10  );
11}
12

13export default App;

Complete Example

A complete example app with nested routes, and breadcrumb may be found on my Github repository.

Conclusion

Breadcrumbs significantly enhance the user experience by making navigation intuitive and seamless. With React Router, you can implement dynamic breadcrumbs, persistent layouts, and advanced navigation patterns like route guards or programmatic redirects. These tools not only make your app easier to navigate but also provide a solid foundation for scalable, maintainable front-end applications.

React

Feedback