Breadcrumbs - Web Component ​

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

Parameters ​

The Web component uses the <z-breadcrumbs> tag:

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

NameTypeDescription
crumbsObject[]The links in the breadcrumbs
homebooleanWhether to show the home icon for the first link in the breadcrumbs

crumbs ​

The crumbs parameter is an array of objects with the following properties:

  • text: The text to be displayed for the crumb.
  • to: the URL to navigate to when the crumb is clicked.

home ​

The home parameter is a boolean that determines if the first crumb should be replaced with a home icon.

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.5.1/@zurich/web-components/styles.css" />
<script type="module" src="/0.5.1/@zurich/web-components/breadcrumbs.js"></script>
Code
html
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ZDS | Link Web Component example</title>

    <!-- #region imports -->
    <link rel="stylesheet" href="/0.5.1/@zurich/web-components/styles.css" />
    <script type="module" src="/0.5.1/@zurich/web-components/breadcrumbs.js"></script>
    <!-- #endregion imports -->

    <link rel="stylesheet" href="/0.5.1/examples/styles.css" />
    <script type="module" src="/0.5.1/examples/params-script.js"></script>
  </head>

  <body>
    <table>
      <thead>
        <tr>
          <th>-</th>
          <th>home</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div>
              <z-breadcrumbs
                crumbs='[{ "text": "Link 1", "to": "#" },{ "text": "Link 2", "to": "#" },{ "text": "Link 3", "to": "#" }]'>
              </z-breadcrumbs>
            </div>
          </td>
          <td>
            <div>
              <z-breadcrumbs home
                crumbs='[{ "text": "Link 1", "to": "#" },{ "text": "Link 2", "to": "#" },{ "text": "Link 3", "to": "#" }]'>
              </z-breadcrumbs>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </body>

</html>