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 :
//Create a react app using the following command
npm create vite@latest breadcrumb --template react-ts
cd breadcrumb
npm install
//Install the routing library
npm install react-router-dom
//Command for run the React project
npm 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.
//Breadcrumb.tsx
import React from 'react';
import {
AppBar,
Toolbar,
Typography,
Button,
Breadcrumbs,
Link,
Box,
Container
} from '@mui/material';
interface NavItem {
label: string;
path: string[];
}
const navItems: NavItem[] = [
{ label: 'Home', path: ['Home'] },
{ label: 'Reports', path: ['Home', 'Reports'] },
{ label: 'Settings', path: ['Home', 'Settings'] },
];
interface Props {
breadcrumbPath: string[];
setBreadcrumbPath: (path: string[]) => void;
}
const Breadcrumb: React.FC<Props> = ({ breadcrumbPath, setBreadcrumbPath }) => {
return (
<>
{/* Navbar */}
<AppBar position="static" color="primary">
<Toolbar>
<Typography variant="h6" sx={{ flexGrow: 1 }}>
My App
</Typography>
{navItems.map((item,index) => (
<Button
key={item.label}
color="inherit"
onClick={() => setBreadcrumbPath(item.path)}
sx={{fontSize:"16px" ,ml: index !== 0 ? 2 : 0}}
>
{item.label}
</Button>
))}
</Toolbar>
</AppBar>
{/* Breadcrumb */}
<Container maxWidth={false}>
<Box mt={3}>
<Breadcrumbs separator={">"} aria-label="breadcrumb" sx={{ fontFamily: "'Poppins', sans-serif" }}>
{breadcrumbPath.map((crumb, index) => (
<Link
key={index}
underline="hover"
color={index === breadcrumbPath.length - 1 ? 'text.primary' : 'inherit'}
href="#"
sx={{fontSize:"20px"}}
>
{crumb}
</Link>
))}
</Breadcrumbs>
</Box>
</Container>
</>
);
};
export default Breadcrumb;
Create Pages
Create Home.tsx , Setting.tsx ,Report.tsx page into src/pages directory.
- Home.tsx
const Home = () => {
return (
<h1>
Home page
</h1>
)
}
export default Home
- Setting.tsx
const Setting= () => {
return (
<h1>Setting page</h1>
)
}
export default Setting
- Report.tsx
const Report= () => {
return (
<h1>Report page</h1>
)
}
export 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
import React, { useState } from 'react';
import Breadcrumb from './components/Breadcrumb';
import Home from './pages/Home';
import Setting from './pages/Setting';
import Report from './pages/Report';
const App: React.FC = () => {
const [breadcrumbPath, setBreadcrumbPath] = useState<string[]>(['Home']);
const renderCurrentComponent = () => {
const currentPath = breadcrumbPath.join('/');
switch (currentPath) {
case 'Home':
return <Home />;
case 'Home/Reports':
return <Report />;
case 'Home/Settings':
return <Setting />;
default:
return <Home />;
}
};
return (
<div>
<Breadcrumb
breadcrumbPath={breadcrumbPath}
setBreadcrumbPath={setBreadcrumbPath}
/>
<div style={{ padding: '20px' }}>
{renderCurrentComponent()}
</div>
</div>
);
};
export default App;
After writing all code below output is shown :
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.
