The Perfect Breadcrumbs (in Nuxt)

Breadcrumbs can be a bit of a pain. But there are lots of reasons you might want to make them.

TL;DR: I made a self-contained component that builds semantic breadcrumbs based on the path to the file using the router. It matches the paths against the router before outputting links.

The gist is at the end of the post.

What Are Breadcrumbs and Do They Really Deserve This Much Attention?

Breadcrumbs most commonly appear at the top of a page as text links denoting the path to the post (or back to the index). Breadcrumbs are an important navigation mechanism.

Combined with structured data or semantic markup like RDFa, they also act as an important SEO tool, for sites such as Google to understand the structure of your site.

When Google finds the data it needs, it can display the site structure in results.

Why Make This?

Most of the examples I found online take an array from the page you're placing the breadcrumbs. This works from the / divided path but skips paths that the router cannot match.

How Does It Work?

I'll focus on the JS rather than the JSX. You'll likely make better markup for it than I would.

Starting with an empty output.

export default {
  computed: {
    crumbs() {
      const crumbs = []

      return crumbs
    },
  },
}

Now, we'll get the current full path.

export default {
  computed: {
    crumbs() {
      const fullPath = this.$route.fullPath
      const params = fullPath.substring(1).split('/')
      const crumbs = []

      console.log(params) 

      // url:     /blog/2020/11/20/my-post-url
      // outputs: ['blog','2020','11','20','my-post-url']

      return crumbs
    },
  },
}

Next, recompile the URL bit by bit.

export default {
  computed: {
    crumbs() {
      const fullPath = this.$route.fullPath
      const params = fullPath.substring(1).split('/')
      const crumbs = []

      let path = ''

      params.forEach((param, index) => {
        path = `${path}/${param}`

        console.log(path)

      })

      // outputs: /blog
      //          /blog/2020
      //          /blog/2020/11
      //          /blog/2020/11/20
      //          /blog/2020/11/20/my-post-url

      return crumbs
    },
  },
}

Now, match each route on the router.

export default {
  computed: {
    crumbs() {
      const fullPath = this.$route.fullPath
      const params = fullPath.substring(1).split('/')
      const crumbs = []

      let path = ''

      // test path
      params.push('fake')

      params.forEach((param, index) => {
        path = `${path}/${param}`
        const match = this.$router.match(path)

        if (match.name !== null) {
          console.log(`yep:  ${path}`)
        } else {
          console.log(`nope: ${path}`)
        }
      })

      // outputs: yep:  /blog
      //          yep:  /blog/2020
      //          yep:  /blog/2020/11
      //          yep:  /blog/2020/11/20
      //          yep:  /blog/2020/11/20/my-post-url
      //          nope: /blog/2020/11/20/my-post-url/fake

      return crumbs
    },
  },
}

Finally, capture only matches.

export default {
  computed: {
    crumbs() {
      const fullPath = this.$route.fullPath
      const params = fullPath.substring(1).split('/')
      const crumbs = []

      let path = ''

      params.forEach((param, index) => {
        path = `${path}/${param}`
        const match = this.$router.match(path)

        if (match.name !== null) {
          crumbs.push(match)
        }
      })

      return crumbs
    },
  },
}

In mine, I turn the param into a title using ap-style-title-case. I have a prop that I let folks override the autogenerated page title for blog posts where the slug might not perfectly turn back into a title.

const titleCase = require('ap-style-title-case')

export default {
  props: {
    title: {
      type: String,
      default: null,
    },
  },

  computed: {
    crumbs() {
      const fullPath = this.$route.fullPath
      const params = fullPath.startsWith('/')
        ? fullPath.substring(1).split('/')
        : fullPath.split('/')
      const crumbs = []

      let path = ''

      params.forEach((param, index) => {
        path = `${path}/${param}`
        const match = this.$router.match(path)

        if (match.name !== null) {
          crumbs.push({
            title: titleCase(param.replace(/-/g, ' ')),
            ...match,
          })
        }
      })

      return crumbs
    },
  },
}

The Full Code

Check out the gist for the whole component!

Comments

[Sebastian hilton]

I took it a step further for my cms i'm building by adding a dynamic page title underneath my breadcrumbs by adding your code like this:

<h2 v-for="(crumb, index) in crumbs" :key="index" property="itemListElement" typeof="ListItem" class="breadcrumb-item pageTitle">{{$route.fullPath === crumb.path && title !== null ? title : crumb.title}}</h2>

[Irving Caamal]

Hi, this was very helpful for me, I add this i18Key: titleCase(param.replace(/\//g, '')), on the push and now you can translate the name of the page if y ou are using nuxti18n

Thanks :)

[retroriff]

Element <meta> is not permitted as content in <li>

[EmanuilGerganov]

Super explanation and it's working fantastic, thank you, bro. I got a new follower ;)