Pit Viper

v2.15.0

Pit Viper

v2.15.0
v1 / v2

  • Home
  • Components
  • Navigation

Navigation

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>

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.

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>

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>

Table of Contents

Use table of contents to help users navigate long pieces of content and jump to specific sections. Set the aria-current attribute on a list item to highlight the current section.

Example
A table of contents with a heading.

Rylaze
HTML 
<div class="pv-flex">
  <svg aria-hidden="true" class="pv-icon-16">
    <use xlink:href="#document"></use>
  </svg>
  <span class="pv-text-title-lg">Rylaze</span>
</div>
<ul class="pv-toc" role="list">
  <li aria-current><a href="">Report Details</a></li>
  <li><a href="">Payer Mix</a></li>
  <li><a href="">Drug Details</a></li>
  <li><a href="">Cost Basis</a></li>
  <li><a href="">Reimbursement Basis</a></li>
  <li><a href="">Final Report</a></li>
</ul>