Breadcrumbs

...

Browser support

...

Parameters

The CSS component uses the <nav> tag with the z-breadcrumbs HTML custom attribute.

The parametrization of the component can be done with the following custom HTML params:

Name	Type	Description
z-breadcrumbs	string	Custom attribute for the breadcrumbs component

INFO

Make sure you use the Link component for each crumb link inside the z-breadcrumbs component.

Playground

Customization

HTML Examples

Imports

<link rel="stylesheet" href="/0.3.6/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/design-tokens/Icons.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/Breadcrumbs.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/Link.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/Icon.css" />

Code

<nav z-breadcrumbs aria-label="breadcrumb">
  <ol>
    <li>
      <a z-link="default" href="#">
        <i z-icon="home:outline"></i>
      </a>
    </li>
    <li>
      <a z-link="default" href="#">
        Molecules
      </a>
    </li>
    <li>
      <a z-link="default" href="#">
        Breadcrumbs
      </a>
    </li>
  </ol>
</nav>