sbardian / gatsby-plugin-breadcrumb Goto Github PK

Could you write more clear what does import 'gatsby-plugin-breadcrumb/gatsby-plugin-breadcrumb.css' mean?
It's some runtime css creation? How I can override default styles? I'm trying to use plugin /w material-ui. Its a pity that in doesn't have native integration.

I'm using the plugin with sitemap , it's working fine on local (after gatsby build and serve).
Since i deploy on Netlify it failed.
I was wondering if there is a special conf to set ?

Not sure how this will look, but I would like to be able to allow setting the crumbLabel when using Sitemap/SitemapCrumbs. Currently it uses the page name, which will not look great in some cases

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update gatsby to v4.25.7 [security]
• chore(deps): update semantic-release to v19 [security]
• chore(deps): update eslint-plugin-react to v7.34.1
• chore(deps): update @testing-library/dom to v10
• chore(deps): update @testing-library/jest-dom to v6
• chore(deps): update @testing-library/react to v15
• chore(deps): update commitlint monorepo to v19 (major) (@commitlint/cli, @commitlint/config-conventional)
• chore(deps): update eslint to v9
• chore(deps): update eslint-config-airbnb to v19
• chore(deps): update eslint-config-prettier to v9
• chore(deps): update eslint-plugin-prettier to v5
• chore(deps): update gatsby monorepo to v3 (major) (babel-preset-gatsby, babel-preset-gatsby-package)
• chore(deps): update husky to v9
• chore(deps): update jest monorepo to v29 (major) (babel-jest, jest)
• chore(deps): update lint-staged to v15
• chore(deps): update node.js to v17
• chore(deps): update prettier to v3
• chore(deps): update react to v18
• chore(deps): update react-dom to v18
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

...come on write some tests. Plan was to use cypress. Will need a default Gatsby site to include the plugin and run the tests against. more to come. . .

• gatsby-node
• click tracking component
• auto gen component
• useBreadcrumb

I have a project where I have two parent paths for pages generated by gatsby-node.js from a CMS using templates - /journal/ (blog posts) & /work/ (portfolio).

I am using this plugin with AutoGen, with configuration as follows:

