Page Navigation

v0.0.0

The Page Navigation is the main navigation of the website.

In collapsed state the navigation works as a drilldown menu. In expanded state as a dropdown menu.

The Navigation is limited to 3 levels. The top level can contain a pitch, containing an image with some content that describes the content under that level.

To show the active state add .active to .gw-page-navigation__link

Page Navigation is part of the Page component.

<!-- create some space for demo. -->
<div style="margin-bottom: 200px">
  <!-- page navigation -->
  <!-- Page Navigation -->
  <nav class="gw-page-navigation">
    <div aria-label="main menu" class="gw-page-navigation__menu" role="navigation">
      <ul class="gw-page-navigation__list gw-page-navigation__list--level-0" id="sg-6173dd">
        <li class="gw-page-navigation__item gw-page-navigation__item--level-0">
          <a aria-label="Our products" class="gw-page-navigation__link gw-page-navigation__link--level-0 gw-page-navigation__link--next" data-tabindex-collapsed="15" href="#sample-694730">
            Our products
            <span aria-label="Toggle our products submenu" class="gw-page-navigation__trigger gw-page-navigation__trigger--level-0" data-tabindex-collapsed="15" data-tabindex-expanded="0" role="button">
              <span class="sr-only">Toggle Our products Submenu</span>
            </span>
          </a>
          <div class="gw-page-navigation__next gw-page-navigation__next--level-0">
            <ul class="gw-page-navigation__list gw-page-navigation__list--level-1" id="sg-c987d2">
              <li class="gw-page-navigation__item gw-page-navigation__item--level-1">
                <a aria-label="First submenu item" class="gw-page-navigation__link gw-page-navigation__link--level-1 gw-page-navigation__link--next" data-tabindex-collapsed="15" href="#sample-a997b9">
                  First submenu item
                  <span aria-label="Toggle first submenu item submenu" class="gw-page-navigation__trigger gw-page-navigation__trigger--level-1" data-tabindex-collapsed="15" data-tabindex-expanded="0" role="button">
                    <span class="sr-only">Toggle First submenu item Submenu</span>
                  </span>
                </a>
                <div class="gw-page-navigation__next gw-page-navigation__next--level-1">
                  <ul class="gw-page-navigation__list gw-page-navigation__list--level-2" id="sg-a6aa2a">
                    <li class="gw-page-navigation__item gw-page-navigation__item--level-2">
                      <a aria-label="First sub-submenu item" class="gw-page-navigation__link gw-page-navigation__link--level-2" data-tabindex-collapsed="15" href="#sample-dec954">
                        First sub-submenu item
                      </a>
                    </li>
                    <li class="gw-page-navigation__item gw-page-navigation__item--level-2">
                      <a aria-label="Second sub-submenu item" class="gw-page-navigation__link gw-page-navigation__link--level-2" data-tabindex-collapsed="15" href="#sample-93de33">
                        Second sub-submenu item
                      </a>
                    </li>
                    <li class="gw-page-navigation__item gw-page-navigation__item--level-2">
                      <a aria-label="Third sub-submenu item" class="gw-page-navigation__link gw-page-navigation__link--level-2" data-tabindex-collapsed="15" href="#sample-ae073c">
                        Third sub-submenu item
                      </a>
                    </li>
                  </ul>
                </div>
              </li>
              <li class="gw-page-navigation__item gw-page-navigation__item--level-1">
                <a aria-label="Second submenu item" class="gw-page-navigation__link gw-page-navigation__link--level-1" data-tabindex-collapsed="15" href="#sample-40d645">
                  Second submenu item
                </a>
              </li>
              <li class="gw-page-navigation__item gw-page-navigation__item--level-1">
                <a aria-label="Third submenu item" class="gw-page-navigation__link gw-page-navigation__link--level-1" data-tabindex-collapsed="15" href="#sample-11b713">
                  Third submenu item
                </a>
              </li>
            </ul>
            <div class="gw-page-navigation__pitch">
              <div class="gw-page-navigation__pitch-visual">
                <img src="/assets/images/static/test-480x300.jpg" alt="">
              </div>
              <div class="gw-page-navigation__pitch-content">
                <p>A simplified unified approach in Teva is leading to more agile and affordable solutions for patients</p>
              </div>
            </div>
          </div>
        </li>
        <li class="gw-page-navigation__item gw-page-navigation__item--level-0">
          <a aria-label="Resources for patients &amp; caregivers" class="gw-page-navigation__link gw-page-navigation__link--level-0" data-tabindex-collapsed="15" href="#sample-7ad249">
            Resources for patients &amp; caregivers
          </a>
        </li>
        <li class="gw-page-navigation__item gw-page-navigation__item--level-0">
          <a aria-label="Resources for healtcare professionals" class="gw-page-navigation__link gw-page-navigation__link--level-0" data-tabindex-collapsed="15" href="#sample-d36d8e">
            Resources for healtcare professionals
          </a>
        </li>
        <li class="gw-page-navigation__item gw-page-navigation__item--level-0 gw-page-navigation__item--cta">
          <!-- Button type: solid  -->
          <a href="#" class="vi-btn-solid vi-btn-solid--accent-2 vi-btn-solid--no-pointer vi-btn">Call to Action</a>
        </li>
      </ul>
    </div>
    <div class="gw-page-navigation__logo">
      <a class="gw-page-navigation__logo-link" href="#">
        <img src="/assets/images/logos/logo_teva.svg" alt="Teva">
      </a>
    </div>
  </nav>
