Breadcrumbs adds a new codeblock language, `breadcrumbs`. Currently, this can be used to render a tree of all paths in a given direction from the current note (similar to the [[Tree View]]), or a [Mermaid](https://mermaid.js.org) graph of the same data. The codeblocks use **YAML**, for example:
```yaml
type: tree
fields: [down]
depth: [0, 3]
sort: basename asc
```
This would render a markdown list of all paths pointing _down_ from the current note, up to a depth of 3, sorted by the basename of the notes, in ascending order.
![[view.codeblock.tree.png]]
## Available Fields
The following fields can be added to the codeblock to customise the output. Below the heading name for each field, you'll see the possible values/options for that field, as well as it's default value in (parentheses). Optional fields are marked with a `?`. If you want to use the default value, then you don't need to add that field to the codeblock.
### `type`
```ts
type?: (tree) | mermaid
```
How to visualise the results.
- `tree` is similar to the [[Tree View]]
- `mermaid` renders the results in a [Mermaid](https://mermaid.js.org) graph
![[Codeblock Mermaid Binary Tree.png]]
### `start-note`
```ts
start-note?: string
```
Override the starting note of the [[Concepts#Traversal|traversal]]. By default, the note that the codeblock is in will be used.
_Example_: `start-note: folder/note.md`
### `fields`
```ts
fields?: string[]
```
Filter edges by a list of your [[Edge Fields|edge fields]]. By default, all of your edge fields will be used.
_Example_: `fields: [up, same]`
### `field-groups`
```ts
field-groups?: string[]
```
Similar to the [[#`fields`]] property, but you can select multiple [[Field Groups|field groups]] instead of individual fields. By default, all fields (and therefore all groups) will be used.
_Example_: `field-groups: [ups, downs]`
### `merge-fields`
```ts
merge-fields?: (true) | false
```
If `false`, each of the chosen `fields` is [[Concepts#Traversal|traversed]] separately. If `merge-fields` is set to `true`, all fields will be traversed together, meaning paths of edges with different [[Edge Fields|fields]] will be shown together.
_Example_: `merge-fields: true`
> [!TIP]
> Another way to think of this is that `merge-fields: true` will run a _single_ traversal, where all fields are allowed in the path. Whereas `merge-fields: false` will run _multiple_ traversals - one for each field.
Consider the following graph:
```mermaid
graph LR
A -->|down| B
B -->|child| C
```
Starting from node `A`, and `merge-fields: false`, the result would just be:
```markdown
- B
```
Because `A` doesn't have any `child` edges leaving it, so only the `down` traversal has results. But with `merge-fields: true`, the result would be:
```markdown
- B
- C
```
Because the `down` and `child` edges are traversed together - paths with _either_ field are shown.
### `title`
```ts
title?: string
```
Add a title above the codeblock.
_Example_: `title: Breadcrumbs Codeblock`
### `depth`
```ts
depth?: [number] | [number, number]
```
Filter edges by a depth range. The min and max values are both _inclusive_.
_Example_:
- `depth: [0, 3]` - show all paths 3 levels deep and shallower
- `depth: [1, 3]` - show all paths between 1 and 3 levels deep
- `depth: [3]` - show all paths _atleast_ 3 levels deep
By default, all depths are shown.
### `collapse`
```ts
collapse?: true | (false)
```
If `type: tree`, and `collapse: true`, all nested lists will be collapsed/folded closed.
_Example_: `collapse: true`
### `flat`
```ts
flat?: true | (false)
```
Flatten the tree results into a un-nested list.
_Example_: `flat: true`
### `dataview-from`
```ts
dataview-from?: string
```
Filter edges by a [Dataview](http://blacksmithgu.github.io/obsidian-dataview/) query.
_Example_: `dataview-from: '#tag and !"Folder"'`
### `show-attributes`
```ts
show-attributes?: EdgeAttribute[]
```
Show specific [[Concepts#Edge Attributes|edge attributes]] about each item in the result. By default, none are shown.
_Example_: `show-attributes: [field, source]`
### `sort`
```ts
sort?: <field> (asc) | desc
```
Order the results using a given [[Concepts#Edge Sorters|edge sorter]].
_Example_: `sort: basename`, or `sort: path desc`, or `sort: neighbour-field:next`
### `mermaid-direction`
```ts
mermaid-direction?: LR | RL | TB | BT
```
The [direction](https://mermaid.js.org/syntax/flowchart.html#direction) of the mermaid graph (if `type: mermaid`). Meaning:
- `LR`: Left-to-right
- `RL`: Right-to-left
- `TB`: Top-to-bottom
- `BT`: Bottom-to-top
_Example_: `mermaid-direction: TB`
### `mermaid-renderer`
```ts
mermaid-renderer?: (dagre) | elk
```
The [renderer](https://mermaid.js.org/syntax/flowchart.html#renderer) to use for the mermaid graph.
- `dagre` is the default, and is more stable.
- `elk` is more experimental, but can handle larger graphs.
_Example_: `mermaid-renderer: elk`
### `mermaid-curve`
```ts
mermaid-curve?:
| (basis)
| bumpX
| bumpY
| cardinal
| catmullRom
| linear
| monotoneX
| monotoneY
| natural
| step
| stepAfter
| stepBefore
```
The [curve style](https://mermaid.js.org/syntax/flowchart.html#styling-line-curves) to use for the mermaid graph.
_Example_: `mermaid-curve: natural`
## Examples
### Simulate the Matrix View
You can show similar results to the [[Matrix View]] using the following codeblock:
```yaml
type: tree
# Only show the top-level edges
depth: [0, 0]
# Show the `field` attribute next to each edge item
show-attributes: [field]
# Sort the results by their field name, effectively "grouping" by field
sort: field
```
![[Codeblock Matrix View.png]]