Open Close
Teva VIsion
Font Face
Teva Sans Latin
Drafts & Templates
PBS Templates
Primitives & components context
Teva Global
Primitives & components: Teva Global

Drill Down

v0.0.0

This Drill Down has very specific behaviour. It was designed to work together with the Hero Navigation strip.

The first level of this Drill Down dictates the height of the element and is displayed in the 'first column'. Deeper levels are displayed in a 'second column'. When the height of lower levels exceeds the available space, a Scrollpane is displayed.

On smaller devices, all levels are displayed in a single column.

Park cred goth taxidermy tattooed.

<!-- Drill Down (mods: --hero-navigation) -->
<div class="vi-drill-down vi-drill-down--hero-navigation">
  <div class="vi-drill-down__wrap vi-drill-down__wrap--root vi-drill-down__wrap--hero-navigation">
    <div class="vi-drill-down__level vi-drill-down__level--root vi-drill-down__level--hero-navigation">
      <h4 class="vi-drill-down__title vi-drill-down__title--root vi-drill-down__title--hero-navigation">Park cred goth taxidermy tattooed.</h4>
      <div class="vi-drill-down__content vi-drill-down__content--hero-navigation">
        <ul class="vi-drill-down__list vi-drill-down__list--level-0 vi-drill-down__list--hero-navigation" id="sg-a76c6c">
          <li class="vi-drill-down__item vi-drill-down__item--level-0 vi-drill-down__item--hero-navigation">
            <button class="vi-drill-down__trigger vi-drill-down__trigger--level-0 vi-drill-down__trigger--hero-navigation vi-drill-down__trigger--next">
              <span class="vi-drill-down__trigger-title vi-drill-down__trigger-title--hero-navigation">Menu item 1</span>
            </button>
            <div class="vi-drill-down__next vi-drill-down__next--level-0 vi-drill-down__next--hero-navigation">
              <ul class="vi-drill-down__list vi-drill-down__list--level-1 vi-drill-down__list--hero-navigation" id="sg-a76c6c">
                <li class="vi-drill-down__item vi-drill-down__item--level-1 vi-drill-down__item--hero-navigation">
                  <a class="vi-drill-down__trigger vi-drill-down__trigger--level-1 vi-drill-down__trigger--hero-navigation" href="#sample-e9c38c">
                    <span class="vi-drill-down__trigger-title vi-drill-down__trigger-title--hero-navigation">Menu item 1.1</span>
                    <span class="vi-drill-down__trigger-subtitle vi-drill-down__trigger-subtitle--hero-navigation">Some optional description</span>
                  </a>
                </li>
                <li class="vi-drill-down__item vi-drill-down__item--level-1 vi-drill-down__item--hero-navigation">
                  <a class="vi-drill-down__trigger vi-drill-down__trigger--level-1 vi-drill-down__trigger--hero-navigation" href="#sample-38032a">
                    <span class="vi-drill-down__trigger-title vi-drill-down__trigger-title--hero-navigation">Menu item 1.2</span>
                    <span class="vi-drill-down__trigger-subtitle vi-drill-down__trigger-subtitle--hero-navigation">Aliquam dictum velit ac aliquam accumsan.</span>
                  </a>
                </li>
                <li class="vi-drill-down__item vi-drill-down__item--level-1 vi-drill-down__item--hero-navigation">
                  <a class="vi-drill-down__trigger vi-drill-down__trigger--level-1 vi-drill-down__trigger--hero-navigation" href="#sample-36b50a">
                    <span class="vi-drill-down__trigger-title vi-drill-down__trigger-title--hero-navigation">Menu item 1.3</span>
                    <span class="vi-drill-down__trigger-subtitle vi-drill-down__trigger-subtitle--hero-navigation">Phasellus luctus.</span>
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li class="vi-drill-down__item vi-drill-down__item--level-0 vi-drill-down__item--hero-navigation">
            <button class="vi-drill-down__trigger vi-drill-down__trigger--level-0 vi-drill-down__trigger--hero-navigation vi-drill-down__trigger--next">
              <span class="vi-drill-down__trigger-title vi-drill-down__trigger-title--hero-navigation">Menu item 2</span>
            </button>
            <div class="vi-drill-down__next vi-drill-down__next--level-0 vi-drill-down__next--hero-navigation">
              <ul class="vi-drill-down__list vi-drill-down__list--level-1 vi-drill-down__list--hero-navigation" id="sample-36b50a">
                <li class="vi-drill-down__item vi-drill-down__item--level-1 vi-drill-down__item--hero-navigation">
                  <a class="vi-drill-down__trigger vi-drill-down__trigger--level-1 vi-drill-down__trigger--hero-navigation" href="#sample-171c82">
                    <span class="vi-drill-down__trigger-title vi-drill-down__trigger-title--hero-navigation">Menu item 2.1</span>
                  </a>
                </li>
                <li class="vi-drill-down__item vi-drill-down__item--level-1 vi-drill-down__item--hero-navigation">
                  <button class="vi-drill-down__trigger vi-drill-down__trigger--level-1 vi-drill-down__trigger--hero-navigation vi-drill-down__trigger--next">
                    <span class="vi-drill-down__trigger-title vi-drill-down__trigger-title--hero-navigation">Menu item 2.2</span>
                  </button>
                  <div class="vi-drill-down__next vi-drill-down__next--level-1 vi-drill-down__next--hero-navigation">
                    <ul class="vi-drill-down__list vi-drill-down__list--level-2 vi-drill-down__list--hero-navigation" id="sample-171c82">
                      <li class="vi-drill-down__item vi-drill-down__item--level-2 vi-drill-down__item--hero-navigation">
                        <a class="vi-drill-down__trigger vi-drill-down__trigger--level-2 vi-drill-down__trigger--hero-navigation" href="#sample-c0bde6">
                          <span class="vi-drill-down__trigger-title vi-drill-down__trigger-title--hero-navigation">Menu item 2.2.1</span>
                        </a>
                      </li>
                      <li class="vi-drill-down__item vi-drill-down__item--level-2 vi-drill-down__item--hero-navigation">
                        <a class="vi-drill-down__trigger vi-drill-down__trigger--level-2 vi-drill-down__trigger--hero-navigation" href="#sample-913163">
                          <span class="vi-drill-down__trigger-title vi-drill-down__trigger-title--hero-navigation">Menu item 2.2.2</span>
                        </a>
                      </li>
                    </ul>
                  </div>
                </li>
                <li class="vi-drill-down__item vi-drill-down__item--level-1 vi-drill-down__item--hero-navigation">
                  <a class="vi-drill-down__trigger vi-drill-down__trigger--level-1 vi-drill-down__trigger--hero-navigation" href="#sample-3ecbc7">
                    <span class="vi-drill-down__trigger-title vi-drill-down__trigger-title--hero-navigation">Menu item 2.3</span>
                  </a>
                </li>
                <li class="vi-drill-down__item vi-drill-down__item--level-1 vi-drill-down__item--hero-navigation">
                  <a class="vi-drill-down__trigger vi-drill-down__trigger--level-1 vi-drill-down__trigger--hero-navigation" href="#sample-4e823c">
                    <span class="vi-drill-down__trigger-title vi-drill-down__trigger-title--hero-navigation">Menu item 2.4</span>
                    <span class="vi-drill-down__trigger-subtitle vi-drill-down__trigger-subtitle--hero-navigation">Some optional description</span>
                  </a>
                </li>
                <li class="vi-drill-down__item vi-drill-down__item--level-1 vi-drill-down__item--hero-navigation">
                  <a class="vi-drill-down__trigger vi-drill-down__trigger--level-1 vi-drill-down__trigger--hero-navigation" href="#sample-86354b">
                    <span class="vi-drill-down__trigger-title vi-drill-down__trigger-title--hero-navigation">Menu item 2.5</span>
                  </a>
                </li>
                <li class="vi-drill-down__item vi-drill-down__item--level-1 vi-drill-down__item--hero-navigation">
                  <a class="vi-drill-down__trigger vi-drill-down__trigger--level-1 vi-drill-down__trigger--hero-navigation" href="#sample-49624c">
                    <span class="vi-drill-down__trigger-title vi-drill-down__trigger-title--hero-navigation">Menu item 2.6</span>
                  </a>
                </li>
                <li class="vi-drill-down__item vi-drill-down__item--level-1 vi-drill-down__item--hero-navigation">
                  <a class="vi-drill-down__trigger vi-drill-down__trigger--level-1 vi-drill-down__trigger--hero-navigation" href="#sample-651078">
                    <span class="vi-drill-down__trigger-title vi-drill-down__trigger-title--hero-navigation">Menu item 2.7</span>
                  </a>
                </li>
                <li class="vi-drill-down__item vi-drill-down__item--level-1 vi-drill-down__item--hero-navigation">
                  <button class="vi-drill-down__trigger vi-drill-down__trigger--level-1 vi-drill-down__trigger--hero-navigation vi-drill-down__trigger--next">
                    <span class="vi-drill-down__trigger-title vi-drill-down__trigger-title--hero-navigation">Menu item 2.8</span>
                  </button>
                  <div class="vi-drill-down__next vi-drill-down__next--level-1 vi-drill-down__next--hero-navigation">
                    <ul class="vi-drill-down__list vi-drill-down__list--level-2 vi-drill-down__list--hero-navigation" id="sample-651078">
                      <li class="vi-drill-down__item vi-drill-down__item--level-2 vi-drill-down__item--hero-navigation">
                        <a class="vi-drill-down__trigger vi-drill-down__trigger--level-2 vi-drill-down__trigger--hero-navigation" href="#sample-039343">
                          <span class="vi-drill-down__trigger-title vi-drill-down__trigger-title--hero-navigation">Menu item 2.8.1</span>
                        </a>
                      </li>
                      <li class="vi-drill-down__item vi-drill-down__item--level-2 vi-drill-down__item--hero-navigation">
                        <a class="vi-drill-down__trigger vi-drill-down__trigger--level-2 vi-drill-down__trigger--hero-navigation" href="#sample-da199d">
                          <span class="vi-drill-down__trigger-title vi-drill-down__trigger-title--hero-navigation">Menu item 2.8.2 With Long title nec orci nec ipsum consequat ultrices</span>
                        </a>
                      </li>
                      <li class="vi-drill-down__item vi-drill-down__item--level-2 vi-drill-down__item--hero-navigation">
                        <a class="vi-drill-down__trigger vi-drill-down__trigger--level-2 vi-drill-down__trigger--hero-navigation" href="#sample-893015">
                          <span class="vi-drill-down__trigger-title vi-drill-down__trigger-title--hero-navigation">Menu item 2.8.3</span>
                        </a>
                      </li>
                      <li class="vi-drill-down__item vi-drill-down__item--level-2 vi-drill-down__item--hero-navigation">
                        <a class="vi-drill-down__trigger vi-drill-down__trigger--level-2 vi-drill-down__trigger--hero-navigation" href="#sample-a686a3">
                          <span class="vi-drill-down__trigger-title vi-drill-down__trigger-title--hero-navigation">Menu item 2.8.4</span>
                        </a>
                      </li>
                      <li class="vi-drill-down__item vi-drill-down__item--level-2 vi-drill-down__item--hero-navigation">
                        <a class="vi-drill-down__trigger vi-drill-down__trigger--level-2 vi-drill-down__trigger--hero-navigation" href="#sample-3e4659">
                          <span class="vi-drill-down__trigger-title vi-drill-down__trigger-title--hero-navigation">Menu item 2.8.5</span>
                        </a>
                      </li>
                    </ul>
                  </div>
                </li>
                <li class="vi-drill-down__item vi-drill-down__item--level-1 vi-drill-down__item--hero-navigation">
                  <a class="vi-drill-down__trigger vi-drill-down__trigger--level-1 vi-drill-down__trigger--hero-navigation" href="#sample-2ae0d9">
                    <span class="vi-drill-down__trigger-title vi-drill-down__trigger-title--hero-navigation">Menu item 2.9</span>
                  </a>
                </li>
                <li class="vi-drill-down__item vi-drill-down__item--level-1 vi-drill-down__item--hero-navigation">
                  <a class="vi-drill-down__trigger vi-drill-down__trigger--level-1 vi-drill-down__trigger--hero-navigation" href="#sample-3377d4">
                    <span class="vi-drill-down__trigger-title vi-drill-down__trigger-title--hero-navigation">Menu item 2.10</span>
                  </a>
                </li>
                <li class="vi-drill-down__item vi-drill-down__item--level-1 vi-drill-down__item--hero-navigation">
                  <a class="vi-drill-down__trigger vi-drill-down__trigger--level-1 vi-drill-down__trigger--hero-navigation" href="#sample-d83a1a">
                    <span class="vi-drill-down__trigger-title vi-drill-down__trigger-title--hero-navigation">Menu item 2.11</span>
                  </a>
                </li>
                <li class="vi-drill-down__item vi-drill-down__item--level-1 vi-drill-down__item--hero-navigation">
                  <a class="vi-drill-down__trigger vi-drill-down__trigger--level-1 vi-drill-down__trigger--hero-navigation" href="#sample-a84974">
                    <span class="vi-drill-down__trigger-title vi-drill-down__trigger-title--hero-navigation">Menu item 2.12</span>
                  </a>
                </li>
                <li class="vi-drill-down__item vi-drill-down__item--level-1 vi-drill-down__item--hero-navigation">
                  <a class="vi-drill-down__trigger vi-drill-down__trigger--level-1 vi-drill-down__trigger--hero-navigation" href="#sample-a43e56">
                    <span class="vi-drill-down__trigger-title vi-drill-down__trigger-title--hero-navigation">Menu item 2.13</span>
                  </a>
                </li>
                <li class="vi-drill-down__item vi-drill-down__item--level-1 vi-drill-down__item--hero-navigation">
                  <a class="vi-drill-down__trigger vi-drill-down__trigger--level-1 vi-drill-down__trigger--hero-navigation" href="#sample-9d6ee2">
                    <span class="vi-drill-down__trigger-title vi-drill-down__trigger-title--hero-navigation">Menu item 2.14</span>
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li class="vi-drill-down__item vi-drill-down__item--level-0 vi-drill-down__item--hero-navigation">
            <button class="vi-drill-down__trigger vi-drill-down__trigger--level-0 vi-drill-down__trigger--hero-navigation vi-drill-down__trigger--next">
              <span class="vi-drill-down__trigger-title vi-drill-down__trigger-title--hero-navigation">Menu item 3</span>
            </button>
            <div class="vi-drill-down__next vi-drill-down__next--level-0 vi-drill-down__next--hero-navigation">
              <ul class="vi-drill-down__list vi-drill-down__list--level-1 vi-drill-down__list--hero-navigation" id="sample-9d6ee2">
                <li class="vi-drill-down__item vi-drill-down__item--level-1 vi-drill-down__item--hero-navigation">
                  <a class="vi-drill-down__trigger vi-drill-down__trigger--level-1 vi-drill-down__trigger--hero-navigation" href="#sample-8ae360">
                    <span class="vi-drill-down__trigger-title vi-drill-down__trigger-title--hero-navigation">Menu item 3.1</span>
                  </a>
                </li>
                <li class="vi-drill-down__item vi-drill-down__item--level-1 vi-drill-down__item--hero-navigation">
                  <a class="vi-drill-down__trigger vi-drill-down__trigger--level-1 vi-drill-down__trigger--hero-navigation" href="#sample-b0a2b5">
                    <span class="vi-drill-down__trigger-title vi-drill-down__trigger-title--hero-navigation">Menu item 3.2</span>
                  </a>
                </li>
                <li class="vi-drill-down__item vi-drill-down__item--level-1 vi-drill-down__item--hero-navigation">
                  <a class="vi-drill-down__trigger vi-drill-down__trigger--level-1 vi-drill-down__trigger--hero-navigation" href="#sample-394546">
                    <span class="vi-drill-down__trigger-title vi-drill-down__trigger-title--hero-navigation">Menu item 3.3</span>
                  </a>
                </li>
                <li class="vi-drill-down__item vi-drill-down__item--level-1 vi-drill-down__item--hero-navigation">
                  <a class="vi-drill-down__trigger vi-drill-down__trigger--level-1 vi-drill-down__trigger--hero-navigation" href="#sample-d1b2b2">
                    <span class="vi-drill-down__trigger-title vi-drill-down__trigger-title--hero-navigation">Menu item 3.4</span>
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li class="vi-drill-down__item vi-drill-down__item--level-0 vi-drill-down__item--hero-navigation">
            <button class="vi-drill-down__trigger vi-drill-down__trigger--level-0 vi-drill-down__trigger--hero-navigation vi-drill-down__trigger--next">
              <span class="vi-drill-down__trigger-title vi-drill-down__trigger-title--hero-navigation">Menu item 4</span>
            </button>
            <div class="vi-drill-down__next vi-drill-down__next--level-0 vi-drill-down__next--hero-navigation">
              <ul class="vi-drill-down__list vi-drill-down__list--level-1 vi-drill-down__list--hero-navigation" id="sample-d1b2b2">
                <li class="vi-drill-down__item vi-drill-down__item--level-1 vi-drill-down__item--hero-navigation">
                  <a class="vi-drill-down__trigger vi-drill-down__trigger--level-1 vi-drill-down__trigger--hero-navigation" href="#sample-45942a">
                    <span class="vi-drill-down__trigger-title vi-drill-down__trigger-title--hero-navigation">Menu item 4.1</span>
                  </a>
                </li>
                <li class="vi-drill-down__item vi-drill-down__item--level-1 vi-drill-down__item--hero-navigation">
                  <a class="vi-drill-down__trigger vi-drill-down__trigger--level-1 vi-drill-down__trigger--hero-navigation" href="#sample-8c86ad">
                    <span class="vi-drill-down__trigger-title vi-drill-down__trigger-title--hero-navigation">Menu item 4.2 With Long title nec orci nec ipsum consequat ultrices</span>
                  </a>
                </li>
                <li class="vi-drill-down__item vi-drill-down__item--level-1 vi-drill-down__item--hero-navigation">
                  <a class="vi-drill-down__trigger vi-drill-down__trigger--level-1 vi-drill-down__trigger--hero-navigation" href="#sample-111be5">
                    <span class="vi-drill-down__trigger-title vi-drill-down__trigger-title--hero-navigation">Menu item 4.3</span>
                  </a>
                </li>
                <li class="vi-drill-down__item vi-drill-down__item--level-1 vi-drill-down__item--hero-navigation">
                  <a class="vi-drill-down__trigger vi-drill-down__trigger--level-1 vi-drill-down__trigger--hero-navigation" href="#sample-9d038b">
                    <span class="vi-drill-down__trigger-title vi-drill-down__trigger-title--hero-navigation">Menu item 4.4</span>
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li class="vi-drill-down__item vi-drill-down__item--level-0 vi-drill-down__item--hero-navigation">
            <a class="vi-drill-down__trigger vi-drill-down__trigger--level-0 vi-drill-down__trigger--hero-navigation" href="#sample-279026">
              <span class="vi-drill-down__trigger-title vi-drill-down__trigger-title--hero-navigation">Menu item 5</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Stylesheets #

The following stylesheets are required to display this component.

JavaScript #

The following javascripts are required to display this component.

Usage documentation #

Usage documentation can be found here.

Changelog #

Changelog

Fix

  • Fix the A11y outline layering.

Changed

  • Add PBS support
  • Markup: use buttons to trigger next level. (elements with class .vi-drill-down__trigger--next)
  • Accessibility: Keyboard accessible.

Added

  • Initial draft