yappiest-sapphire

Breadcrumbs examples

Hi! I was looking for a breadcrumbs implementation example, I can’t seem to understand how the example in the router context docs nor any of the other questions. Does anyone have an example or more info to complement what’s in the router context docs?

8 Replies

foreign-sapphire•2y ago

This was a solution for someone else who has asked about breadcrumbs. https://stackblitz.com/edit/github-uzrlfz-nvihxs?file=README.md The essense of it is, that you can get the route matches using the useMatches() hook, and from there on, its a matter of rendering your UI.

Sean Cassiere

StackBlitz

ruiaraujo012 Tanstack Router Breadcrumbs - StackBlitz

Run official live example code for Router Quickstart File Based, created by Tanstack on StackBlitz

useful-bronze•2y ago

Yes, you can take a look at this thread https://discord.com/channels/719702312431386674/1212075083766431815 where we discuss breadcrumbs

yappiest-sapphireOP•2y ago

Thanks! Looked into the example @Sean Cassiere shared an it works just like I wanted to, the only think its that it updates when i hover on other links, how can i prevent that? From then on i think i can continue building the implementation myself

foreign-sapphire•2y ago

This probably has something to do with preload and your loaderDeps.

yappiest-sapphireOP•2y ago

Makes sense, thanks!

other-emerald•2y ago

@Monopolo11 Could you share your code (with Mantine)?

yappiest-sapphireOP•2y ago

This is my component

import { Link, rootRouteId, useRouterState } from '@tanstack/react-router'
import * as React from 'react'

import { Anchor, Breadcrumbs } from '@mantine/core'

const NavBreadcrumbs = () => {
   const matches = useRouterState({ select: state => state.matches })
   const liveMatches = React.useMemo(
      () =>
         matches.filter(
            match => match.id !== rootRouteId && match.id !== '/_layout/' && match.context.breadcrumbs.label !== ''
         ),
      [matches]
   )

   const breadcrumbs = liveMatches.map(match => ({
      path: match.pathname,
      label: match.context.breadcrumbs.label,
   }))

   return (
      <>
         <div
            style={{
               display: 'flex',
               flexDirection: 'row',
            }}
         >
            <Breadcrumbs>
               {breadcrumbs.map((breadcrumb, idx) => (
                  <div key={`${breadcrumb.path}_${idx}`} style={{ padding: 2 }}>
                     <h5>
                        <Anchor component={Link} to={breadcrumb.path} params={true} search={true}>
                           {breadcrumb.label}
                        </Anchor>
                     </h5>
                  </div>
               ))}
            </Breadcrumbs>
         </div>
         <br />
      </>

import { Link, rootRouteId, useRouterState } from '@tanstack/react-router'
import * as React from 'react'

import { Anchor, Breadcrumbs } from '@mantine/core'

const NavBreadcrumbs = () => {
   const matches = useRouterState({ select: state => state.matches })
   const liveMatches = React.useMemo(
      () =>
         matches.filter(
            match => match.id !== rootRouteId && match.id !== '/_layout/' && match.context.breadcrumbs.label !== ''
         ),
      [matches]
   )

   const breadcrumbs = liveMatches.map(match => ({
      path: match.pathname,
      label: match.context.breadcrumbs.label,
   }))

   return (
      <>
         <div
            style={{
               display: 'flex',
               flexDirection: 'row',
            }}
         >
            <Breadcrumbs>
               {breadcrumbs.map((breadcrumb, idx) => (
                  <div key={`${breadcrumb.path}_${idx}`} style={{ padding: 2 }}>
                     <h5>
                        <Anchor component={Link} to={breadcrumb.path} params={true} search={true}>
                           {breadcrumb.label}
                        </Anchor>
                     </h5>
                  </div>
               ))}
            </Breadcrumbs>
         </div>
         <br />
      </>

I ended up removing the h5 tag for styling

sensitive-blue•2y ago

did you solve this?, I have same problem. I have async loader whenever I hover on Link, the context change

Gaming

Programming

Breadcrumbs examples

Did you find this page helpful?