mirror of
https://gitlab.com/MisterBiggs/brain-quartz.git
synced 2025-07-22 22:31:26 +00:00
.github
content
docs
advanced
features
Citations.md
Docker Support.md
Latex.md
Mermaid diagrams.md
Obsidian compatibility.md
OxHugo compatibility.md
RSS Feed.md
Roam Research compatibility.md
SPA Routing.md
backlinks.md
breadcrumbs.md
callouts.md
comments.md
darkmode.md
explorer.md
folder and tag listings.md
full-text search.md
graph view.md
i18n.md
index.md
popover previews.md
private pages.md
reader mode.md
recent notes.md
social images.md
syntax highlighting.md
table of contents.md
upcoming features.md
wikilinks.md
images
plugins
tags
authoring content.md
build.md
configuration.md
hosting.md
index.md
layout-components.md
layout.md
migrating from Quartz 3.md
philosophy.md
setting up your GitHub repository.md
showcase.md
upgrading.md
quartz
.gitattributes
.gitignore
.node-version
.npmrc
.prettierignore
.prettierrc
CODE_OF_CONDUCT.md
Dockerfile
LICENSE.txt
README.md
globals.d.ts
index.d.ts
package-lock.json
package.json
quartz.config.ts
quartz.layout.ts
tsconfig.json
36 lines
1.3 KiB
Markdown
36 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 `Component.Breadcrumbs()`.
|
||
|
||
For example, here's what the default configuration looks like:
|
||
|
||
```typescript title="quartz.layout.ts"
|
||
Component.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 `Component.Breadcrumbs()` up or down)
|
||
|
||
Want to customize it even more?
|
||
|
||
- Removing breadcrumbs: delete all usages of `Component.Breadcrumbs()` from `quartz.layout.ts`.
|
||
- Component: `quartz/components/Breadcrumbs.tsx`
|
||
- Style: `quartz/components/styles/breadcrumbs.scss`
|
||
- Script: inline at `quartz/components/Breadcrumbs.tsx`
|