Build a breadcrumb component

Introduction

When you visit a website with multiple sections and deep navigation, it’s easy to get lost. That’s where breadcrumbs come in. Breadcrumbs act as a secondary navigation system that shows users exactly where they are on a site, and how they got there.

Think about browsing an e-commerce site: you might go from

Home → Electronics → Mobile Phones → iPhone 14.

Without breadcrumbs, you’d have to hit the back button multiple times or rely on the main menu to navigate back. With breadcrumbs, it’s just one click away.

Breadcrumbs are especially helpful for:

Orientation: They clearly display your current location in the site hierarchy.
Navigation: They allow users to jump back to parent pages instantly.
Efficiency: They reduce the number of clicks needed to reach a destination.
User Experience: They make websites feel organized, intuitive, and professional.
SEO Benefits: Search engines like Google use breadcrumbs to better understand site structure, which can improve search ranking.

Prerequisites

Node.js and npm
React
Typescript

Frontend Setup in React

Before we dive into coding the breadcrumb component, we need to set up our React environment.

We’ll be using Vite (a fast modern build tool) along with React + TypeScript. Vite is much quicker than Create React App, and it gives us a great developer experience.

Let’s create a React app using the following command:

1//Create a react app using the following command
2npm create vite@latest breadcrumb  --template react-ts
3cd  breadcrumb
4npm install 
5
6//Install the routing library
7npm install react-router-dom
8//Command for run the React project
9npm run dev

Create the Breadcrumb Component

Now that our React project is ready, it’s time to build the core feature — the Breadcrumb component.

Think of breadcrumbs as a GPS for your website. They show users where they are and give them a quick way to jump back to higher sections. To implement this, we’ll:

Create a navigation bar (AppBar) at the top with a few buttons like Home, Reports, Settings.Allow users to click those buttons to update the breadcrumb trail dynamically.
Display the breadcrumb trail just below the navbar using Material UI’s Breadcrumbs component.
Make the breadcrumb look modern and user-friendly with proper spacing and styling.

We’ll keep our code clean by creating a dedicated component named Breadcrumb.tsx inside the src/components/ folder and put below code.

1//Breadcrumb.tsx
2
3import React from 'react';
4import {
5    AppBar,
6    Toolbar,
7    Typography,
8    Button,
9    Breadcrumbs,
10    Link,
11    Box,
12    Container
13} from '@mui/material';
14
15interface NavItem {
16    label: string;
17    path: string[];
18}
19
20const navItems: NavItem[] = [
21    { label: 'Home', path: ['Home'] },
22    { label: 'Reports', path: ['Home', 'Reports'] },
23    { label: 'Settings', path: ['Home', 'Settings'] },
24];
25
26interface Props {
27    breadcrumbPath: string[];
28    setBreadcrumbPath: (path: string[]) => void;
29}
30
31const Breadcrumb: React.FC<Props> = ({ breadcrumbPath, setBreadcrumbPath }) => {
32    return (
33        <>
34            {/* Navbar */}
35            <AppBar position="static" color="primary">
36                <Toolbar>
37                    <Typography variant="h6" sx={{ flexGrow: 1 }}>
38                        My App
39                    </Typography>
40                    {navItems.map((item,index) => (
41                        <Button
42                            key={item.label}
43                            color="inherit"
44                            onClick={() => setBreadcrumbPath(item.path)}
45                            sx={{fontSize:"16px" ,ml: index !== 0 ? 2 : 0}}
46                      >
47                            {item.label}
48                        </Button>
49                    ))}
50                </Toolbar>
51            </AppBar>
52
53            {/* Breadcrumb */}
54            <Container maxWidth={false}>
55                <Box mt={3}>
56                    <Breadcrumbs separator={">"} aria-label="breadcrumb" sx={{ fontFamily: "'Poppins',     sans-serif" }}>
57                        {breadcrumbPath.map((crumb, index) => (
58                            <Link
59                                key={index}
60                                underline="hover"
61                                color={index === breadcrumbPath.length - 1 ? 'text.primary' : 'inherit'}
62                                href="#"
63                                sx={{fontSize:"20px"}}
64                            >
65                                {crumb}
66                            </Link>
67                        ))}
68                    </Breadcrumbs>
69                </Box>
70            </Container>
71        </>
72    );
73};
74
75export default Breadcrumb;

Create Pages

Create Home.tsx , Setting.tsx ,Report.tsx page into src/pages directory

Home.tsx

1const Home = () => {
2  return (
3    <h1>
4      Home page
5    </h1>
6  )
7}
8
9export default Home

Setting.tsx

1const Setting= () => {
2  return (
3    <h1>Setting page</h1>
4  )
5}
6
7export default Setting

Report.tsx

1const Report= () => {
2  return (
3    <h1>Report  page</h1>
4  )
5}
6
7export default Report

Update App.tsx

Now that we’ve created our breadcrumb component and the individual pages (Home, Reports, Settings), it’s time to connect them all inside our main application file — App.tsx.

Think of App.tsx as the director of our app. It decides:

Which page to display based on the current breadcrumb path.
How to update the breadcrumb whenever a user clicks on a navigation button.
Where to render the Breadcrumb component so it’s always visible at the top.

Let’s put it all together in our App.tsx:

App.tsx

1import React, { useState } from 'react';
2import Breadcrumb from './components/Breadcrumb';
3import Home from './pages/Home';
4import Setting from './pages/Setting';
5import Report from './pages/Report';
6
7const App: React.FC = () => {
8  const [breadcrumbPath, setBreadcrumbPath] = useState<string[]>(['Home']);
9
10  const renderCurrentComponent = () => {
11    const currentPath = breadcrumbPath.join('/');
12    switch (currentPath) {
13      case 'Home':
14        return <Home />;
15      case 'Home/Reports':
16        return <Report />;
17      case 'Home/Settings':
18        return <Setting />;
19      default:
20        return <Home />;
21    }
22  };
23  return (
24    <div>
25      <Breadcrumb
26        breadcrumbPath={breadcrumbPath}
27        setBreadcrumbPath={setBreadcrumbPath}
28      />
29      <div style={{ padding: '20px' }}>
30        {renderCurrentComponent()}
31      </div>
32    </div>
33  );
34};
35export default App;

After writing all code below output is shown

Video Link

https://www.awesomescreenshot.com/video/43700670?key=db8d19d02ad161978bd4f69dd22ca878

Conclusion

In conclusion, breadcrumbs are a simple yet effective navigation tool that helps users easily understand their location on a website and quickly move between different sections. By showing the path from the home page to the current page, breadcrumbs make websites more user-friendly, especially for larger sites with many pages. They also improve SEO by helping search engines understand site structure. Overall, breadcrumbs enhance the user experience by making navigation clearer, faster, and more intuitive, making them a valuable feature for any website.