quartz/docs/features/breadcrumbs.md

title	tags
Breadcrumbs	component

Breadcrumbs provide a way to navigate a hierarchy of pages within your site using a list of its parent folders.

By default, the element at the very top of your page is the breadcrumb navigation bar (can also be seen at the top on this page!).

Note

For information on how to add, remove or configure plugins, see the configuration#Plugins page.

Customization

Most configuration can be done via the options section of the breadcrumbs plugin entry in quartz.config.yaml.

For example, here's what the default configuration looks like:

plugins:
  - source: github:quartz-community/breadcrumbs
    enabled: true
    options:
      spacerSymbol: "❯"
      rootName: Home
      resolveFrontmatterTitle: true
      showCurrentPage: true
    layout:
      position: beforeBody
      priority: 5

For the TS override approach:

Plugin.Breadcrumbs({
  spacerSymbol: "❯",
  rootName: "Home",
  resolveFrontmatterTitle: true,
  showCurrentPage: true,
})

When passing in your own options, you can omit any or all of these fields if you'd like to keep the default value for that field.

You can also adjust where the breadcrumbs will be displayed by changing the layout.position field in the plugin entry in quartz.config.yaml (see layout).

Want to customize it even more?

• Removing breadcrumbs: remove the breadcrumbs entry from quartz.config.yaml or set enabled: false.
• Install: npx quartz plugin add github:quartz-community/breadcrumbs
• Source: quartz-community/breadcrumbs