How To Create Dynamic Breadcrumbs Component in NextJS?
Breadcrumbs are an essential navigational aid in web applications, especially in multi-level hierarchies. In a Next.js application, creating a dynamic breadcrumbs component can enhance the user experience by providing clear navigation paths. In this guide, we’ll walk through the process of building a dynamic breadcrumbs component in Next.js.
Prerequisites:
Approach to Create Dynamic Breadcrumbs in Nextjs
- Set up a new
Breadcrumbs.jscomponent in your Next.js project. - Import and utilize the
usePathnamehook fromnext/navigationto get the current route path as a string. - Use JavaScript’s
split()method to divide the pathname string by “/” and convert it into an array. - Implement logic to transform the array elements into breadcrumb links, mapping each part of the path to a corresponding breadcrumb.
- Display the breadcrumbs in the component, ensuring proper navigation links are created for each breadcrumb segment.
Steps to Setup a NextJS App
Step 1: Create a NextJS application using the following command.
npx create-next-app@latest app_name
Step 2: It will ask you some questions, so choose the following.
√ Would you like to use TypeScript? ... No
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... No
√ Would you like to use `src/` directory? ... Yes
√ Would you like to use App Router? ... Yes
√ Would you like to customize the default import alias (@/*)? ... No
Step 3: After creating your project folder, move to it using the following command.
cd app_name
Project Structure:
The updated dependencies in package.json file will look like:
"dependencies": {
"react": "^18",
"react-dom": "^18",
"next": "14.2.3"
},
Example: Implementation to create a breadcrumbs in next.js
/* file path: src/app/globals.css */
.breadcrumbs{
display: flex;
align-items: center;
height: 10px;
gap: 10px;
}
.breadcrumbs li{
list-style: none;
}
// src/app/Breadcrubms.js
import Link from "next/link";
import { usePathname } from "next/navigation";
export default function Breadcrumbs() {
const pathname = usePathname()
const BreadcrumbsArray = pathname.split('/')
BreadcrumbsArray.shift()
return (
<>
<h1>Breadcrumbs</h1>
<ul className="breadcrumbs">
{BreadcrumbsArray.map((item, index) => {
const href = '/' +
BreadcrumbsArray.slice(0, index + 1).join('/');
return (
<>
<li key={index}>
<Link href={href}>
{item}
</Link>
</li>
<li>
{index < BreadcrumbsArray.length - 1 && (
<h4> {'>'} </h4>
)}
</li>
</>
);
})}
</ul>
<hr />
</>
)
}
//src/app/layout.js
'use client';
import Link from "next/link";
import Breadcrumbs from './Breadcrumbs'
import './globals.css'
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<nav>
<h1>Navigation Bar</h1>
<li>
<Link href={'/course/'}>
Course List
</Link>
</li>
<li>
<Link href={'/course/web-development'}>
Web Development
</Link>
</li>
<li>
<Link href={'/course/dsa'}>
DSA
</Link>
</li>
<li>
<Link href={'/course/java'}>
Java
</Link>
</li>
</nav>
<hr />
<Breadcrumbs />
{children}
</body>
</html>
);
}
//src/app/course/page.js
export default function Page() {
return (
<>
<h1>Course List</h1>
</>
);
}
//src/app/course/dsa/page.js
export default function Page() {
return (
<>
<h1>DSA Course Page</h1>
</>
);
}
//src/app/course/java/page.js
export default function Page() {
return (
<>
<h1>Java Course Page</h1>
</>
);
}
//src/app/course/web-development/page.js
import Link from "next/link";
export default function Page() {
return (
<>
<h1>Web Course Page</h1>
<li>
<Link href={'/course/web-development/javascript'}>
Javascript
</Link>
</li>
</>
);
}
// src/app/course/web-development/javascript/page.js
export default function Page() {
return (
<>
<h1>JavaScript Course Page</h1>
</>
);
}
Step to Run Application: Run the application using the following command from the root directory of the project
npm run dev
Output: Your project will be shown in the URL http://localhost:3000/
Contact Us