Implement a Dynamic Breadcrumb in React/NextJS

Breadcrumbs are a website navigation tool that allows a user to see their current page's "stack" of how it is nested under any parent pages. Users can then jump back to a parent page by clicking the associated breadcrumb link. These increase the User Experience of the application, making it easier for the users to navigate nested pages efficiently and effectively. "Crumbs" Breadcrumbs are popular enough that if you are building a web dashboard or application, you may have considered adding them. Generating these breadcrumb links efficiently and with the appropriate context is key to an improved user experience. React component that will parse the current route and build a dynamic breadcrumbs display that can handle both static & dynamic routes efficiently. Let's build a smart NextBreadcrumbs My projects usually revolve around and (formerly Material-UI) so that is the angle that I am going to approach this problem from, although the solution should work for Nextjs-related application. Nextjs MUI any Static Route Breadcrumbs To start, our component will only handle static routes, meaning that our project has only static pages defined in the directory. NextBreadcrumbs pages The following are examples of static routes because they do not contain s and s in the route names, meaning the directory structure lines up 1:1 exactly with the expected URLs that they serve. [ ] --> pages/index.js / --> pages/about.js /about --> pages/my/super/nested/route.js /my/super/nested/route The solution will be extended to handle dynamic routes later. Defining the Basic Component We can start with the basic component that uses the component as a baseline. MUI Breadcrumbs import Breadcrumbs from '@mui/material/Breadcrumbs'; import * as React from 'react'; export default function NextBreadcrumbs() { return ( ); } The above creates the basic structure of the React component, imports the correct dependencies, and renders an empty MUI component. NextBreadcrumbs Breadcrumbs We can then add in the hooks, which will allow us to build the breadcrumbs from the current route. next/router We also create a component that will be used to render each link. This is a pretty dumb component for now, except that it will render normal text instead of a link for the last breadcrumb. Crumb In a situation like , it would render as the following: /settings/notifications Home (/ link) > Settings (/settings link) > Notifications (no link) This is because the user is already on the last breadcrumb's page, so there is no need to link out to the same page. All the other crumbs are rendered as links to be clicked. import Breadcrumbs from '@mui/material/Breadcrumbs'; import Link from '@mui/material/Link'; import Typography from '@mui/material/Typography'; import { useRouter } from 'next/router'; import React from 'react'; export default function NextBreadcrumbs() { // Gives us ability to load the current route details const router = useRouter(); return ( ); } // Each individual "crumb" in the breadcrumbs list function Crumb({ text, href, last=false }) { // The last crumb is rendered as normal text since we are already on the page if (last) { return {text} } // All other crumbs will be rendered as links that can be visited return ( {text} ); } With this layout, we can then dive back into the component to generate the breadcrumbs from the route. NextBreadcrumbs Some existing code will start to be omitted to keep the code pieces smaller. The full example is shown below. We will generate a list of breadcrumb objects that contain the information to be rendered by each element. Each breadcrumb will be created by parsing the property, which is a string containing the route as shown in the browser URL bar. Crumb Nextjs router's asPath We will strip any query parameters, such as , from the URL to make the breadcrumb creation process more straightforward. ?query=value export default function NextBreadcrumbs() { // Gives us ability to load the current route details const router = useRouter(); function generateBreadcrumbs() { // Remove any query parameters, as those aren't included in breadcrumbs const asPathWithoutQuery = router.asPath.split("?")[0]; // Break down the path between "/"s, removing empty entities // Ex:"/my/nested/path" --> ["my", "nested", "path"] const asPathNestedRoutes = asPathWithoutQuery.split("/") .filter(v => v.length > 0); // Iterate over the list of nested route parts and build // a "crumb" object for each one. const crumblist = asPathParts.map((subpath, idx) => { // We can get the partial nested route for the crumb // by joining together the path parts up to this point. const href = "/" + asPathNestedRoutes.slice(0, idx + 1).join("/"); // The title will just be the route string for now const title = subpath; return { href, text }; }) // Add in a default "Home" crumb for the top-level return [{ href: "/", text: "Home" }, ...crumblist]; } // Call the function to generate the breadcrumbs list const breadcrumbs = generateBreadcrumbs(); return ( ); } With this list of breadcrumbs, we can now render them using the and components. As previously mentioned, only the portion of our component is shown for brevity. Breadcrumbs Crumb return // ...rest of NextBreadcrumbs component above... return ( {/* The old breadcrumb ending with '/>' was converted into this */} {/* Iterate through the crumbs, and render each individually. We "mark" the last crumb to not have a link. */} {breadcrumbs.map((crumb, idx) => ( ))} ); This should start generating some very basic - but working - breadcrumbs on our site once rendered; would render as /user/settings/notifications Home > user > settings > notifications Memoizing Generated Breadcrumbs There is a quick improvement that we can make before going further though. Right now the breadcrumb list is recreated every time the component re-renders, so we can the crumb list for a given route to save some performance. To accomplish this, we can wrap our function call in the React hook. memoize generateBreadcrumbs useMemo const router = useRouter(); // this is the same "generateBreadcrumbs" function, but placed // inside a "useMemo" call that is dependent on "router.asPath" const breadcrumbs = React.useMemo(function generateBreadcrumbs() { const asPathWithoutQuery = router.asPath.split("?")[0]; const asPathNestedRoutes = asPathWithoutQuery.split("/") .filter(v => v.length > 0); const crumblist = asPathParts.map((subpath, idx) => { const href = "/" + asPathNestedRoutes.slice(0, idx + 1).join("/"); return { href, text: subpath }; }) return [{ href: "/", text: "Home" }, ...crumblist]; }, [router.asPath]); return // ...rest below... Improving Breadcrumb Text Display Before we start incorporating dynamic routes, we can clean this current solution up more by including a nice way to change the text shown for each crumb generated. Right now, if we have a path like , then it will show: /user/settings/notifications Home > user > settings > notifications which is not very appealing. We can provide a function to the component that will try to generate a more user-friendly name for each of these nested route crumbs. NextBreadcrumbs const _defaultGetDefaultTextGenerator= path => path export default function NextBreadcrumbs({ getDefaultTextGenerator=_defaultGetDefaultTextGenerator }) { const router = useRouter(); // Two things of importance: // 1. The addition of getDefaultTextGenerator in the useMemo dependency list // 2. getDefaultTextGenerator is now being used for building the text property const breadcrumbs = React.useMemo(function generateBreadcrumbs() { const asPathWithoutQuery = router.asPath.split("?")[0]; const asPathNestedRoutes = asPathWithoutQuery.split("/") .filter(v => v.length > 0); const crumblist = asPathParts.map((subpath, idx) => { const href = "/" + asPathNestedRoutes.slice(0, idx + 1).join("/"); return { href, text: getDefaultTextGenerator(subpath, href) }; }) return [{ href: "/", text: "Home" }, ...crumblist]; }, [router.asPath, getDefaultTextGenerator]); return ( // ...rest below and then our parent component can have something like the following, to title-ize the subpaths, or maybe even replace them with a new string. {/* Assume that `titleize` is written and works appropriately */} titleize(path)} /> This implementation would then result in the following breadcrumbs. The full code example at the bottom has more examples of this. Home > User > Settings > Notifications Nextjs Dynamic Routes Nextjs's router allows for including that uses to allow for URLs to have slugs, UUIDs, and other dynamic values that will then be passed to your views. dynamic routes Pattern Matching For example, if your Nextjs application has a page component at , then the routes and will match it. pages/post/[post_id].js /post/1 /post/abc For our breadcrumbs component, we would like to show the name of the associated post instead of just its UUID. This means that the component will need to dynamically look up the post data based on the nested URL route path and regenerate the text of the associated crumb. Right now, if you visit , you would see breadcrumbs that look like /post/abc post > abc but if the post with UUID has a title of , then we want to change the breadcrumbs to say My First Post post > My First Post Let's dive into how that can happen using functions. async Nextjs Router: vs asPath pathname The router instance in our code has two useful properties for our component; and . The router is the URL path as shown directly in the URL bar of the browser. The is a more internal version of the URL that has the dynamic parts of the path replaced with their components. next/router NextBreadcrumbs asPath pathname asPath pathname [parameter] For example, consider the path from above. /post/abc The would be as the URL is shown asPath /post/abc The would be as our directory dictates pathname /post/[post_id] pages We can use these two URL path variants to build a way to dynamically fetch information about the breadcrumb, so we can show more contextually appropriate information to the user. There is a lot going on below, so please re-read it - and the helpful notes below it - a few times over if needed. const _defaultGetTextGenerator = (param, query) => null; const _defaultGetDefaultTextGenerator = path => path; // Pulled out the path part breakdown because its // going to be used by both `asPath` and `pathname` const generatePathParts = pathStr => { const pathWithoutQuery = pathStr.split("?")[0]; return pathWithoutQuery.split("/") .filter(v => v.length > 0); } export default function NextBreadcrumbs({ getTextGenerator=_defaultGetTextGenerator, getDefaultTextGenerator=_defaultGetDefaultTextGenerator }) { const router = useRouter(); const breadcrumbs = React.useMemo(function generateBreadcrumbs() { const asPathNestedRoutes = generatePathParts(router.asPath); const pathnameNestedRoutes = generatePathParts(router.pathname); const crumblist = asPathParts.map((subpath, idx) => { // Pull out and convert "[post_id]" into "post_id" const param = pathnameNestedRoutes[idx].replace("[", "").replace("]", ""); const href = "/" + asPathNestedRoutes.slice(0, idx + 1).join("/"); return { href, textGenerator: getTextGenerator(param, router.query), text: getDefaultTextGenerator(subpath, href) }; }) return [{ href: "/", text: "Home" }, ...crumblist]; }, [router.asPath, router.pathname, router.query, getTextGenerator, getDefaultTextGenerator]); return ( // ...rest below The breakdown was moved to a function since the same logic is used for both and . asPath generatePathParts router.asPath router.pathname Determine the eter that lines up with the dynamic route value, so would result in . param abc post_id The nested route eter and all associated query values ( ) are passed to a provided which will return either a value or a response that should return the dynamic string to use in the associated breadcrumb. param router.query getTextGenerator null Promise The dependency array has more dependencies added; , , and . useMemo router.pathname router.query getTextGenerator Finally, we need to update the component to use this value if it is provided for the associated crumb object. Crumb textGenerator function Crumb({ text: defaultText, textGenerator, href, last=false }) { const [text, setText] = React.useState(defaultText); useEffect(async () => { // If `textGenerator` is nonexistent, then don't do anything if (!Boolean(textGenerator)) { return; } // Run the text generator and set the text again const finalText = await textGenerator(); setText(finalText); }, [textGenerator]); if (last) { return {text} } return ( {text} ); } The breadcrumbs can now handle both static routes and dynamic routes cleanly with the potential to display user-friendly values. While the above code is the business logic of the component, this can all be used with a parent component that looks like the final example below. Full Example // NextBreadcrumbs.js const _defaultGetTextGenerator = (param, query) => null; const _defaultGetDefaultTextGenerator = path => path; // Pulled out the path part breakdown because its // going to be used by both `asPath` and `pathname` const generatePathParts = pathStr => { const pathWithoutQuery = pathStr.split("?")[0]; return pathWithoutQuery.split("/") .filter(v => v.length > 0); } export default function NextBreadcrumbs({ getTextGenerator=_defaultGetTextGenerator, getDefaultTextGenerator=_defaultGetDefaultTextGenerator }) { const router = useRouter(); const breadcrumbs = React.useMemo(function generateBreadcrumbs() { const asPathNestedRoutes = generatePathParts(router.asPath); const pathnameNestedRoutes = generatePathParts(router.pathname); const crumblist = asPathParts.map((subpath, idx) => { // Pull out and convert "[post_id]" into "post_id" const param = pathnameNestedRoutes[idx].replace("[", "").replace("]", ""); const href = "/" + asPathNestedRoutes.slice(0, idx + 1).join("/"); return { href, textGenerator: getTextGenerator(param, router.query), text: getDefaultTextGenerator(subpath, href) }; }) return [{ href: "/", text: "Home" }, ...crumblist]; }, [router.asPath, router.pathname, router.query, getTextGenerator, getDefaultTextGenerator]); return ( {breadcrumbs.map((crumb, idx) => ( ))} ); } function Crumb({ text: defaultText, textGenerator, href, last=false }) { const [text, setText] = React.useState(defaultText); useEffect(async () => { // If `textGenerator` is nonexistent, then don't do anything if (!Boolean(textGenerator)) { return; } // Run the text generator and set the text again const finalText = await textGenerator(); setText(finalText); }, [textGenerator]); if (last) { return {text} } return ( {text} ); } and then an example of this being used can be seen below. Note that is used to create only one reference to each helper function which will prevent unnecessary re-renders of the breadcrumbs when/if the page layout component re-rendered. You also move this out to the top-level scope of the file, but I don't like to pollute the global scope like that. NextBreadcrumbs useCallback could // MyPage.js (Parent Component) import React from 'react'; import NextBreadcrumbs from "./NextBreadcrumbs"; function MyPageLayout() { // Either lookup a nice label for the subpath, or just titleize it const getDefaultTextGenerator = React.useCallback((subpath) => { return { "post": "Posts", "settings": "User Settings", }[subpath] || titleize(subpath); }, []) // Assuming `fetchAPI` loads data from the API and this will use the // parameter name to determine how to resolve the text. In the example, // we fetch the post from the API and return it's `title` property const getTextGenerator = React.useCallback((param, query) => { return { "post_id": () => await fetchAPI(`/posts/${query.post_id}/`).title, }[param]; }, []); return () { {/* ...Whatever else... */} {/* ...Whatever else... */} } } This is one of my more in-depth and technical posts, so I hope you enjoyed it, and please comment or reach out so that I can ensure consistency and correctness. Hopefully, this post taught you a few strategies or concepts about Nextjs. If you liked this or , please for weekly tech updates! my other posts subscribe to my brand new Newsletter First published here