Showing root folder node in breadcrumbs

[craigscottuk]

Hi,

I've been playing around with Fumadocs for a few days and I really love it. I want to say thank you to Fuma Nama and all the Contributors who have been working on it and making it mega cool thing.

I have a question regarding the breadcrumbs. Would it be possible to have the option to show the breadcrumb item for the root folder (/docs) so the breadcrumb would look like this:

Docs > Thing 1 >

Maybe a prop 'includeRoot' could make this possible?

The reason I ask is that I'd like to be able to access the index.mdx in the /docs root using the breadcrumbs. For the project I'm working on, it would be really convenient to access this index file when using the app on a mobile device by clicking the breadcrumb item. It would save me from having to access this page through the navigation again.

I'm pretty new to the world of IT. I hope this isn't a silly or time-wasting question.

I really think this is a fantastic document management system. I'd love to contribute when my skills improve.

Thanks a lot for your time! :)

[fuma-nama]

There's no an option to configure this. In the past, I removed the root folder node from breadcrumbs in favour of the new design because it was useless most of the time (people could use sidebar instead, the root index page isn't opened frequently). I will implement this later

[fuma-nama]

It's implemented on the latest version of Fumadocs, also you can use the Links API: https://fumadocs.vercel.app/docs/ui/blocks/links for navigation links

[craigscottuk]

Thanks a lot for working on this! I've also been playing around with the the Links API. It is awesome! 😁

I'm still having a bit of bother with the breadcrumbs... maybe it's just me, though... I've added the 'includeRoot' param to the <DocsPage /> component in app/blog/[[...slug]]/page.tsx file but I don't see breadcrumb when I navigate to /blog/blog-post-one/two/three.

// app/blog/[[...slug]]/page.tsx

const MDX = page.data.exports.default;

console.log(blogPageTree);

return (
  <DocsPage
    breadcrumb={{ enabled: true, includeRoot: true }}
    tableOfContentPopover={{ enabled: false }}
    toc={page.data.exports.toc}
    full={page.data.full}
  >
    <DocsBody>
      <h1>{page.data.title}</h1>
      <MDX />
    </DocsBody>
  </DocsPage>
);

Here is my blog page tree:

//console.log(blogPageTree);

{
  name: 'Blog',
  children: [
    { type: 'page', name: 'Blog Post 1', url: '/blog/blog-post-one' },
    { type: 'page', name: 'Blog Post 2', url: '/blog/blog-post-two' },
    { type: 'page', name: 'Blog Post 3', url: '/blog/blog-post-three' }
  ]
}

There are no folders in my /blog. Maybe that's the issue?

Here is a look at some more of my code:

// content/blog/meta.json

{
  "title": "Blog",
  "pages": ["blog-post-one", "blog-post-two", "blog-post-three"],
  "defaultOpen": false,
  "root": true
}

  "dependencies": {
    "@radix-ui/react-accordion": "^1.2.0",
    "@radix-ui/react-slot": "^1.1.0",
    "@radix-ui/react-tabs": "^1.1.0",
    "embla-carousel-react": "^8.1.6",
    "fumadocs-core": "^12.5.1",
    "fumadocs-mdx": "^8.2.33",
    "fumadocs-ui": "^12.5.1",
    "next": "^14.2.4",
    "next-video": "^1.1.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },

Thanks a lot for time on this Fuma Nama!!

[fuma-nama]

Hmm you didn't include the index.mdx into page tree (the pages property in meta file)? It is missing on your blog page tree

[fuma-nama]

Also I will suggest you to add a link component to your page directly instead of using the breadcrumbs component, like how our blog site is implemented

[craigscottuk]

Yeah, that's a good idea. The link on the blog looks nice. Thanks a lot for your help and time one this! Really appreciate it.