0b61f6fbfd
* feat: implement breadcrumbs * style: fix styling, move breadcrumbs to top * refactor: move `capitalize to `lang.ts`` * refactor: clean breadcrumb generation * feat: add options to breadcrumbs * feat: implement `resolveFrontmatterTitle` * feat: add `hideOnRoot` option * feat(consistency): capitalize every crumb * style: add `flex-wrap` to parent container * refactor: clean `Breadcrumbs.tsx` * feat(accessibility): use `nav`, add aria label * style: improve look in popovers by adding margin * docs: write docs for breadcrumb component * refactor: collapse `if` condition for hideOnRoot * chore: add todo for perf optimization * docs: update introduction
1.3 KiB
1.3 KiB
| title | tags | |
|---|---|---|
| Breadcrumbs |
|
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:
Component.Breadcrumbs({
spacerSymbol: ">", // symbol between crumbs
rootName: "Home", // name of first/root element
resolveFrontmatterTitle: false, // wether to resolve folder names through frontmatter titles (more computationally expensive)
hideOnRoot: true, // wether to hide breadcrumbs on root `index.md` page
})
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 graph view: delete all usages of
Component.Breadcrumbs()fromquartz.layout.ts. - Component:
quartz/components/Breadcrumbs.tsx - Style:
quartz/components/styles/breadcrumbs.scss - Script: inline at
quartz/components/Breadcrumbs.tsx