</div>

CTA button #

A CTA button can be added to the header.

<!-- / create some space for demo. -->
<div style="margin-bottom: 200px">
  <!-- Page Navigation -->
  <nav class="gw-page-navigation">
    <div aria-label="main menu" class="gw-page-navigation__menu" role="navigation">
      <ul class="gw-page-navigation__list gw-page-navigation__list--level-0" id="sg-96c0a6">
        <li class="gw-page-navigation__item gw-page-navigation__item--level-0">
          <a aria-label="Our products" class="gw-page-navigation__link gw-page-navigation__link--level-0 gw-page-navigation__link--next" data-tabindex-collapsed="15" href="#sample-8ed222">
            Our products
            <span aria-label="Toggle our products submenu" class="gw-page-navigation__trigger gw-page-navigation__trigger--level-0" data-tabindex-collapsed="15" data-tabindex-expanded="0" role="button">
              <span class="sr-only">Toggle Our products Submenu</span>
            </span>
          </a>
          <div class="gw-page-navigation__next gw-page-navigation__next--level-0">
            <ul class="gw-page-navigation__list gw-page-navigation__list--level-1" id="sg-ede113">
              <li class="gw-page-navigation__item gw-page-navigation__item--level-1">
                <a aria-label="First submenu item" class="gw-page-navigation__link gw-page-navigation__link--level-1 gw-page-navigation__link--next" data-tabindex-collapsed="15" href="#sample-ba3336">
                  First submenu item
                  <span aria-label="Toggle first submenu item submenu" class="gw-page-navigation__trigger gw-page-navigation__trigger--level-1" data-tabindex-collapsed="15" data-tabindex-expanded="0" role="button">
                    <span class="sr-only">Toggle First submenu item Submenu</span>
                  </span>
                </a>
                <div class="gw-page-navigation__next gw-page-navigation__next--level-1">
                  <ul class="gw-page-navigation__list gw-page-navigation__list--level-2" id="sg-b24eed">
                    <li class="gw-page-navigation__item gw-page-navigation__item--level-2">
                      <a aria-label="First sub-submenu item" class="gw-page-navigation__link gw-page-navigation__link--level-2" data-tabindex-collapsed="15" href="#sample-8d6bee">
                        First sub-submenu item
                      </a>
                    </li>
                    <li class="gw-page-navigation__item gw-page-navigation__item--level-2">
                      <a aria-label="Second sub-submenu item" class="gw-page-navigation__link gw-page-navigation__link--level-2" data-tabindex-collapsed="15" href="#sample-509a8b">
                        Second sub-submenu item
                      </a>
                    </li>
                    <li class="gw-page-navigation__item gw-page-navigation__item--level-2">
                      <a aria-label="Third sub-submenu item" class="gw-page-navigation__link gw-page-navigation__link--level-2" data-tabindex-collapsed="15" href="#sample-32c4ec">
                        Third sub-submenu item
                      </a>
                    </li>
                  </ul>
                </div>
              </li>
              <li class="gw-page-navigation__item gw-page-navigation__item--level-1">
                <a aria-label="Second submenu item" class="gw-page-navigation__link gw-page-navigation__link--level-1" data-tabindex-collapsed="15" href="#sample-8a71ac">
                  Second submenu item
                </a>
              </li>
              <li class="gw-page-navigation__item gw-page-navigation__item--level-1">
                <a aria-label="Third submenu item" class="gw-page-navigation__link gw-page-navigation__link--level-1" data-tabindex-collapsed="15" href="#sample-0b0777">
                  Third submenu item
                </a>
              </li>
            </ul>
            <div class="gw-page-navigation__pitch">
              <div class="gw-page-navigation__pitch-visual">
                <img src="/assets/images/static/test-480x300.jpg" alt="">
              </div>
              <div class="gw-page-navigation__pitch-content">
                <p>A simplified unified approach in Teva is leading to more agile and affordable solutions for patients</p>
              </div>
            </div>
          </div>
        </li>
        <li class="gw-page-navigation__item gw-page-navigation__item--level-0">
          <a aria-label="Resources for patients &amp; caregivers" class="gw-page-navigation__link gw-page-navigation__link--level-0" data-tabindex-collapsed="15" href="#sample-312817">
            Resources for patients &amp; caregivers
          </a>
        </li>
        <li class="gw-page-navigation__item gw-page-navigation__item--level-0">
          <a aria-label="Resources for healtcare professionals" class="gw-page-navigation__link gw-page-navigation__link--level-0" data-tabindex-collapsed="15" href="#sample-6ed587">
            Resources for healtcare professionals
          </a>
        </li>
        <li class="gw-page-navigation__item gw-page-navigation__item--level-0 gw-page-navigation__item--cta">
          <!-- Button type: solid  -->
          <a href="#" class="vi-btn-solid vi-btn-solid--accent-2 vi-btn-solid--no-pointer vi-btn">Call to Action</a>
        </li>
      </ul>
    </div>
    <div class="gw-page-navigation__logo">
      <a class="gw-page-navigation__logo-link" href="#">
        <img src="/assets/images/logos/logo_teva.svg" alt="Teva">
      </a>
    </div>
  </nav>