{
  resolve: `gatsby-plugin-breadcrumb`,
  options: {
    useAutoGen: true,
    exclude: [`/dev-404-page/`, `/404/`, `/404.html`, `/work/*` // a bunch of other individual pages],
  },
},

The /work/* rule does not seem to work as breadcrumbs are still being generated for the sub-sub-paths.

If I test by specifying a specific page within /work/ in the exclude array, it does work as expected - e.g. /work/[project_slug], that page then generates an error because the breadcrumbs cannot be found. But it's too much effort to go through and do this for every single portfolio piece.

I think it would be nice to be able to use wildcards/regex because I only want to generate breadcrumbs for /journal/, not waste build time generating them for /work/ as well.

Plugin gatsby-plugin-breadcrumb is not compatible with your gatsby version 2.32.9 - It requires gatsby@^3.0.0

My stack can only run gatsby@^2.* - will this still work

gatsby develop works fine, but build failed with below error

`34 | }, /#PURE/_react.default.createElement("ol", {
35 | className: "breadcrumb__list"

36 | }, autoGenCrumbs.map(function (c, i) {
| ^
37 | if (hiddenCrumbs.includes(c.pathname)) {
38 | return null;
39 | }
`

I would like to add an ID to the root element so I don't need to wrap it around another div which does not make any sense.

Where: https://github.com/sbardian/gatsby-plugin-breadcrumb/blob/develop/src/components/auto-gen-crumb.js#L23

Read more about it here: https://web.dev/dom-size/

Optional:

Return a function with the breadcrumb construction so anyone can build the breadcrumb how they want, like prism-react-renderer does it here: https://github.com/FormidableLabs/prism-react-renderer/blob/master/README.md#usage

Thank you very much for your plugin. Coming from WordPress and SEO in general, I find breadcrumbs to be vital in my battle with our friend Mr. Google. So, thank you for this plugin. (However, I am relatively new to JavaScript and React.)

Having said that, I am getting a weird issue.

For my page that lists all blog posts with a specific tag (or a specific Category), I am expecting:

home/tags/green-tea

I am getting

home/tags/tags/green-tea

Same for categories. I am getting home/categories/categories/health

This is the repo: https://github.com/davidkartuzinski/1001teafacts
Please forgive the look, if you clone, as it's a bit naked (no CSS) until I get all the functionality in place.

I have looked through the issues here that seemed possibly related and found nothing.

I also tried to make it it's own component but failed miserably. (I saw some stuff in this repo that will help, once this below issue is taken care of.)

--

Below is the relevant code:

src/templates/tags.js

import React from "react"
import PropTypes from "prop-types"
import SiteMetaData from "../components/site-metadata"
import { IoIosPricetags } from "react-icons/io"

import { Link, graphql } from "gatsby"
import { Breadcrumb } from "gatsby-plugin-breadcrumb"

const Tags = ({ pageContext, data, location }) => {
  const { tag } = pageContext
  const { edges, totalCount } = data.allMdx
  const tagHeader = `${totalCount} post${
    totalCount === 1 ? "" : "s"
  } tagged with "${tag}"`

  const {
    breadcrumb: { crumbs },
  } = pageContext

  const customCrumbLabel = location.pathname.toLowerCase().replace("-", " ")

  return (
    <div>
      <SiteMetaData />
      <h1>
        <IoIosPricetags />
        {tagHeader}
      </h1>

      <div>
        {" "}
        You are here:
        <Breadcrumb
          crumbs={crumbs}
          crumbSeparator=""
          crumbLabel={customCrumbLabel}
        />
      </div>
      <ul>
        {edges.map(({ node }) => {
          const { slug } = node.fields
          const { title } = node.frontmatter
          return (
            <li key={slug}>
              <Link to={slug}>{title}</Link>
            </li>
          )
        })}
      </ul>
      <Link to="/tags">See all tags</Link>
    </div>
  )
}

Tags.propTypes = {
  pageContext: PropTypes.shape({
    tag: PropTypes.string.isRequired,
  }),
  data: PropTypes.shape({
    allMdx: PropTypes.shape({
      totalCount: PropTypes.number.isRequired,
      edges: PropTypes.arrayOf(
        PropTypes.shape({
          node: PropTypes.shape({
            frontmatter: PropTypes.shape({
              title: PropTypes.string.isRequired,
            }),
            fields: PropTypes.shape({
              slug: PropTypes.string.isRequired,
            }),
          }),
        }).isRequired
      ),
    }),
  }),
}

export default Tags
export const pageQuery = graphql`
  query($tag: String) {
    allMdx(
      limit: 2000
      sort: { fields: [frontmatter___date], order: DESC }
      filter: { frontmatter: { tags: { in: [$tag] } } }
    ) {
      totalCount
      edges {
        node {
          frontmatter {
            title
          }
          fields {
            slug
          }
        }
      }
    }
  }
`

gatsby-node.js

const path = require(`path`)
const _ = require(`lodash`)

const { createFilePath } = require(`gatsby-source-filesystem`)
const { paginate } = require(`gatsby-awesome-pagination`)

exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions
  if (node.internal.type === `Mdx`) {
    const slug = createFilePath({ node, getNode, basePath: `pages` })
    createNodeField({
      node,
      name: `slug`,
      value: slug,
    })
  }
}

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions

  // create variable to use for each type of templates
  const blogPostTemplate = path.resolve(`./src/templates/blog-post.js`)
  const tagTemplate = path.resolve(`./src/templates/tags.js`)
  const categoriesTemplate = path.resolve(`./src/templates/categories.js`)
  // const blogListTemplate = path.resolve(`./src/templates/blog.js`)

  const result = await graphql(`
    query {
      postsRemark: allMdx(
        sort: { order: DESC, fields: [frontmatter___date] }
        limit: 2000
      ) {
        edges {
          node {
            fields {
              slug
            }
            frontmatter {
              tags
              categories
            }
          }
          next {
            frontmatter {
              slug
              title
            }
          }
          previous {
            frontmatter {
              slug
              title
            }
          }
        }
      }
      tagsGroup: allMdx(limit: 2000) {
        group(field: frontmatter___tags) {
          field
          fieldValue
        }
      }
      categoriesGroup: allMdx(limit: 2000) {
        group(field: frontmatter___categories) {
          field
          fieldValue
        }
      }
    }
  `)
  // handle errors
  if (result.errors) {
    reporter.panicOnBuild(
      `Error while running GraphQL query. Check gatsby-node.js file.`
    )
    return
  }

  const posts = result.data.postsRemark.edges
  posts.forEach(({ node, next, previous }) => {
    createPage({
      path: node.fields.slug,
      component: blogPostTemplate,
      context: {
        // Data passed to context is available
        // in page queries as GraphQL variables.
        slug: node.fields.slug,

        // https://toripugh.com/blog/gatsby-blog--next-and-previous-links
        next,
        previous,
      },
    })
  })

  // http://codekarate.com/daily-dose-of-drupal/gatsby-pagination-gatsby-awesome-pagination

  paginate({
    createPage,
    items: posts,
    itemsPerPage: 2, // number of pages
    pathPrefix: "/blog",
    component: path.resolve(`./src/templates/blog.js`),
  })

  // extract tag data from the query
  const tags = result.data.tagsGroup.group
  // make the tag pages
  tags.forEach(tag => {
    createPage({
      path: `/tags/${_.kebabCase(tag.fieldValue)}/`,
      component: tagTemplate,
      context: {
        tag: tag.fieldValue,
      },
    })
  })

  // extract category data from the query
  const categories = result.data.categoriesGroup.group
  // make the category pages
  categories.forEach(category => {
    createPage({
      path: `/categories/${_.kebabCase(category.fieldValue)}/`,
      component: categoriesTemplate,
      context: {
        category: category.fieldValue,
      },
    })
  })
}

Again, thank you very much for your attention and help.

-DK

more to come after I have implemented this for gatsby-plugin-sitemap

Is it possible to launch a new version of gatsby-plugin-breadcrumb whenever gatsby released a new version too?

I'm asking this question because the new version of gatsby released is never synced with this plugin and it's giving me troubles in build time.

The features are working well on the UI pages.
But when I tried to test the MyPage which includes the plugin, it gave me the error:

TypeError: Cannot read properties of undefined (reading 'pathname')

The passing mocked data:

And I was using the AutoGen with version "gatsby-plugin-breadcrumb": "^12.3.2", and gatsby version is 5.10.0

{
resolve: gatsby-plugin-breadcrumb,
options: {
useAutoGen: true,
autoGenHomeLabel: Home,
excludeOptions: {
separator: '/'
},
crumbLabelUpdates: [
{
pathname: '/mypage',
crumbLabel: 'MyPage'
}
]
}
},

I'm guessing when I run the test it reads the location.pathname. Please let me know how to solve this issue which has blocked my commitment.

Hi there,

Is it possible to use useBreadcrumb hook with AutoGen breadcrumbs? I would like to use this plugin with Ant Design breadcrumbs. So I just need an array of links for each page.

Hi there,

I'm trying to use this plugin with useAutoGen breadcrumbs. In my default layout I have set a custom crumbLabel depending on frontmatter title from pageContext as follows:

<Breadcrumb
  crumbs={crumbs}
  crumbLabel={pageContext.frontmatter.title}
/>

I have also set autoGenHomeLabel in gatsby-config.js. When I'm on a page level 2 (/faq/), everything works fine and I get correct crumb labels. When I go down to page level 3 (for example, /faq/question1/), I get correct crumb labels only for home page (defined in gatsby-config.js file) and the current page. The crumb label for the parent page (/faq/) is getting generated from the path, and not pageContext.frontmatter.title.

Is there any way to fix that? I would like the labels to be always generated from pageContext.frontmatter.title.

Hello, I am using the "Sitemap Mode". I've included the gatsby-plugin-sitemap, generated the sitemap and it creates it correctly, but when I include this part in the plugins

{
  resolve: `gatsby-plugin-breadcrumb`,
  options: {
    sitemapPath: `/my-site-map.xml`,
  },
}

and run the app, I get:

ReferenceError: URL is not defined
- gatsby-node.js:38
  [project-name]/[gatsby-plugin-breadcrumb]/gatsby-node.js:38:15

Thanks

I am working with a route with subdirectories in autogen mode like so http://localhost:8000/page1/page-2/page-3 and in the label it is appearing me the pathname (without the slash) instead of the label I have previously set in each of the pages.
Expected result: Home - Page 1 - Page 2 - Page 3
Actual result: Home-page1-page-2-page-3

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

Would be great if the last slash is removed because it does not make sense to have one more slash when the current page is the last crumb item.

I was using the plugin, but I ended up encountering a problem in my usage scenario.

Whenever the product URL changes, I would necessarily have to reset the accumulated crumbs, for example:

product-1/blank
product-2/blank

When changing the initial path, I needed to reset the crumbs to this new "first path". Did you understand? Me implementing this, I can open a PR, does it make sense? And enabling this via props in the plugin settings.

const indexOfDiffPath = crumbs.findIndex(
        (crumb) =>
          crumb.pathname.split("/")[1] === location.pathname.split("/")[1]
      )

 if (indexOfDiffPath === -1) {
        setCrumbs([
          { pathname: defaultCrumb.location.pathname, ...defaultCrumb },
          {
            ...location,
            crumbLabel,
            crumbSeparator,
          },
        ])
      }

Create prop (setHome maybe) for <Breadcrumb> that will automatically create a base default Home crumb.

Getting warning messages on Gatsby v4 build.

warning Plugin gatsby-plugin-breadcrumb is not compatible with your gatsby version 4.2.0 - It requires gatsby@^3.0.0

Running into this error when following the instructions in the docs under the Click Tracking Layout component example?

Uncaught TypeError: updateCrumbs is not a function
The above error occurred in the <Breadcrumb> component:
The above error occurred in the <AppContainer> component:

I'm a big fan of good old CSS (Scss) and don't like the CSS-in-JS hype. So I suggest an option to switch that, so instead of inline CSS, classes are added to each element.

This would allow me to easier style them along the rest of my layout.

<div class="breadcrumb">
  <span class="breadcrumb__root">Home</span>
  <a class="breadcrumb__link" href="/blog">Blog</a>
  <spann class="breadcrumb__divider"> / </spann>
  <a class="breadcrumb__link" href="/blog/the-awesome-post">The awesome post</a>
</div>

I have also modified the HTML structure, which IMO makes more sense.

Removing CSS-in-JS would also remove bundle size and reduce the plugin to its core functionality; providing an easy way to show a breadcrumb. I think plugins should not combine structure and styling in one file. A separate optional CSS file that a user can load into would make it more flexible.

I created a tiny PR that should handle this here:
#72

Hi,

Would you consider adding support for TypeScript ?

I have this message when I'm trying to use the plugin in a .tsx file :

TS7016: Could not find a declaration file for module 'gatsby-plugin-breadcrumb/'. '****/node_modules/gatsby-plugin-breadcrumb/index.js' implicitly has an 'any' type.   Try 'npm i --save-dev @types/gatsby-plugin-breadcrumb' if it exists or add a new declaration (.d.ts) file containing 'declare module 'gatsby-plugin-breadcrumb/';'

Thanks

Test greeting

I currently have an issue with the breadcrumbs default crumb.
So let's imagine that our default crumb is this one /writtens.

Inside "writtens" we have our posts, so for example: /writtens/a-funny-post.
Writtens page is also on my navbar, so I have a that navigates to it.

So this is the behaviour:
If I go to Writtens page and then go to writtens/a-funny-post it will create the expected breadcrumb, so Writtens/A Funny Post.
But if I now navigate to Writtens from the navbar the breadcrumbs will become Writtens/A Funny Post/Writtens. That's the first problem.

The second one is if I navigate to "A Funny Post" and then navigate to "Writtens" from the breadcrumb and then navigate to a different post for example "A Mean Post" my breadcrumbs will become Writtens/A Funny Post/A Mean Post.

Is there a way to whenever I navigate to /writtens to clear/reset the breadcrumbs?

Thanks!

My app uses gatsby with a Layout component I put on all of my pages.
I have the useBreadcrumbs in the Layout taking the location and a sent in title.
I noticed my page rerenders multiple times sending both the last and current titles to useBreadcrumb.
I also noticed this doesn't happen without this plugin.

There appears to be no working examples online.

How do you make this actually work on pages?

• Remove inline styles and style props from autogen component
• Remove inline styles and style props from click-tracking component
• Remove plugin options dealing with styles
• Provide default style css file for users to import for default breadcrumb styles
• Update docs to reflect this change
• Provide new Demo sites (codesandbox) for examples using this new approach

Hello. Thank you for your plugin. It works well for my uses.

However, I have two issues that are related to each other.

Currently, the plugin outputs Divs and Spans:

Like so:

<div>
    <span class="breadcrumb__title">You are at: </span>
            <div class="breadcrumb">
                   <a class="breadcrumb__link" href="/">Home</a>
                   <span class="breadcrumb__separator"></span>
             </div>
      <div class="breadcrumb">
             <span class="breadcrumb__link__disabled">blog</span>
             <span class="breadcrumb__separator"></span>
       </div>
</div>

Issue #1:

Per https://www.w3.org/TR/wai-aria-practices-1.1/examples/breadcrumb/index.html.

A more accessible pattern is:

<nav aria-label="Breadcrumb" class="breadcrumb">
  <ol>
    <li>
      <a href="../../">
        WAI-ARIA Authoring Practices 1.1
      </a>
    </li>
    <li>
      <a href="../../#aria_ex">
        Design Patterns
      </a>
    </li>
    <li>
      <a href="../../#breadcrumb">
        Breadcrumb Pattern
      </a>
    </li>
    <li>
      <a href="./index.html" aria-current="page">
        Breadcrumb Example
      </a>
    </li>
  </ol>
</nav>

Like this example, I was able to easily wrap the Breadcrumbs in a Nav element. In doing that I can add the "aria-label='breadcrumb'" to the nav element.

Question: 1. The first issue is how can I go about adding "aria-current="page" to the last link? But I suppose only if it is NOT disabled?

Question: 2. How could I go about changing the HTML structure? Is the only way to modify the https://github.com/sbardian/gatsby-plugin-breadcrumb/blob/develop/src/components/auto-gen-crumb.js page?

And lastly, would you be interested in a Pull Request for changing the HTML to follow these guidelines? I don't know any reason why anyone would prefer divs? An Ordered List, if you think about it, makes a lot more sense.

Again thanks, your plugin is really good. And the other options you've provided just work!

Hi, I am using the sitemap-plugin and I think I will only need to pass the right props to make my breadcrumbs work.

Just one question:

What do I have to pass from, for eg., the contact page to the layout in order to make this assignment work?

    const {
      breadcrumb: { crumbs },
    } = pageContext;

I have passed the pageContext={ breadcrumbs: ['contact'] } but got the error Uncaught TypeError: Cannot read property 'map' of undefined

Any suggestions?

Thanks
Matteo

For example, I have a route like /writings/day-and-night, when I now go to day-and-night set a crumbLabel with "Day and Night" my breadcrumb would look like that Root / writings / Day and Night. What I would love to see is Root / Writings / Day and Night (capitalized W), is this possible or something to consider adding to this plugin?

Maybe it would make sense to create some router JSON file where static page can be configured while dynamic pages like blog posts get their title from a Frontmatter attribute.

E.g.:

{
  "routes": [
    {
      "path": "writings",
      "title": "Writings"
    }
  ]
}

with the path variable I was able to get the correct pageContext, so I think this should work:

query MyQuery {
  sitePage(path: {regex: "/.*writings$/"}) {
    path
    context {
      breadcrumb {
        crumbs {
          pathname
          crumbLabel
        }
      }
    }
  }
}

The plugin should have an option/work with builds that define a pathPrefix in gatsby-config. If one is defined, all location hrefs and Links are automatically prefixed with the pathPrefix, which breaks all the breadcrumb functionality.

https://www.gatsbyjs.org/docs/path-prefix/

Testing Github greetings action

npm error when using npm install gatsby-plugin-breadcrumb:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/gatsby
npm ERR!   gatsby@"^5.5.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer gatsby@"^3.0.0 || ^4.0.0" from [email protected]
npm ERR! node_modules/gatsby-plugin-breadcrumb
npm ERR!   gatsby-plugin-breadcrumb@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

With the workaround npm install gatsby-plugin-breadcrumb --legacy-peer-deps the plugin seems to work fine with [email protected], except for the dependency warnings/errors.

Gatsby warning when using npm run develop | gatsby develop:

warn Plugin gatsby-plugin-breadcrumb is not compatible with your gatsby version 5.5.0 - It requires gatsby@^3.0.0 || ^4.0.0

I am using an URL prefix for my Gatsby page:

gatsby-config.js

module.exports = {
  pathPrefix: '/en',

And I ended up with double-prefixed breadcrumbs (/en/en/my/url) when using the component like:

<BreadCrumbs
    locationBC={props.location}
    crumbLabel="My Post" />

Imported from:

export const BreadCrumbs = (props) => {
  return(
      <Breadcrumb location={props.locationBC} crumbLabel={props.crumbLabel} />
  )
}

My Spaghetti solution for this is splitting of the prefix /en before handing it to the breadcrumb component:

export const BreadCrumbs = (props) => {
  const breadcrumbItem = {pathname: props.locationBC.pathname.split('/en')[1]}
  return(
      <Breadcrumb location={breadcrumbItem} crumbLabel={props.crumbLabel} />
  )
}

So far I did not see a downside from it. But is there a cleaner way to handle the prefix?

Noticed some errors in the useBreadcrumb documentation. Need to update these to avoid confusion.

Hi there,

I have trailing slashes on my site, but breadcrumbs generated by the plugin have pathnames without them. How can I fix that?

Hi,

I was testing and playing around with your latest update. And I noticed something.

When you navigate into the crumbs, ie. deep into the site, either from a link in the menu or from within a page, ie. tag page, the active style does NOT take affect, UNTIL I click on it in the breadcrumb. So, in order for the styles to take place, I have to click on the active page link when I am on that page.

I hope that is clear?

It should be active, but it isn't.

Now, if I click on it, it because active.

You can see the behaviour on my live demo site

I don't know why this is? Maybe I have it configured incorrectly?

I am styling the active links in the CSS here

I have useClassNames: true in my gatsby-config.js

I am sorry, but I didn't pay enough attention in the previous version(s) so I am not sure if this is new or not.

Thank you!

Currently I have to hardcode a lot of crumbLabelUpdates in gatsby-config.js and whenever the data changes, I also have to check whether those are still correct. Is there a way to generate the crumbLabelUpdates in gatsby-node.js?

I combine gatsby-plugin-breadcrumb with gatsby-awesome-pagination. Since the 7.0.0 release the pageContext is missing the breadcrumb object on paginated pages. I might find the time to create a minimal reproducible example repository tomorrow.

Hi!
Thanks for this great handy plugin.
I wanted to look at the demo of the new version where AutoGen was introduced but it seems there is an error with undefined crumbs there as you can see on the following screenshot.

I tried to follow the tutorial on a local environment and it ended in the same, I probably miss something.
After some investigation, I think the problem is that no crumbs array is put in the pageContext but I am not sure how to do so.

Can you please let me know if this is a known issue or if you know a quick fix?
Regards,

I would love the ability to style the first breadcrumb, in the mock up the first breadcrumb (defined as defaultCrumb in my gatsby-config.js) needs a different style than the other breadcrumbs, see attached screenshot.

How ever I cannot write CSS or HTML selectors in the crumbLabel and my CSS attempts have been futile, notably

.breadcrumb__link:first{
    color: red;
}

If this is already possible I would love some documentation on how to do this, and maybe a codepen.

I tried to hardcode my own breadcrumbs following the same list stile and added this css

 nav a:first-of-type{
    color: red;
}

Resulting in my hard coded breadcrumb list getting the correct styling while the gatsby-plugin-breadcrumb list became red in all elements

Hi,

Would you consider to add support for Gatsby v5?

Hi there,

There is an exclude option in AutoGen breadcrumbs for pages like /404/ and /404.html. I would like to ask, what are the reasons for excluding them? In my case it was generating an error during the build, as I use wrapPageElement with a layout which includes breadcrumbs. So I had to pass exclude: [] in my gatsby-config.js file.

Currently working on this, using gatsby-plugin-sitemap. . . more to come.

Not really sure what is causing this issue however on some of my pages I am getting duplicate breadcrumb entries. I am using sitemap crumbs.

For instance if the page I am on is /about-us/client-testimonials

The rendered breadcrumb is / about-us / client-testimonials / client-testimonials / client-testimonials /

This is happening to a lot of my pages, however not all so I am kind of confused on what could be causing it.

Loading my sitemap.xml, I can see the sitemap entry for the page is correct and only has 1 entry.

If I console log pageContext and view the breadcrumb property, it is indeed somehow getting duplicate crumbs.

Any help with this issue would be appreciated, thank you.

Here is the demo that i think is working how we would expect. I had an error, but seems correct now.

https://codesandbox.io/s/50o4zwm91l

Indeed that demo works as expected!

Here's my sandbox https://codesandbox.io/s/github/dvlprmartins/dvlprmartins

Thanks for your help btw!

Originally posted by @dvlprmartins in #14 (comment)