> For the complete documentation index, see [llms.txt](https://help.vizioz.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.vizioz.com/octopus.do-to-figma-plugin/website-breadcrumbs.md).

# Website Breadcrumbs

**How to your setup breadcrumbs for automatic generation**

To automatically add breadcrumbs, you will need to create three new Components:

1. &#x20;<mark style="background-color:green;">**breadcrumb**</mark> which should contain one <mark style="color:green;">breadcrumb-item</mark> and one <mark style="color:green;">breadcrumb-divider</mark>
2. &#x20;<mark style="background-color:green;">**breadcrumb-item**</mark>  with text that uses a text property named <mark style="background-color:purple;">Text</mark> that should be used for the text of this item.
3. &#x20;<mark style="background-color:green;">**breadcrumb-divider**</mark> this is a simple component that contains your divider symbol that goes between the bread crumbs.

\
The design of the above items and layout can be whatever you require, however your parent <mark style="color:green;">breadcrumb</mark> component should use auto-layout as the plugin will be deleting all the child components and then re-adding as many as are needed to build the breadcrumb.

<figure><img src="/files/SuTfyHQwfFr25UfINyNE" alt=""><figcaption><p>Simple example how to setup a breadcrumb component.</p></figcaption></figure>

After setting up your <mark style="color:green;">breadcrumb</mark> components, you can then add your breadcrumb to as many different blocks as you need. You might chose to just add it to the "breadcrumb" block, but if you have custom designs, you might need to include your breadcrumb inside other blocks and that should also work fine.\
\
Here is an example output:

<figure><img src="/files/N0i2E9d6qGX0L0nZKRyA" alt=""><figcaption><p>Example of a Breadcrumb created using the above example design.</p></figcaption></figure>

Each of these breadcrumb items will be setup as a clickable link, so if you try and open your pages in the Prototype mode, you will see you can use them to navigation to their parent pages.\
\
\&#xNAN;*<mark style="background-color:green;">**( I am currently trying to dynamically build a site navigation so you can properly navigate around a site in the prototype mode... hopefully in a future update )**</mark>*


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.vizioz.com/octopus.do-to-figma-plugin/website-breadcrumbs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.