Breadcrumbs - CSS Component ​

...

Browser support ​

Construction ​

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

z-breadcrumbs ​

The z-breadcrumbs attribute is used to style the breadcrumbs component.

You can also replace the first crumb with the home:line icon.

INFO

Make sure you use the Button as a link for each crumb link inside the z-breadcrumbs component.

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.4.1/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.4.1/@zurich/design-tokens/Icons.css" />
<link rel="stylesheet" href="/0.4.1/@zurich/css-components/Breadcrumbs.css" />
<link rel="stylesheet" href="/0.4.1/@zurich/css-components/Button.css" />
<link rel="stylesheet" href="/0.4.1/@zurich/css-components/Icon.css" />
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 | Chip CSS example</title>

    <!-- #region imports -->
    <link rel="stylesheet" href="/0.4.1/@zurich/css-components/base.css" />
    <link rel="stylesheet" href="/0.4.1/@zurich/design-tokens/Icons.css" />
    <link rel="stylesheet" href="/0.4.1/@zurich/css-components/Breadcrumbs.css" />
    <link rel="stylesheet" href="/0.4.1/@zurich/css-components/Button.css" />
    <link rel="stylesheet" href="/0.4.1/@zurich/css-components/Icon.css" />
    <!-- #endregion imports -->

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

  <body>
    <table>
      <thead>
        <tr>
          <th>-</th>
          <th>home</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div>
              <nav z-breadcrumbs aria-label="breadcrumb">
                <ol>
                  <li>
                    <a z-button="link" role="button" href="#">
                      Link 1
                    </a>
                  </li>
                  <li>
                    <a z-button="link" role="button" href="#">
                      Link 2
                    </a>
                  </li>
                  <li>
                    <a z-button="link" role="button" href="#">
                      Link 3
                    </a>
                  </li>
                </ol>
              </nav>
            </div>
          </td>
          <td>
            <div>
              <nav z-breadcrumbs aria-label="breadcrumb">
                <ol>
                  <li>
                    <a z-button="link" role="button" href="#" icon="home:line"></a>
                  </li>
                  <li>
                    <a z-button="link" role="button" href="#">
                      Link 2
                    </a>
                  </li>
                  <li>
                    <a z-button="link" role="button" href="#">
                      Link 3
                    </a>
                  </li>
                </ol>
              </nav>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </body>

</html>