Website Breadcrumbs

How to automatically import website breadcrumbs based on the tree structure within Octopus.do

How to your setup breadcrumbs for automatic generation

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

1. breadcrumb which should contain one breadcrumb-item and one breadcrumb-divider

2. breadcrumb-item with text that uses a text property named Text that should be used for the text of this item.

3. breadcrumb-divider 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 breadcrumb 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.

Simple example how to setup a breadcrumb component.

After setting up your breadcrumb 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:

Example of a Breadcrumb created using the above example design.

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. ( 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 )