How to Create Breadcrumb Navigation in Next.js Easily

To create a breadcrumb in Next.js, use the useRouter hook to get the current path, split it into parts, and render links for each segment. This helps users see their location and navigate back easily.

Syntax

Use the useRouter hook from next/router to access the current path. Split the path string by slashes to get each breadcrumb segment. Map over these segments to create clickable links that lead to each part of the path.

Key parts:

• useRouter(): Gets the current URL path.
• Splitting path: router.asPath.split('/') breaks the path into parts.
• Mapping segments: Create <a> or Link components for navigation.

javascript

import { useRouter } from 'next/router';
import Link from 'next/link';

function Breadcrumb() {
  const router = useRouter();
  const pathSegments = router.asPath.split('/').filter(seg => seg);

  return (
    <nav aria-label="breadcrumb">
      <ol>
        <li><Link href="/">Home</Link></li>
        {pathSegments.map((segment, index) => {
          const href = '/' + pathSegments.slice(0, index + 1).join('/');
          return (
            <li key={href}>
              <Link href={href}>{segment}</Link>
            </li>
          );
        })}
      </ol>
    </nav>
  );
}

export default Breadcrumb;

Output

Breadcrumb navigation showing links: Home > segment1 > segment2 ...

Example

This example shows a simple breadcrumb component in Next.js that dynamically builds links based on the current URL path. It starts with a Home link and adds each path segment as a clickable breadcrumb.

javascript

import { useRouter } from 'next/router';
import Link from 'next/link';

export default function Breadcrumb() {
  const router = useRouter();
  const pathSegments = router.asPath.split('/').filter(seg => seg);

  return (
    <nav aria-label="breadcrumb" style={{ padding: '1rem', fontFamily: 'Arial, sans-serif' }}>
      <ol style={{ listStyle: 'none', display: 'flex', gap: '0.5rem' }}>
        <li>
          <Link href="/">
            Home
          </Link>
          <span> / </span>
        </li>
        {pathSegments.map((segment, index) => {
          const href = '/' + pathSegments.slice(0, index + 1).join('/');
          const isLast = index === pathSegments.length - 1;
          return (
            <li key={href}>
              {isLast ? (
                <span aria-current="page" style={{ fontWeight: 'bold' }}>{segment}</span>
              ) : (
                <>
                  <Link href={href}>
                    {segment}
                  </Link>
                  <span> / </span>
                </>
              )}
            </li>
          );
        })}
      </ol>
    </nav>
  );
}

Output

Breadcrumb navigation bar with clickable links separated by slashes, e.g., Home / about / team

Common Pitfalls

Common mistakes when creating breadcrumbs in Next.js include:

• Not filtering empty strings after splitting the path, which causes extra empty breadcrumb items.
• Not handling the root path correctly, leading to missing or duplicated Home links.
• Using plain <a> tags instead of Next.js Link component, which breaks client-side navigation.
• Not marking the current page breadcrumb with aria-current="page" for accessibility.

javascript

/* Wrong way: Missing filter and using <a> without Link */
import { useRouter } from 'next/router';
function BreadcrumbWrong() {
  const router = useRouter();
  const segments = router.asPath.split('/'); // includes empty strings

  return (
    <nav>
      <ol>
        {segments.map((seg, i) => (
          <li key={i}>
            <a href={`/${seg}`}>{seg || 'Home'}</a>
          </li>
        ))}
      </ol>
    </nav>
  );
}

/* Right way: Filter empty, use Link, add aria-current */
import Link from 'next/link';
function BreadcrumbRight() {
  const router = useRouter();
  const segments = router.asPath.split('/').filter(Boolean);

  return (
    <nav aria-label="breadcrumb">
      <ol>
        <li><Link href="/"><a>Home</a></Link></li>
        {segments.map((seg, i) => {
          const href = '/' + segments.slice(0, i + 1).join('/');
          const isLast = i === segments.length - 1;
          return (
            <li key={href} aria-current={isLast ? 'page' : undefined}>
              {isLast ? seg : <Link href={href}><a>{seg}</a></Link>}
            </li>
          );
        })}
      </ol>
    </nav>
  );
}

Quick Reference

• Use useRouter to get current path.
• Split path by '/' and filter empty strings.
• Use Next.js Link for navigation links.
• Mark current page with aria-current="page" for accessibility.
• Start breadcrumb with a Home link to root.

Key Takeaways

Use Next.js useRouter to access the current URL path for breadcrumbs.

Split and filter the path string to get clean breadcrumb segments.

Use Next.js Link component for client-side navigation in breadcrumbs.

Always include a Home link as the first breadcrumb item.

Mark the current page breadcrumb with aria-current="page" for accessibility.