Pop Navigation

v0.0.0

The Pop Navigation allows for quick access to areas of the website.

On mobile it shows the buttons horizontally. When the total width exceeds the available space horizontally, swipe can be used to reach the buttons that are outside the viewport.

On desktop, a fixed trigger is available on the edge of the viewport. When clicked a navigation is displayed in a Popup.

Use the Pop Navigation to quickly access the theraputic areas on life effects pages.

Set the data-pop-navigation-active attribute to true to enable navigation when the page loads. Alternatively, you can set it to a numeric value (in milliseconds) to specify a delay before enabling navigation on desktop.

<!-- Pop Navigation (mods: ) -->
<div class="vi-pop-navigation" data-pop-navigation-active="3000">
  <button aria-expanded="true" class="vi-pop-navigation__trigger">
    <span class="sr-only">Toggle Navigation</span>
  </button>
  <nav class="vi-pop-navigation__nav">
    <div class="vi-pop-navigation__main">
      <div class="vi-pop-navigation__head">
        <h6 class="vi-pop-navigation__title">View patient stories</h6>
      </div>
      <div class="vi-pop-navigation__body">
        <ul class="vi-pop-navigation__list">
          <li class="vi-pop-navigation__item">
            <!-- Button type: solid  -->
            <a href="#" class="d-lg-flex align-items-center justify-content-between vi-btn-solid vi-btn-solid--accent-2 vi-btn-solid-- vi-btn"><span class="vi-pop-navigation__label">Asthma</span></a>
          </li>
          <li class="vi-pop-navigation__item">
            <!-- Button type: solid  -->
            <a href="#" class="d-lg-flex align-items-center justify-content-between vi-btn-solid vi-btn-solid--accent-2 vi-btn-solid-- vi-btn"><span class="vi-pop-navigation__label">Pain</span></a>
          </li>
          <li class="vi-pop-navigation__item">
            <!-- Button type: solid  -->
            <a href="#" class="d-lg-flex align-items-center justify-content-between vi-btn-solid vi-btn-solid--accent-2 vi-btn-solid-- vi-btn"><span class="vi-pop-navigation__label">Oncology</span></a>
          </li>
          <li class="vi-pop-navigation__item">
            <!-- Button type: solid  -->
            <a href="#" class="d-lg-flex align-items-center justify-content-between vi-btn-solid vi-btn-solid--accent-2 vi-btn-solid-- vi-btn"><span class="vi-pop-navigation__label">Respiratory</span></a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</div>
<hr>

Modifiers #

Please see editable and editable-small for modifiers.

Stylesheets #

The following stylesheets are required to display this component.

JavaScript #

The following javascript is required to display this component.

Download Pop Navigation JavaScript

Usage documentation #

Usage documentation can be found here.

Usage Documentation

Changelog #

Changelog

Fix

  27 Feb 2025 - fix(pop-navigation): kill the timeout after user interaction.
  19 Feb 2025 - fix(pop-navigation): data-pop-navigation-active=”false” should work as expected
  28 Apr 2023 - Fix peaking edges on trigger.
  16 Feb 2023 - Moved padding to prevent cut off outlines, Change image color breakpoint.
  14 Feb 2023 - Regression, arrow missing.
  Positioning of key activated popup.
  Incorrect positioning when active on page load.
  Popnavigation renders under main navigation when viewport has small height.


Changed

  08 Feb 2023 - Make it scrollable when required by viewport height.
  Accessibility: aria-expanded state added to button.
  Better key control.


Added

  22 Jan 2025 - feat(pop-navigation): allow numeric delay for enabling navigation on page load
  08 Feb 2023 - Modifiers data-pop-navigation--sm-btns and data-pop-navigation--editable
  Use data attribute data-pop-navigation-active to allow pop nav on start.
  Initial draft