vitepress

vitepress copied to clipboard

Is your feature request related to a problem? Please describe.

nope

Describe the solution you'd like

I want to breadcrumb like this.

Describe alternatives you've considered

No response

Additional context

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Read the Contributing Guidelines.
• [x] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.

You can use one of our layouts slots to add a breadcrumbs component there.

You can use one of our layouts slots to add a breadcrumbs component there.

this is temporary solve. I dont want to custom component

+1

You can use one of our layouts slots to add a breadcrumbs component there.

That would be cool! Do we have any examples of that? In my case, I don't really have control over the .md files that I put into the source directory. My site uses:

cp -r ../some-other-repo/docs .
npm run build:docs

@peterbe Do your markdown files have some data in frontmatter that can tell their breadcrumb path? Asking because the final part of breadcrumb can be inferred from title, but not the other parts. Otherwise you'll need to maintain a list of data yourself 👀

Regarding layout slots, they are added via theme - https://vitepress.dev/guide/extending-default-theme#layout-slots - you can use doc-top/doc-before probably.

Do your markdown files have some data in frontmatter that can tell their breadcrumb path? Asking because the final part of breadcrumb can be inferred from title, but not the other parts. Otherwise you'll need to maintain a list of data yourself 👀

It does not know about where it lives. All an individual file knows is that it's parent directory is called my-cool-directory but it doesn't know that the title for that directory should be My Coolio Dir (for example).

I'm trying to learn about https://vitepress.dev/guide/data-loading#createcontentloader and how it could make it possible to retroactive attach these. Still new to this :)

If you can maintain an object like this:

const names = {
  'my-cool-directory': 'My Cool Dir',
  ...
}

You can use https://vitepress.dev/reference/site-config#transformpagedata to do something like this:

// .vitepress/config.ts

export default defineConfig({
  transformPageData(pageData) {
    pageData.frontmatter.breadcrumbs = [...pageData.relativePath.split('/').slice(0, -1).map(x => names[x]), pageData.title]
  }
})

And then use this data in your vue component:

https://stackblitz.com/edit/vite-rqxgjj