</div>

3 Level example #

A 3 level example containing long sub menus and titles.

<!-- / create some space for demo. -->
<div style="margin-bottom: 200px">
  <!-- Page Navigation -->
  <nav class="gw-page-navigation">
    <div aria-label="main menu" class="gw-page-navigation__menu" role="navigation">
      <ul class="gw-page-navigation__list gw-page-navigation__list--level-0" id="sg-4a5c25">
        <li class="gw-page-navigation__item gw-page-navigation__item--level-0">
          <a aria-label="Item 1" class="gw-page-navigation__link gw-page-navigation__link--level-0 gw-page-navigation__link--next" data-tabindex-collapsed="15" href="#sample-ad0025">
            Item 1
            <span aria-label="Toggle item 1 submenu" class="gw-page-navigation__trigger gw-page-navigation__trigger--level-0" data-tabindex-collapsed="15" data-tabindex-expanded="0" role="button">
              <span class="sr-only">Toggle Item 1 Submenu</span>
            </span>
          </a>
          <div class="gw-page-navigation__next gw-page-navigation__next--level-0">
            <ul class="gw-page-navigation__list gw-page-navigation__list--level-1" id="sg-08dbd1">
              <li class="gw-page-navigation__item gw-page-navigation__item--level-1">
                <a aria-label="Item 2.1" class="gw-page-navigation__link gw-page-navigation__link--level-1" data-tabindex-collapsed="15" href="#sample-709d38">
                  Item 2.1
                </a>
              </li>
              <li class="gw-page-navigation__item gw-page-navigation__item--level-1">
                <a aria-label="Item 2.2" class="gw-page-navigation__link gw-page-navigation__link--level-1" data-tabindex-collapsed="15" href="#sample-09a983">
                  Item 2.2
                </a>
              </li>
              <li class="gw-page-navigation__item gw-page-navigation__item--level-1">
                <a aria-label="Item 2.3" class="gw-page-navigation__link gw-page-navigation__link--level-1" data-tabindex-collapsed="15" href="#sample-635aa8">
                  Item 2.3
                </a>
              </li>
            </ul>
            <div class="gw-page-navigation__pitch">
              <div class="gw-page-navigation__pitch-visual">
                <img src="/assets/images/static/test-480x300.jpg" alt="">
              </div>
              <div class="gw-page-navigation__pitch-content">
                <p>A simplified unified approach in Teva is leading to more agile and affordable solutions for patients</p>
              </div>
            </div>
          </div>
        </li>
        <li class="gw-page-navigation__item gw-page-navigation__item--level-0">
          <a aria-label="Item 2" class="gw-page-navigation__link gw-page-navigation__link--level-0 gw-page-navigation__link--next" data-tabindex-collapsed="15" href="#sample-17eaa9">
            Item 2
            <span aria-label="Toggle item 2 submenu" class="gw-page-navigation__trigger gw-page-navigation__trigger--level-0" data-tabindex-collapsed="15" data-tabindex-expanded="0" role="button">
              <span class="sr-only">Toggle Item 2 Submenu</span>
            </span>
          </a>
          <div class="gw-page-navigation__next gw-page-navigation__next--level-0">
            <ul class="gw-page-navigation__list gw-page-navigation__list--level-1" id="sg-792508">
              <li class="gw-page-navigation__item gw-page-navigation__item--level-1">
                <a aria-label="Item 2.1" class="gw-page-navigation__link gw-page-navigation__link--level-1" data-tabindex-collapsed="15" href="#sample-c43d34">
                  Item 2.1
                </a>
              </li>
              <li class="gw-page-navigation__item gw-page-navigation__item--level-1">
                <a aria-label="Item 2.2" class="gw-page-navigation__link gw-page-navigation__link--level-1 gw-page-navigation__link--next" data-tabindex-collapsed="15" href="#sample-286111">
                  Item 2.2
                  <span aria-label="Toggle item 2.2 submenu" class="gw-page-navigation__trigger gw-page-navigation__trigger--level-1" data-tabindex-collapsed="15" data-tabindex-expanded="0" role="button">
                    <span class="sr-only">Toggle Item 2.2 Submenu</span>
                  </span>
                </a>
                <div class="gw-page-navigation__next gw-page-navigation__next--level-1">
                  <ul class="gw-page-navigation__list gw-page-navigation__list--level-2" id="sg-90ab4b">
                    <li class="gw-page-navigation__item gw-page-navigation__item--level-2">
                      <a aria-label="Item 2.2.1" class="gw-page-navigation__link gw-page-navigation__link--level-2" data-tabindex-collapsed="15" href="#sample-d7810c">
                        Item 2.2.1
                      </a>
                    </li>
                    <li class="gw-page-navigation__item gw-page-navigation__item--level-2">
                      <a aria-label="Item 2.2.2" class="gw-page-navigation__link gw-page-navigation__link--level-2" data-tabindex-collapsed="15" href="#sample-b17919">
                        Item 2.2.2
                      </a>
                    </li>
                  </ul>
                </div>
              </li>
              <li class="gw-page-navigation__item gw-page-navigation__item--level-1">
                <a aria-label="Item 2.3" class="gw-page-navigation__link gw-page-navigation__link--level-1" data-tabindex-collapsed="15" href="#sample-0b3c92">
                  Item 2.3
                </a>
              </li>
              <li class="gw-page-navigation__item gw-page-navigation__item--level-1">
                <a aria-label="Item 2.4" class="gw-page-navigation__link gw-page-navigation__link--level-1" data-tabindex-collapsed="15" href="#sample-c16aec">
                  Item 2.4
                </a>
              </li>
              <li class="gw-page-navigation__item gw-page-navigation__item--level-1">
                <a aria-label="Item 2.5" class="gw-page-navigation__link gw-page-navigation__link--level-1" data-tabindex-collapsed="15" href="#sample-db6b85">
                  Item 2.5
                </a>
              </li>
              <li class="gw-page-navigation__item gw-page-navigation__item--level-1">
                <a aria-label="Item 2.6" class="gw-page-navigation__link gw-page-navigation__link--level-1" data-tabindex-collapsed="15" href="#sample-81ab96">
                  Item 2.6
                </a>
              </li>
              <li class="gw-page-navigation__item gw-page-navigation__item--level-1">
                <a aria-label="Item 2.7" class="gw-page-navigation__link gw-page-navigation__link--level-1" data-tabindex-collapsed="15" href="#sample-7a1ab1">
                  Item 2.7
                </a>
              </li>
              <li class="gw-page-navigation__item gw-page-navigation__item--level-1">
                <a aria-label="Item 2.8" class="gw-page-navigation__link gw-page-navigation__link--level-1 gw-page-navigation__link--next" data-tabindex-collapsed="15" href="#sample-59d489">
                  Item 2.8
                  <span aria-label="Toggle item 2.8 submenu" class="gw-page-navigation__trigger gw-page-navigation__trigger--level-1" data-tabindex-collapsed="15" data-tabindex-expanded="0" role="button">
                    <span class="sr-only">Toggle Item 2.8 Submenu</span>
                  </span>
                </a>
                <div class="gw-page-navigation__next gw-page-navigation__next--level-1">
                  <ul class="gw-page-navigation__list gw-page-navigation__list--level-2" id="sg-aade64">
                    <li class="gw-page-navigation__item gw-page-navigation__item--level-2">
                      <a aria-label="Item 2.8.1 With Long title nec orci nec ipsum consequat ultrices" class="gw-page-navigation__link gw-page-navigation__link--level-2" data-tabindex-collapsed="15" href="#sample-7569dc">
                        Item 2.8.1 With Long title nec orci nec ipsum consequat ultrices
                      </a>
                    </li>
                    <li class="gw-page-navigation__item gw-page-navigation__item--level-2">
                      <a aria-label="Item 2.8.2" class="gw-page-navigation__link gw-page-navigation__link--level-2" data-tabindex-collapsed="15" href="#sample-d8bcba">
                        Item 2.8.2
                      </a>
                    </li>
                    <li class="gw-page-navigation__item gw-page-navigation__item--level-2">
                      <a aria-label="Item 2.8.3" class="gw-page-navigation__link gw-page-navigation__link--level-2" data-tabindex-collapsed="15" href="#sample-44b9e2">
                        Item 2.8.3
                      </a>
                    </li>
                    <li class="gw-page-navigation__item gw-page-navigation__item--level-2">
                      <a aria-label="Item 2.8.4" class="gw-page-navigation__link gw-page-navigation__link--level-2" data-tabindex-collapsed="15" href="#sample-8ca2ba">
                        Item 2.8.4
                      </a>
                    </li>
                    <li class="gw-page-navigation__item gw-page-navigation__item--level-2">
                      <a aria-label="Item 2.8.5" class="gw-page-navigation__link gw-page-navigation__link--level-2" data-tabindex-collapsed="15" href="#sample-0e0921">
                        Item 2.8.5
                      </a>
                    </li>
                  </ul>
                </div>
              </li>
              <li class="gw-page-navigation__item gw-page-navigation__item--level-1">
                <a aria-label="Item 2.9" class="gw-page-navigation__link gw-page-navigation__link--level-1" data-tabindex-collapsed="15" href="#sample-214d3d">
                  Item 2.9
                </a>
              </li>
              <li class="gw-page-navigation__item gw-page-navigation__item--level-1">
                <a aria-label="Item 2.10" class="gw-page-navigation__link gw-page-navigation__link--level-1" data-tabindex-collapsed="15" href="#sample-a96e91">
                  Item 2.10
                </a>
              </li>
              <li class="gw-page-navigation__item gw-page-navigation__item--level-1">
                <a aria-label="Item 2.11" class="gw-page-navigation__link gw-page-navigation__link--level-1" data-tabindex-collapsed="15" href="#sample-c1d760">
                  Item 2.11
                </a>
              </li>
              <li class="gw-page-navigation__item gw-page-navigation__item--level-1">
                <a aria-label="Item 2.12" class="gw-page-navigation__link gw-page-navigation__link--level-1" data-tabindex-collapsed="15" href="#sample-49e3b9">
                  Item 2.12
                </a>
              </li>
              <li class="gw-page-navigation__item gw-page-navigation__item--level-1">
                <a aria-label="Item 2.13" class="gw-page-navigation__link gw-page-navigation__link--level-1" data-tabindex-collapsed="15" href="#sample-d936a1">
                  Item 2.13
                </a>
              </li>
              <li class="gw-page-navigation__item gw-page-navigation__item--level-1">
                <a aria-label="Item 2.14" class="gw-page-navigation__link gw-page-navigation__link--level-1" data-tabindex-collapsed="15" href="#sample-c270a9">
                  Item 2.14
                </a>
              </li>
            </ul>
            <div class="gw-page-navigation__pitch">
              <div class="gw-page-navigation__pitch-visual">
                <img src="/assets/images/static/test-480x300.jpg" alt="">
              </div>
              <div class="gw-page-navigation__pitch-content">
                <p>A simplified unified approach in Teva is leading to more agile and affordable solutions for patients</p>
              </div>
            </div>
          </div>
        </li>
        <li class="gw-page-navigation__item gw-page-navigation__item--level-0">
          <a aria-label="Item 3" class="gw-page-navigation__link gw-page-navigation__link--level-0 gw-page-navigation__link--next" data-tabindex-collapsed="15" href="#sample-37eb04">
            Item 3
            <span aria-label="Toggle item 3 submenu" class="gw-page-navigation__trigger gw-page-navigation__trigger--level-0" data-tabindex-collapsed="15" data-tabindex-expanded="0" role="button">
              <span class="sr-only">Toggle Item 3 Submenu</span>
            </span>
          </a>
          <div class="gw-page-navigation__next gw-page-navigation__next--level-0">
            <ul class="gw-page-navigation__list gw-page-navigation__list--level-1" id="sg-63b485">
              <li class="gw-page-navigation__item gw-page-navigation__item--level-1">
                <a aria-label="Item 3.1" class="gw-page-navigation__link gw-page-navigation__link--level-1" data-tabindex-collapsed="15" href="#sample-710e35">
                  Item 3.1
                </a>
              </li>
              <li class="gw-page-navigation__item gw-page-navigation__item--level-1">
                <a aria-label="Item 3.2" class="gw-page-navigation__link gw-page-navigation__link--level-1" data-tabindex-collapsed="15" href="#sample-760c6b">
                  Item 3.2
                </a>
              </li>
              <li class="gw-page-navigation__item gw-page-navigation__item--level-1">
                <a aria-label="Item 3.3" class="gw-page-navigation__link gw-page-navigation__link--level-1" data-tabindex-collapsed="15" href="#sample-9432cb">
                  Item 3.3
                </a>
              </li>
              <li class="gw-page-navigation__item gw-page-navigation__item--level-1">
                <a aria-label="Item 3.4" class="gw-page-navigation__link gw-page-navigation__link--level-1" data-tabindex-collapsed="15" href="#sample-ee54bb">
                  Item 3.4
                </a>
              </li>
            </ul>
            <div class="gw-page-navigation__pitch">
              <div class="gw-page-navigation__pitch-visual">
                <img src="/assets/images/static/test-480x300.jpg" alt="">
              </div>
              <div class="gw-page-navigation__pitch-content">
                <p>A simplified unified approach in Teva is leading to more agile and affordable solutions for patients</p>
              </div>
            </div>
          </div>
        </li>
        <li class="gw-page-navigation__item gw-page-navigation__item--level-0">
          <a aria-label="Item 4" class="gw-page-navigation__link gw-page-navigation__link--level-0 gw-page-navigation__link--next" data-tabindex-collapsed="15" href="#sample-da0789">
            Item 4
            <span aria-label="Toggle item 4 submenu" class="gw-page-navigation__trigger gw-page-navigation__trigger--level-0" data-tabindex-collapsed="15" data-tabindex-expanded="0" role="button">
              <span class="sr-only">Toggle Item 4 Submenu</span>
            </span>
          </a>
          <div class="gw-page-navigation__next gw-page-navigation__next--level-0">
            <ul class="gw-page-navigation__list gw-page-navigation__list--level-1" id="sg-9c836a">
              <li class="gw-page-navigation__item gw-page-navigation__item--level-1">
                <a aria-label="Item 4.1 With Long title nec orci nec ipsum consequat ultrices" class="gw-page-navigation__link gw-page-navigation__link--level-1" data-tabindex-collapsed="15" href="#sample-e882e6">
                  Item 4.1 With Long title nec orci nec ipsum consequat ultrices
                </a>
              </li>
              <li class="gw-page-navigation__item gw-page-navigation__item--level-1">
                <a aria-label="Item 4.2" class="gw-page-navigation__link gw-page-navigation__link--level-1" data-tabindex-collapsed="15" href="#sample-22d601">
                  Item 4.2
                </a>
              </li>
              <li class="gw-page-navigation__item gw-page-navigation__item--level-1">
                <a aria-label="Item 4.3" class="gw-page-navigation__link gw-page-navigation__link--level-1" data-tabindex-collapsed="15" href="#sample-eea80e">
                  Item 4.3
                </a>
              </li>
              <li class="gw-page-navigation__item gw-page-navigation__item--level-1">
                <a aria-label="Item 4.4" class="gw-page-navigation__link gw-page-navigation__link--level-1" data-tabindex-collapsed="15" href="#sample-46391c">
                  Item 4.4
                </a>
              </li>
            </ul>
            <div class="gw-page-navigation__pitch">
              <div class="gw-page-navigation__pitch-visual">
                <img src="/assets/images/static/test-480x300.jpg" alt="">
              </div>
              <div class="gw-page-navigation__pitch-content">
                <p>A simplified unified approach in Teva is leading to more agile and affordable solutions for patients</p>
              </div>
            </div>
          </div>
        </li>
        <li class="gw-page-navigation__item gw-page-navigation__item--level-0">
          <a aria-label="Item 5" class="gw-page-navigation__link gw-page-navigation__link--level-0" data-tabindex-collapsed="15" href="#sample-95dc5a">
            Item 5
          </a>
        </li>
        <li class="gw-page-navigation__item gw-page-navigation__item--level-0">
          <a aria-label="Item 6" class="gw-page-navigation__link gw-page-navigation__link--level-0" data-tabindex-collapsed="15" href="#sample-7d9ed5">
            Item 6
          </a>
        </li>
        <li class="gw-page-navigation__item gw-page-navigation__item--level-0">
          <a aria-label="Item 7" class="gw-page-navigation__link gw-page-navigation__link--level-0" data-tabindex-collapsed="15" href="#sample-bb123c">
            Item 7
          </a>
        </li>
        <li class="gw-page-navigation__item gw-page-navigation__item--level-0">
          <a aria-label="Item 8" class="gw-page-navigation__link gw-page-navigation__link--level-0 gw-page-navigation__link--next" data-tabindex-collapsed="15" href="#sample-aba150">
            Item 8
            <span aria-label="Toggle item 8 submenu" class="gw-page-navigation__trigger gw-page-navigation__trigger--level-0" data-tabindex-collapsed="15" data-tabindex-expanded="0" role="button">
              <span class="sr-only">Toggle Item 8 Submenu</span>
            </span>
          </a>
          <div class="gw-page-navigation__next gw-page-navigation__next--level-0">
            <ul class="gw-page-navigation__list gw-page-navigation__list--level-1" id="sg-6c1e5d">
              <li class="gw-page-navigation__item gw-page-navigation__item--level-1">
                <a aria-label="Item 8.1" class="gw-page-navigation__link gw-page-navigation__link--level-1" data-tabindex-collapsed="15" href="#sample-d3ab20">
                  Item 8.1
                </a>
              </li>
              <li class="gw-page-navigation__item gw-page-navigation__item--level-1">
                <a aria-label="Item 8.2" class="gw-page-navigation__link gw-page-navigation__link--level-1" data-tabindex-collapsed="15" href="#sample-b59930">
                  Item 8.2
                </a>
              </li>
            </ul>
            <div class="gw-page-navigation__pitch">
              <div class="gw-page-navigation__pitch-visual">
                <img src="/assets/images/static/test-480x300.jpg" alt="">
              </div>
              <div class="gw-page-navigation__pitch-content">
                <p>A simplified unified approach in Teva is leading to more agile and affordable solutions for patients</p>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="gw-page-navigation__logo">
      <a class="gw-page-navigation__logo-link" href="#">
        <img src="/assets/images/logos/logo_teva.svg" alt="Teva">
      </a>
    </div>
  </nav>
