var Component=(()=>{var m=Object.create;var c=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var i=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),v=(l,e)=>{for(var r in e)c(l,r,{get:e[r],enumerable:!0})},d=(l,e,r,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of b(e))!f.call(l,a)&&a!==r&&c(l,a,{get:()=>e[a],enumerable:!(t=g(e,a))||t.enumerable});return l};var p=(l,e,r)=>(r=l!=null?m(B(l)):{},d(e||!l||!l.__esModule?c(r,"default",{value:l,enumerable:!0}):r,l)),x=l=>d(c({},"__esModule",{value:!0}),l);var E=i((S,h)=>{h.exports=_jsx_runtime});var u=i((D,y)=>{y.exports=React});var A={};v(A,{default:()=>N,frontmatter:()=>w});var n=p(E());var s=p(u()),C=()=>((0,s.useEffect)(()=>{let l=()=>{if(typeof window.adsbygoogle>"u"){console.log("Google Ads script not loaded yet.");return}try{(window.adsbygoogle=window.adsbygoogle||[]).push({})}catch(e){console.error("Error pushing ad:",e)}};if(window.adsbygoogle&&window.adsbygoogle.push)l();else{let e=setInterval(()=>{window.adsbygoogle&&window.adsbygoogle.push&&(l(),clearInterval(e))},1e3);return()=>clearInterval(e)}},[]),s.default.createElement("div",{className:"flex flex-col justify-center items-center mx-4 my-4 p-4 pt-0 rounded-xl bg-black bg-opacity-30"},s.default.createElement("p",{className:"text-center text-xs italic text-black dark:text-white"},"advertisement"),s.default.createElement("div",{id:"articlead",className:"flex justify-center items-center my-4",style:{minHeight:"90px",width:"100%"}},s.default.createElement("ins",{className:"adsbygoogle",style:{display:"block",width:"100%",height:"90px"},"data-ad-client":"ca-pub-9106810782791939","data-ad-slot":"1231471675","data-ad-format":"auto","data-full-width-responsive":"true"})))),o=C;var w={title:"Creating a Custom Breadcrumb Component in Next.js",description:"Breadcrumb navigation is a crucial aspect of creating an intuitive and user-friendly web application.",image:"../../public/blogs/breadcrumb-menu.png",publishedAt:"2024-08-9",updatedAt:"2024-10-10",author:"Jared Hooker",isPublished:!0,tags:["next.js","tutorial","JavaScript","react","menu","breadcrumb","navigation","web-development","frontend","coding","user-experience","ui-design","responsive-design","javascript-framework","react-components","breadcrumb-navigation","web-design","web-app","single-page-application","routing","dynamic-routing","navigation-menu","component-library","react-router","user-interface","software-development","programming","design-patterns","web-accessibility","mobile-friendly","navigation-bar","ui-components","navigation-structure","website-navigation","breadcrumb-trail","link","links","html","css","web-standards","semantic-html","user-navigation","code-example","best-practices","app-development","site-structure","web-navigation","nested-navigation","path-tracking","user-flow","coding-tutorial","javascript-tutorial","react-tutorial","ui-navigation","breadcrumb-implementation","website-structure","server-side-rendering","static-site-generation","routing-in-nextjs","hierarchical-navigation","react-hooks","context-api","accessibility","mobile-navigation","react-navigation","dropdown-menu","breadcrumb-ui","design-tutorial","component-architecture","user-journey","navigation-patterns","custom-hooks","layout-design","component-development","page-structure","javascript-library","responsive-menu","structured-navigation","path-navigation","semantic-navigation","mobile-first-design","navigation-ui","web-app-design","programming-tutorial","code-snippet","software-engineering","nextjs-tutorial","single-page-application-navigation","site-navigation","building-navigation","react-navigation-library","seo"]};function F(l){let e=Object.assign({h1:"h1",a:"a",span:"span",p:"p",h2:"h2",ul:"ul",li:"li",strong:"strong",code:"code",div:"div",pre:"pre",hr:"hr"},l.components),{Image:r}=e;return r||j("Image",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.h1,{id:"breadcrumb-navigation-in-nextjs",children:["Breadcrumb Navigation in Next.js",(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#breadcrumb-navigation-in-nextjs",children:(0,n.jsx)(e.span,{className:"icon icon-link"})})]}),` `,(0,n.jsx)(r,{quality:90,className:"mx-auto rounded border border-gray-900",src:"/blogs/screenshots/breadcrumb/1.png",width:"663",height:"84",alt:"Image",sizes:"50vw"}),` `,(0,n.jsx)(e.p,{children:"Breadcrumb navigation is a key feature for enhancing user experience in web applications. It allows users to understand their current location within the app and easily navigate back to previous pages. In this guide, we'll walk through creating a dynamic breadcrumb component in a Next.js application."}),` `,(0,n.jsxs)(e.h2,{id:"prerequisites",children:["Prerequisites",(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#prerequisites",children:(0,n.jsx)(e.span,{className:"icon icon-link"})})]}),` `,(0,n.jsx)(e.p,{children:"Before starting, ensure you have the following:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"Node.js, npm, and TypeScript installed."}),` `,(0,n.jsx)(e.li,{children:"A basic Next.js project set up with TypeScript."}),` `,(0,n.jsx)(e.li,{children:"(Optional) TailwindCSS for styling."}),` `]}),` `,(0,n.jsxs)(e.h2,{id:"step-1-create-the-breadcrumb-component",children:["Step 1: Create the Breadcrumb Component",(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#step-1-create-the-breadcrumb-component",children:(0,n.jsx)(e.span,{className:"icon icon-link"})})]}),` `,(0,n.jsxs)(e.p,{children:["Begin by creating a new component named ",(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:"Breadcrumb.tsx"})})," in your project. This component will dynamically generate the breadcrumb links based on the current path."]}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{className:"github-dark",style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:"// /components/Breadcrumb.tsx"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'use client'"})}),` `,(0,n.jsx)(e.span,{"data-line":""}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React, { ReactNode } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'react'"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { usePathname } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'next/navigation'"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Link "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'next/link'"})]}),` `,(0,n.jsx)(e.span,{"data-line":""}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"type"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"TBreadCrumbProps"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"homeElement"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"ReactNode"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"separator"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"ReactNode"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"containerClasses"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"string"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"listClasses"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"string"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"activeClasses"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"string"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"capitalizeLinks"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"boolean"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,n.jsx)(e.span,{"data-line":""}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"Breadcrumb"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ({ "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"homeElement"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"separator"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"containerClasses"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"listClasses"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"activeClasses"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"capitalizeLinks"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"TBreadCrumbProps"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsx)(e.span,{"data-line":""}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"paths"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"usePathname"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"??"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"''"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:"// Handle null or undefined paths"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"pathNames"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" paths."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"split"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'/'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"filter"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"path"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" path)"})]}),` `,(0,n.jsx)(e.span,{"data-line":""}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"ul"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{containerClasses}>"})]}),` `,(0,n.jsx)(e.span,{"data-line":""}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"li"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{listClasses}><"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"Link"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"href"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'/'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}>{homeElement}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {pathNames."}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"length"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"0"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"&&"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" separator}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" pathNames."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"map"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(("}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"link"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"index"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"let"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" href "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"`/${"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"pathNames"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"slice"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"0"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"index"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"+"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"1"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:")."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"join"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'/'"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:")"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"}`"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"let"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" itemClasses "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" paths "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"==="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" href "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"?"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"`${"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"listClasses"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"} ${"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"activeClasses"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"}`"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" listClasses"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"let"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" itemLink "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" capitalizeLinks "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"?"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" link["}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"0"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"]."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"toUpperCase"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"+"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" link."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"slice"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"1"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", link."}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"length"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" link"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"React.Fragment"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"key"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{index}>"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"li"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{itemClasses} >"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"Link"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"href"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{href}>{itemLink}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {pathNames."}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"length"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"!=="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" index "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"+"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"1"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"&&"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" separator}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" })"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,n.jsx)(e.span,{"data-line":""}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"default"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Breadcrumb"})]})]})})}),` `,(0,n.jsxs)(e.p,{children:["In this component, we use the ",(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:"usePathname"})})," hook from ",(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:"next/navigation"})})," to get the current URL path. The path is split into segments, which are then used to generate the breadcrumb links. Each link is created by joining the path segments up to the current segment, allowing for dynamic routing within the breadcrumb."]}),` `,(0,n.jsxs)(e.p,{children:["The component is also designed to be customizable. It accepts several props, such as ",(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:"homeLabel"})}),", ",(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:"separator"})}),", ",(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:"containerClassName"})}),", ",(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:"itemClassName"})}),", ",(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:"activeItemClassName"})}),", and ",(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:"capitalizeItems"})}),", which allow you to control the appearance and behavior of the breadcrumb."]}),` `,(0,n.jsx)(o,{}),` `,(0,n.jsxs)(e.h2,{id:"step-2-integrate-the-breadcrumb-in-the-layout",children:["Step 2: Integrate the Breadcrumb in the Layout",(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#step-2-integrate-the-breadcrumb-in-the-layout",children:(0,n.jsx)(e.span,{className:"icon icon-link"})})]}),` `,(0,n.jsxs)(e.p,{children:["Next, include the ",(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:"Breadcrumb"})})," component in your layout file, such as ",(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:"app/layout.tsx"})}),", to ensure it's available across all pages of your application."]}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{className:"github-dark",style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Breadcrumb "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'@/components/Breadcrumb'"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'./globals.css'"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Inter } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'next/font/google'"})]}),` `,(0,n.jsx)(e.span,{"data-line":""}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"inter"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"Inter"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"({ subsets: ["}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'latin'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"] })"})]}),` `,(0,n.jsx)(e.span,{"data-line":""}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"metadata"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" title: "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'Next.js App'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" description: "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'Created with Next.js'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,n.jsx)(e.span,{"data-line":""}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"default"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"RootLayout"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"({ "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"children"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"children"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"React"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"ReactNode"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }) {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"html"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"lang"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"en"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"body"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{inter.className}>"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"Breadcrumb"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"homeLabel"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"Home"'})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"separator"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{<"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"> / }"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"activeItemClassName"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"text-emerald-600"'})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"containerClassName"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"flex py-4 bg-gray-100"'})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"itemClassName"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"mx-2 hover:underline font-medium"'})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"capitalizeItems"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {children}"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),` `,(0,n.jsx)(e.p,{children:"This setup ensures that the breadcrumb component is displayed on every page of your Next.js application. The breadcrumb will automatically update as users navigate through different routes."}),` `,(0,n.jsxs)(e.h2,{id:"step-3-apply-styling-to-the-breadcrumb",children:["Step 3: Apply Styling to the Breadcrumb",(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#step-3-apply-styling-to-the-breadcrumb",children:(0,n.jsx)(e.span,{className:"icon icon-link"})})]}),` `,(0,n.jsxs)(e.p,{children:["You can customize the appearance of the breadcrumb by passing CSS classes to props like ",(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:"containerClasses"})}),", ",(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:"listClasses"})}),", and ",(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:"activeClasses"})}),"."]}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{className:"github-dark",style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:"// Example TailwindCSS classes used in Breadcrumb component"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:"// Add these styles directly to the Breadcrumb component via props"})}),` `,(0,n.jsx)(e.span,{"data-line":""}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"Breadcrumb"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"homeElement"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'Home'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"separator"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{<"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"> / }"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"activeClasses"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'text-emerald-600'"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"containerClasses"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'flex'"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"listClasses"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'hover:underline mx-2 font-bold'"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"capitalizeLinks"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"/>"})})]})})}),` `,(0,n.jsxs)(e.h2,{id:"step-4-test-the-breadcrumb-component",children:["Step 4: Test the Breadcrumb Component",(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#step-4-test-the-breadcrumb-component",children:(0,n.jsx)(e.span,{className:"icon icon-link"})})]}),` `,(0,n.jsx)(e.p,{children:"Run your Next.js development server and navigate through your application to see the breadcrumb in action. It will dynamically update to reflect the current route."}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{className:"github-dark",style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"bash","data-theme":"default",children:(0,n.jsx)(e.code,{"data-language":"bash","data-theme":"default",children:(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"npm"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"run"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"dev"})]})})})}),` `,(0,n.jsx)(e.p,{children:"Open your app in the browser, and you should see the breadcrumb navigation at the top of each page. As you navigate to different routes, the breadcrumb will dynamically reflect your current position within the app's hierarchy."}),` `,(0,n.jsx)(r,{quality:90,className:"mx-auto rounded border border-gray-900",src:"/blogs/screenshots/breadcrumb/1.png",width:"663",height:"84",alt:"Image",sizes:"50vw"}),` `,(0,n.jsxs)(e.h2,{id:"more-javascript-articles",children:["More JavaScript Articles:",(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#more-javascript-articles",children:(0,n.jsx)(e.span,{className:"icon icon-link"})})]}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.a,{href:"/blogs/building-your-first-progressive-web-app-a-beginners-guide",children:"Building a Progressive Web App"})}),` `]}),` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.a,{href:"/blogs/embracing-javascript-unveiling-the-strengths-beyond-traditional-languages",children:"Embracing JavaScript: Unveiling the Strengths Beyond Traditional Languages"})}),` `]}),` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.a,{href:"/blogs/how-to-create-a-customizable-and-reusable-react-hook-for-local-storage",children:"Create a Customizable and Reusable React Hook for Using Local Storage: A Step-by-Step Tutorial"})}),` `]}),` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.a,{href:"/blogs/comparing-modern-javascript-frameworks-react-angular-and-vue-in-2024",children:"Comparing Modern JavaScript Frameworks: React, Angular, and Vue in 2024"})}),` `]}),` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.a,{href:"/categories/javascript",children:"All JavaScript Articles"})}),` `]}),` `]}),` `,(0,n.jsx)(o,{}),` `,(0,n.jsxs)(e.h2,{id:"support",children:["Support",(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#support",children:(0,n.jsx)(e.span,{className:"icon icon-link"})})]}),` `,(0,n.jsx)(e.p,{children:"If you enjoyed this article, please consider making a donation. Your support means a lot to me and allows me to continue providing helpful articles like this one."}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"Cashapp: $hookerhillstudios"}),` `,(0,n.jsxs)(e.li,{children:["Paypal: ",(0,n.jsx)(e.a,{href:"https://www.paypal.com/ncp/payment/KUWG9HFVBYWHL",children:"Paypal"})]}),` `]}),` `,(0,n.jsxs)(e.h1,{id:"conclusion",children:["Conclusion",(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#conclusion",children:(0,n.jsx)(e.span,{className:"icon icon-link"})})]}),` `,(0,n.jsx)(e.p,{children:"You've now created a dynamic breadcrumb component for your Next.js application. This navigation feature not only enhances the user experience but also provides a clear path for users to track their journey through your app. Feel free to extend this component to suit your specific needs and styling preferences."}),` `,(0,n.jsx)(e.hr,{})]})}function k(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,Object.assign({},l,{children:(0,n.jsx)(F,l)})):F(l)}var N=k;function j(l,e){throw new Error("Expected "+(e?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}return x(A);})(); ;return Component;

navigation menu

Creating a Custom Breadcrumb Component in Next.js