How To Create Dynamic Breadcrumbs Component in NextJS? - Coding

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.js component in your Next.js project.
Import and utilize the usePathname hook from next/navigation to 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

CSS

/* file path: src/app/globals.css */

.breadcrumbs{
  display: flex;
  align-items: center;
  height: 10px;
  gap: 10px;
}

.breadcrumbs li{
  list-style: none;
}

JavaScript

// 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 />
        </>
    )
}

JavaScript

//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>
    );
}

JavaScript

//src/app/course/page.js

export default function Page() {
    return (
        <>
            <h1>Course List</h1>
        </>
    );
}

JavaScript

//src/app/course/dsa/page.js

export default function Page() {
    return (
        <>
            <h1>DSA Course Page</h1>
        </>
    );
}

JavaScript

//src/app/course/java/page.js

export default function Page() {
    return (
        <>
            <h1>Java Course Page</h1>
        </>
    );
}

JavaScript

//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>
        </>
    );
}

JavaScript

// 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/

Reffered: https://www.geeksforgeeks.org

ReactJS

Related
How to fix "Next.js: document is not defined"?
Environment Variables are Undefined in Next.js App
How To Get NextJS Query Params Serverside?
How to Read the Current full URL with React?
How to Set Port in NextJs?

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	17