</div>

Stylesheets #

The following stylesheet is required to display this component.

Download Page Navigation Stylesheet

The following additional stylesheet is used to display the example(s).

Download Button Stylesheet

JavaScript #

The following javascript is required to display this component.

Download Page Navigation JavaScript

Usage documentation #

Usage documentation can be found here.

Usage Documentation

Changelog #

Changelog

Fix

  02 Apr 2025 - fix(page-navigation): allow submenu trigger color override fix.
  28 Mar 2025 - fix(page-navigation): allow submenu trigger color override.
  01 Feb 2023 - [TVB-12585] - CTA button must restore sibbling state when a button too.
  25 Jan 2023 - [TVB-12585] - CTA button must restore sibbling state.
  Browser rounding issue. scaled 1px not always 1px.
  A11y outline issue button-element not receiving focus outline
  Misplacement TEVA logo when direction is RTL
  Accessibility: Moved aria-expanded one level up to the a-tag. (js)
  Accessibility: ESC key should closes the sub menus and return the focus to the parent menu item
  RTL support, losing focus when moving pointer to submenu item.
  Pulldown nav not closing.


Changed

  PBS support: Better control on __menu element.
  PBS support: Bigger Teva Logo
  Accessibility: Update outline width to 2.5px;
  play and pause icons, now both on 12x12 and 16x16


Added

  3 Jun 2024 - Added possibility to use secondary logo outside of product context
  30 Nov 2022 - Add CTA button to menu.
  04 Okt 2022 - Add .active support for collapsed navigation link
  28 Sept 2022 - Add .active support for collapsed navigation link
  PBS support
  Accessibility: Tabindex collapsed state when viewed at 200%;
  Accessibility: focus display in specific color #0D3360
  Accessibility: focus display
  RTL support
  Example of full 3 level navigation
  Initial draft