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-8b2aea">
<li class="gw-page-navigation__item gw-page-navigation__item--level-0">
<a aria-label="Our Company" class="gw-page-navigation__link gw-page-navigation__link--level-0 gw-page-navigation__link--next" data-tabindex-collapsed="15" href="#sample-5cdaab">
Our Company
<span aria-label="Toggle our company 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 Company 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-843ec6">
<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-b25175">
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-592742">
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-4841d6">
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="Our Impact" class="gw-page-navigation__link gw-page-navigation__link--level-0" data-tabindex-collapsed="15" href="#sample-e328a0">
Our Impact
</a>
</li>
<li class="gw-page-navigation__item gw-page-navigation__item--level-0">
<a aria-label="Product Focus" class="gw-page-navigation__link gw-page-navigation__link--level-0" data-tabindex-collapsed="15" href="#sample-593e9b">
Product Focus
</a>
</li>
<li class="gw-page-navigation__item gw-page-navigation__item--level-0">
<a aria-label="Careers" class="gw-page-navigation__link gw-page-navigation__link--level-0" data-tabindex-collapsed="15" href="#sample-e0ca67">
Careers
</a>
</li>
<li class="gw-page-navigation__item gw-page-navigation__item--level-0">
<a aria-label="Contact" class="gw-page-navigation__link gw-page-navigation__link--level-0" data-tabindex-collapsed="15" href="#sample-5a4369">
Contact
</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-7987e4">
<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-a7b50e">
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-b262a3">
<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-a9d70d">
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-0ac153">
<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-109b03">
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-c2a148">
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-78e894">
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-4901d8">
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-c65cd5">
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-3a93c9">
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-bbd4ec">
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-b753b5">
<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-73d712">
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-157398">
<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-db8e85">
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-c6a113">
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-0d51cc">
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-a3199c">
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-6598d4">
<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-4e8ced">
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-bbd1b7">
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-cc5e7e">
<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-36eb7d">
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-b142a3">
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-96a736">
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-16eeb7">
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-272374">
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-9a8b24">
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-189775">
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-521d8a">
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-62307a">
<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-c099ae">
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-7c232a">
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-ba9d31">
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-bb0288">
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-9e8ede">
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-9ba207">
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-37c0bd">
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-0d38e3">
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-17cc79">
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-d9d8cc">
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-457ecd">
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-14361a">
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-34e754">
<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-819a28">
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-129bcc">
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-319476">
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-75a06e">
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-624d59">
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-9b6a01">
<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-be4462">
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-b1c925">
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-4144a8">
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-769c84">
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-4814d6">
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-e72a61">
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-47e225">
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-918313">
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-43266d">
<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-797ed9">
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-5d300a">
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