Next.js Discord

Discord Forum

The best way of dynamic breadcrumbs?

Answered
Cape lion posted this in #help-forum
Open in Discord
Avatar
Cape lionOP
I am wondering what is the best approach for dynamic breadcrumbs.
For example i have a 
/dashboard/posts/[id]
and instead of displaying real id like (g213g-51wtrw... lol)
I would like to conver it to a title of a post.

I have found two interesting articles about it:
https://www.openstatus.dev/blog/dynamic-breadcrumb-nextjs
https://www.gcasc.io/blog/next-dynamic-breadcrumbs

Whick one is better? Or maybe there is orher way of handling breadcrumbs?
Answered by adam.birds
@Cape lion I don't see any issue with the way shown here in https://www.openstatus.dev/blog/dynamic-breadcrumb-nextjs
View full answer

21 Replies

Avatar
adam.birds
@Cape lion I don't see any issue with the way shown here in https://www.openstatus.dev/blog/dynamic-breadcrumb-nextjs
Answer
Avatar
adam.birds
That seems a cleaner approach to me than the other.
Avatar
Cape lionOP
im not looking for issues, just wondering if this is proper way and know others opinions
but one thing is not clear for me
what about 
@breadcrumbs/dogs
is it not going to error out? there is nothing about creating page.tsx in /dogs or something
Image
Avatar
adam.birds
The @ is to do with parallel routes. - https://nextjs.org/docs/app/building-your-application/routing/parallel-routes
Avatar
Cape lionOP
im getting error with such structure
Image
Avatar
adam.birds
You don't have to use the @ sign
I'm just reading through it m ore to understand it
Did you edit the layout file?
Avatar
Cape lionOP
Yes, my layout.tsx for /dashboard has 
<div className="container mx-auto">
  {breadcrumb}
  {children}
</div>
Avatar
adam.birds
Show the error you are getting.
Avatar
Cape lionOP
Ok, nvm 😐 I had 
/posts
instead of 
/dashboard/posts
but it makes me think that in such way of creating breadcrumb i need to manually re-create the structure of whole breadcrumbs list
i mean in example of "Dogs and Cats pages" from the first link. He is re-writing all the breadcrumbs once again
so if the structure of the pages (links) change i need to remember to manually change my breadcrumbs
export default async function BreadcrumbSlot({
  params,
}: {
  params: { postId: string };
}) {
  const { postId } = await params;
  const res = await getPostById(postId);

  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/dashboard">Dashboard</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="/dashboard/posts">Posts</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage className="capitalize">
            {res.data?.title}
          </BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}
is there any better solution for it? Instead of rewriting whole list?
Avatar
adam.birds
I don't think there would without basing the breadcrumbs off the URL but then you would be looking at the ID instead of the title again.
Avatar
Cape lionOP
Hmm, ok. Maybe there is an option with creating reusable component for breadcrumbs where the whole list will be created by url - paths and the last element would be a prop that can be passed in 
@breadcrumb/posts/[postId]
Avatar
Cape lionOP
Ok, i will try it 🙂 Thank you for your time!