Building up breadcrumbs from currently active path

[ricardobalk]

Is it possible to use contentQuery together with useRoute in Nuxt Content to build a breadcrumb navigation menu?

I.e., I am trying to get the parents of the currently active path. The only thing I got so far, was getting the children of the current path, but I want to do the opposite. See the example WIP code below:

<template>
  <nav class="breadcrumbs">
    <span class="breadcrumb" v-for="(breadcrumb, index) in breadcrumbs" :key="index">
      <NuxtLink :to="breadcrumb.path">
          {{ breadcrumb.title }}
      </NuxtLink>
      <span v-if="index < breadcrumbs.length - 1">
        /
      </span>
    </span>
  </nav>
</template>

<script setup lang="ts">
  export interface IBreadcrumb {
    path:   string,
    title:  string,
  }

  export type TBreadcrumbs = IBreadcrumb[];

  const breadcrumbs = ref<TBreadcrumbs>([
    {
      path: '/',
      title: 'Home',
    },
    {
      path: '/blog',
      title: 'Blog',
    },
    {
      path: '/blog/2021/01/01/hello-world',
      title: 'Hello World',
    }
  ]);

  const generateCrumbs = async () => {
    const path = useRoute().path; // /blog/2021/01/01/hello-world
    const contentQuery = await queryContent()
                                 .where({ _path: path })
                                 .only(['_path', 'title'])
                                 .find();

    return contentQuery.map((item) => ({
        path:  item._path,
        title: item.title,
    })) as TBreadcrumbs;
  };

  onMounted(async () => {
    breadcrumbs.value = await generateCrumbs();
  });
</script>

<style lang="postcss">
  .breadcrumbs {
    @apply flex flex-wrap gap-2 text-sm;
    .breadcrumb {
      @apply flex items-center gap-2;
      .router-link-active {
        @apply text-gray-900;
      }
    }
  }
</style>

[ManasMadrecha]

If the route is based on the file's path (i.e., the folders' and file's name) and nothing custom like own slug, then you can just split the path by delimiter "/". This simple array of strings you get is the array of the paths.

Then loop over the code to query its path so as to find the file and get its title.

const breadcrumbs = []

paths.forEach(path => {
    const file = await queryContent().where({ _path: path}).find();
    breadcrumbs.push({title: file.title, path: file._path})
}