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-0e30a2">
<li class="gw-page-navigation__item gw-page-navigation__item--level-0">
<a aria-label="About Teva" class="gw-page-navigation__link gw-page-navigation__link--level-0 gw-page-navigation__link--next" data-tabindex-collapsed="15" href="#sample-55be52">
About Teva
<span aria-label="Toggle about teva 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 About Teva 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-e32c33">
<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" data-tabindex-collapsed="15" href="#sample-999272">
First submenu item
</a>
</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-c44383">
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-4d8b83">
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="News & Media" class="gw-page-navigation__link gw-page-navigation__link--level-0" data-tabindex-collapsed="15" href="#sample-007da7">
News & Media
</a>
</li>
<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" data-tabindex-collapsed="15" href="#sample-b70bed">
Our Products
</a>
</li>
<li class="gw-page-navigation__item gw-page-navigation__item--level-0">
<a aria-label="Our Responsibility" class="gw-page-navigation__link gw-page-navigation__link--level-0" data-tabindex-collapsed="15" href="#sample-e4ce17">
Our Responsibility
</a>
</li>
<li class="gw-page-navigation__item gw-page-navigation__item--level-0">
<a aria-label="Your Career" class="gw-page-navigation__link gw-page-navigation__link--level-0" data-tabindex-collapsed="15" href="#sample-ce435b">
Your Career
</a>
</li>
<li class="gw-page-navigation__item gw-page-navigation__item--level-0">
<a aria-label="Supporting Patients" class="gw-page-navigation__link gw-page-navigation__link--level-0" data-tabindex-collapsed="15" href="#sample-7342c3">
Supporting Patients
</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-03057d">
<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-9ecee1">
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-c7a5ec">
<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-6a5156">
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-66c134">
<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-e53e37">
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-b279a8">
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-a785a0">
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-dd6050">
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-d01e81">
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 & caregivers" class="gw-page-navigation__link gw-page-navigation__link--level-0" data-tabindex-collapsed="15" href="#sample-b1dd98">
Resources for patients & 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-a47494">
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-b111c6">
<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-170eaa">
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-deb7a9">
<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-01b8e5">
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-673da7">
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-6139b2">
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-c779e8">
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-48bbed">
<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-128922">
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-addc18">
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-b8bae7">
<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-dc0617">
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-28917a">
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-3111d9">
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-c88a89">
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-365eb3">
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-9072e4">
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-d4b3d2">
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-6e0b19">
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-d1308d">
<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-c9c6c3">
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-2b9906">
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-794358">
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-c53164">
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-14403e">
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-8c8760">
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-482baa">
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-37c6b9">
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-ac3892">
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-3177a0">
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-a00b2e">
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-bae42d">
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-a0021a">
<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-9bee53">
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-8a8b07">
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-279759">
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-bd9816">
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-8eca77">
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-5b88cc">
<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-5aa8b0">
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-6b2a98">
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-4cca86">
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-e0da28">
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-855d75">
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-573edc">
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-aa39a6">
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-e1d441">
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-d3be6a">
<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-2669d6">
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-45b041">
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.
The following additional stylesheet is used to display the example(s).
JavaScript #
The following javascript is required to display this component.
Usage documentation #
Usage documentation can be found here.
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