Navigation - CSS Component ​

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

Construction ​

The CSS component uses the navtag with a z-navigation HTML custom attribute.

z-navigation ​

The z-navigation parameter is the main parameter used to render the navigation component.

We can separate the navigation into two parts: the header and the open menu.

The header is the main part of the navigation. It contains the logo, the search bar, and the navigation links.

The menu is the part of the navigation that opens when the user clicks on the menu icon. It contains the navigation links.

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.5.2/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.2/@zurich/design-tokens/Icons.css" />
<link rel="stylesheet" href="/0.5.2/@zurich/css-components/Navigation.css" />
<link rel="stylesheet" href="/0.5.2/@zurich/css-components/Button.css" />
<link rel="stylesheet" href="/0.5.2/@zurich/css-components/Logo.css" />
<link rel="stylesheet" href="/0.5.2/@zurich/css-components/Accordion.css" />
Code
html
<nav z-navigation>
  <label>
    <button z-button="link" icon="menu:line">
      Menu
    </button>
    <input type="checkbox">
  </label>
  <ul>
    <li>
      <button z-button="link" icon="home:line" href="/">Home</button>
    </li>
    <li>
      <button z-button="link" icon="chat:line" href="/">Contact us</button>
    </li>
    <li>
      <button z-button="link" icon="search:line" href="/">Search</button>
    </li>
  </ul>
  <a href="#">
    <div z-logo="inline">
    </div>
  </a>
  <aside>
    <div>
      <section>
        <p>News and media</p>
        <ul>
          <li><a z-button="link" role="button" href="#">Overview</a></li>
          <li><a z-button="link" role="button" href="#">Media releases</a></li>
          <li><a z-button="link" role="button" href="#">Calendar and events</a></li>
          <li><a z-button="link" role="button" href="#">Media Library</a></li>
        </ul>
      </section>
      <section>
        <p>About us</p>
        <ul>
          <li><a z-button="link" role="button" href="#">Overview</a></li>
          <li><a z-button="link" role="button" href="#">Annual Report</a></li>
          <li><a z-button="link" role="button" href="#">Zurich Talks</a></li>
          <li>
            <section z-accordion>
              <details>
                <summary>Our strategy</summary>
                <ul>
                  <li><a z-button="link" role="button" href="#">Overview</a></li>
                  <li><a z-button="link" role="button" href="#">Innovation & Technology</a></li>
                </ul>
              </details>
          </li>
        </ul>
      </section>
    </div>
    <div>
      <section>
        <p>Product and Services</p>
        <ul>
          <li><a z-button="link" role="button" href="#">Overview</a></li>
          <li>
            <section z-accordion>
              <details>
                <summary>Commercial Insurance</summary>
                <ul>
                  <li><a z-button="link" role="button" href="#">Overview</a></li>
                  <li><a z-button="link" role="button" href="#">Products</a></li>
                  <li><a z-button="link" role="button" href="#">Services</a></li>
                  <li><a z-button="link" role="button" href="#">Claims</a></li>
                </ul>
              </details>
          </li>
        </ul>
      </section>
      <section>
        <p>Industry knowledge</p>
        <ul>
          <li><a z-button="link" role="button" href="#">Overview</a></li>
          <li>
            <section z-accordion>
              <details>
                <summary>Topics</summary>
                <ul>
                  <li><a z-button="link" role="button" href="#">Future of work</a></li>
                  <li><a z-button="link" role="button" href="#">Global risks</a></li>
                  <li><a z-button="link" role="button" href="#">Digital, data and cyber</a></li>
                </ul>
              </details>
          </li>
      </section>
    </div>
  </aside>
</nav>