mirror of
https://github.com/jackyzha0/quartz.git
synced 2026-03-21 21:45:42 -05:00
cdfb1bd85b
Update feature docs, hosting, CI/CD, getting started, configuration, layout, architecture, creating components, making plugins, and migration guide to reflect the v5 community plugin architecture.
35 lines
1.3 KiB
Markdown
35 lines
1.3 KiB
Markdown
---
|
||
title: "Breadcrumbs"
|
||
tags:
|
||
- 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!).
|
||
|
||
## Customization
|
||
|
||
Most configuration can be done by passing in options to `Plugin.Breadcrumbs()`.
|
||
|
||
For example, here's what the default configuration looks like:
|
||
|
||
```typescript title="quartz.layout.ts"
|
||
Plugin.Breadcrumbs({
|
||
spacerSymbol: "❯", // symbol between crumbs
|
||
rootName: "Home", // name of first/root element
|
||
resolveFrontmatterTitle: true, // whether to resolve folder names through frontmatter titles
|
||
showCurrentPage: true, // whether to display the current page in the breadcrumbs
|
||
})
|
||
```
|
||
|
||
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 adjusting the [[layout]] (moving `Plugin.Breadcrumbs()` up or down)
|
||
|
||
Want to customize it even more?
|
||
|
||
- Removing breadcrumbs: delete all usages of `Plugin.Breadcrumbs()` from `quartz.layout.ts`.
|
||
- Install: `npx quartz plugin add github:quartz-community/breadcrumbs`
|
||
- Source: [`quartz-community/breadcrumbs`](https://github.com/quartz-community/breadcrumbs)
|