Navigation
Nav List
The Nav List is used for the Turquoise Health app’s primary navigation.
Use the attribute aria-current="page" on a link element to denote the current page and highlight it in the nav accordingly. Also, be sure to include the attribute role="list" on the list element to remove default list styling.
When the viewport is below 768px, the list will hide the text and only show the icons and center the list within the available space.
Example
A nav list with several items.
HTML
<ul role="list" class="pv-nav-list">
<li>
<a href="#">
<svg aria-hidden="true" class="pv-icon">
<use xlink:href="#dashboard"></use>
</svg>
<span>Dashboard</span>
</a>
</li>
<li>
<a href="#" aria-current="page">
<svg aria-hidden="true" class="pv-icon">
<use xlink:href="#rate-intel"></use>
</svg>
<span>Rate Sense</span>
</a>
</li>
<li>
<a href="#">
<svg aria-hidden="true" class="pv-icon">
<use xlink:href="#contracts"></use>
</svg>
<span>Clear Contracts</span>
</a>
</li>
</ul>Collapsed Sidebar
Use the data attribute data-collapsed to show the minimized view regardless of the viewport’s width. You can apply this data attribute to the nav list itself or its parent layout container.
HTML
<ul role="list" class="pv-nav-list" data-collapsed>
<li>
<a href="#">
<svg aria-hidden="true" class="pv-icon">
<use xlink:href="#dashboard"></use>
</svg>
<span>Dashboard</span>
</a>
</li>
<li>
<a href="#" aria-current="page">
<svg aria-hidden="true" class="pv-icon">
<use xlink:href="#rate-intel"></use>
</svg>
<span>Rate Sense</span>
</a>
</li>
<li>
<a href="#">
<svg aria-hidden="true" class="pv-icon">
<use xlink:href="#contracts"></use>
</svg>
<span>Clear Contracts</span>
</a>
</li>
</ul>Inverse Nav List
Use the inverse nav list on light colored backgrounds, such as the main content area.
Example
An inverse nav list.
HTML
<ul role="list" class="pv-nav-list pv-nav-list-inverse">
<li><a href="">California</a></li>
<li><a href="" aria-current="page">Illinois</a></li>
<li><a href="">Nebraska</a></li>
<li><a href="">Texas</a></li>
<li><a href="">Wyoming</a></li>
</li>
</ul>Sub-navigation
Use the details element within a nav list item to create a collapsible sub-navigation menu. Try to avoid nesting more than three levels deep.
Use the open attribute to have the sub-nav expanded by default.
The top level of a sub-nav section cannot link to a page. It can only be used to toggle the list beneath it.
Example
A nav list with sub-navigation, expanded by default.
-
My Contracts
HTML
<ul role="list" class="pv-nav-list pv-nav-list-inverse">
<li>
<details open>
<summary>My Contracts</summary>
<ul role="list" class="pv-nav-list pv-nav-list-inverse">
<li><a href="">California</a></li>
<li><a href="" aria-current="page">Illinois</a></li>
<li><a href="">Nebraska</a></li>
<li><a href="">Texas</a></li>
<li><a href="">Wyoming</a></li>
</ul>
</details>
</li>
</ul>Nav Container
The nav container is used in conjunction with the nav list to provide specific padding and scroll behavior in the sidebar, within the constraints of a layout. When the height of the content of a nav container exceeds the height of the viewport, it will scroll independently from the content. The scrollbar has also been customized to be more consistent across browsers.
Example
A nav container with a nav-list inside, with the height of its parent container constrained.
HTML
<div class="pv-nav-container">
...
</div>Org Switch
The org switch is a button found in the navigation that displays a popover menu when clicked on.
Example
An org switch.
HTML
<button class="pv-org-switch">
<div class="pv-company-xl"><img src="/assets/images/cherry-creek.png" alt=""></div>
<div>
<p class="pv-text-title-sm">Cherry Creek</p>
<p class="pv-text-title-xs pv-text-subdued">Phoenix, AZ</p>
</div>
<svg class="pv-icon-16" aria-hidden="true" tabindex="-1">
<use xlink:href="#chevron-selector"></use>
</svg>
</button>