Breadcrumb - How to use

The breadcrumb is a high-level UI element, so it's likely that it will be implemented once per application, and then never changed (apart from follow-up redesigns/improvements). Below we give a couple of examples to give a general overview and show how it works.

Basic use

A simple breadcrumb can be invoked using something like this:

<Hds::Breadcrumb>
  <Hds::Breadcrumb::Item @text="My org" @icon="org" />
  <Hds::Breadcrumb::Item @text="Consul" @icon="consul" />
  <Hds::Breadcrumb::Item @text="my-consul-cluster" />
  <Hds::Breadcrumb::Item @text="Overview" @current={{true}} />
</Hds::Breadcrumb>

With routing parameters

In the example above, we have omitted a few parameters for clarity. In reality, each breadcrumb item is expected to be a link, so in order to work the correct @route/@models/@model/@query parameter needs to be passed too (they will depend on the context, of course):