Pop Navigation

v0.0.0

Using modifiers:

.vi-pop-navigation--editable
.vi-pop-navigation--sm-btns

Use .vi-pop-navigation--sm-btns in combination with small solid buttons

<!-- Pop Navigation (mods: --editable, --sm-btns) -->
<div class="vi-pop-navigation vi-pop-navigation--editable vi-pop-navigation--sm-btns" data-pop-navigation-active="true">
  <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>
        <button class="vi-btn-outline-icon vi-btn-outline-icon--accent-2 vi-btn-outline-icon--nested vi-btn vi-btn-outline-icon--sm" type="button">
          <!-- Icon edit  -->
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="edit"><g fill-rule="evenodd"><polygon points="2.5 10.5 3 10 6 13 5.5 13.5"></polygon><polygon points="10 3 10.5 2.5 13.5 5.5 13 6"></polygon><path fill-rule="nonzero" d="M11.5,0.5 L15.5,4.5 L5.5,14.5 L2.27373675e-13,16 L1.5,10.5 L11.5,0.5 Z M11.5,1.915 L2.394,11.02 L1.424,14.575 L4.979,13.605 L14.085,4.5 L11.5,1.915 Z"></path></g></svg>
        </button>
      </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--sm 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--sm 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--sm 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--sm vi-btn"><span class="vi-pop-navigation__label">Respiratory</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--sm vi-btn"><span class="vi-pop-navigation__label">Respiratory</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--sm vi-btn"><span class="vi-pop-navigation__label">Respiratory</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--sm vi-btn"><span class="vi-pop-navigation__label">Respiratory</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--sm vi-btn"><span class="vi-pop-navigation__label">Respiratory</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--sm vi-btn"><span class="vi-pop-navigation__label">Respiratory</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--sm vi-btn"><span class="vi-pop-navigation__label">Respiratory</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--sm vi-btn"><span class="vi-pop-navigation__label">Respiratory</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--sm vi-btn"><span class="vi-pop-navigation__label">Respiratory</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--sm vi-btn"><span class="vi-pop-navigation__label">Respiratory</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--sm vi-btn"><span class="vi-pop-navigation__label">Respiratory</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--sm vi-btn"><span class="vi-pop-navigation__label">Respiratory</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--sm vi-btn"><span class="vi-pop-navigation__label">Respiratory</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--sm vi-btn"><span class="vi-pop-navigation__label">Respiratory</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--sm vi-btn"><span class="vi-pop-navigation__label">Respiratory</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--sm vi-btn"><span class="vi-pop-navigation__label">Respiratory</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--sm vi-btn"><span class="vi-pop-navigation__label">Respiratory</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--sm vi-btn"><span class="vi-pop-navigation__label">Respiratory</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--sm vi-btn"><span class="vi-pop-navigation__label">Respiratory</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--sm vi-btn"><span class="vi-pop-navigation__label">Respiratory</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--sm vi-btn"><span class="vi-pop-navigation__label">Respiratory</span></a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</div>
<hr>

Stylesheets #

The following stylesheets are required to display this component.

The following additional stylesheet is used to display the example(s).

Download Icon Stylesheet

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