Drilldown

‹ Back

Basic usage

Drilldown can either be attached to a div or nav element, as long as it has a child ul, or directly on to a ul.

Here is an example of using it as a wrapper on a list:

<nav data-drilldown aria-label="Global Navigation">
  <ul>
    <li>
      <a href="#">Item 1</a>
      <ul>
        <li>
          <a href="#">Item 1A</a>
          <ul>
            <li><a href="#item-1Aa">Item 1Aa</a></li>
            <li><a href="#item-1Ba">Item 1Ba</a></li>
            <li><a href="#item-1Ca">Item 1Ca</a></li>
            <li><a href="#item-1Da">Item 1Da</a></li>
            <li><a href="#item-1Ea">Item 1Ea</a></li>
          </ul>
        </li>
        <li><a href="#item-1B">Item 1B</a></li>
        <li><a href="#item-1C">Item 1C</a></li>
        <li><a href="#item-1D">Item 1D</a></li>
        <li><a href="#item-1E">Item 1E</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Item 2</a>
      <ul>
        <li><a href="#item-2A">Item 2A</a></li>
        <li><a href="#item-2B">Item 2B</a></li>
        <li><a href="#item-2C">Item 2C</a></li>
        <li><a href="#item-2D">Item 2D</a></li>
        <li><a href="#item-2E">Item 2E</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Item 3</a>
      <ul>
        <li><a href="#item-3A">Item 3A</a></li>
        <li><a href="#item-3B">Item 3B</a></li>
        <li><a href="#item-3C">Item 3C</a></li>
        <li><a href="#item-3D">Item 3D</a></li>
        <li><a href="#item-3E">Item 3E</a></li>
      </ul>
    </li>
    <li><a href="#item-4"> Item 4</a></li>
  </ul>
</nav>

Here is an example of using it directly on a ul:

<ul data-drilldown>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a>
    <ul>
      <li><a href="#">Item 2.1</a></li>
      <li><a href="#">Item 2.2</a></li>
      <li><a href="#">Item 2.3</a></li>
      <li><a href="#">Item 2.4</a></li>
      <li><a href="#">Item 2.5</a></li>
    </ul>
  </li>
</ul>

Descriptions and titles

You can inject descriptions using data-description attribute on the parent links. Here item 2 has a description but item 1 does not:

<ul data-drilldown>
  <li><a href="#">Item 1</a>
    <ul>
      <li><a href="#">Item 1.1</a></li>
      <li><a href="#">Item 1.2</a></li>
      <li><a href="#">Item 1.3</a></li>
    </ul>
  </li>
  <li><a href="#" data-description="This is Item 2's description">Item 2</a>
    <ul>
      <li><a href="#">Item 2.1</a></li>
      <li><a href="#">Item 2.2</a></li>
      <li><a href="#">Item 2.3</a></li>
      <li><a href="#">Item 2.4</a></li>
      <li><a href="#">Item 2.5</a></li>
    </ul>
  </li>
</ul>

You can add the title of the parent link on the nested panes by adding data-drilldown-titles to your container:

<ul data-drilldown data-drilldown-titles>
  <li><a href="#">Item 1</a>
    <ul>
      <li><a href="#">Item 1.1</a></li>
      <li><a href="#">Item 1.2</a></li>
      <li><a href="#">Item 1.3</a></li>
    </ul>
  </li>
  <li><a href="#" data-description="This is Item 2's description">Item 2</a>
    <ul>
      <li><a href="#">Item 2.1</a></li>
      <li><a href="#">Item 2.2</a></li>
      <li><a href="#">Item 2.3</a></li>
      <li><a href="#">Item 2.4</a></li>
      <li><a href="#">Item 2.5</a></li>
    </ul>
  </li>
</ul>

Overview links

You can add overview links that link to the parent pane link by adding data-drilldown-overviews:

<ul data-drilldown data-drilldown-titles data-drilldown-overviews>
  <li><a href="#">Item 1</a>
    <ul>
      <li><a href="#">Item 1.1</a></li>
      <li><a href="#">Item 1.2</a></li>
      <li><a href="#">Item 1.3</a></li>
    </ul>
  </li>
  <li><a href="#" data-description="This is Item 2's description">Item 2</a>
    <ul>
      <li><a href="#">Item 2.1</a></li>
      <li><a href="#">Item 2.2</a></li>
      <li><a href="#">Item 2.3</a></li>
      <li><a href="#">Item 2.4</a></li>
      <li><a href="#">Item 2.5</a></li>
    </ul>
  </li>
</ul>

If you use data-drilldown-overviews and there is no title or description you get a navigation item for an overview instead:

<ul data-drilldown data-drilldown-overviews>
  <li><a href="#">Item 1</a>
    <ul>
      <li><a href="#">Item 1.1</a></li>
      <li><a href="#">Item 1.2</a></li>
      <li><a href="#">Item 1.3</a></li>
    </ul>
  </li>
  <li><a href="#">Item 2</a>
    <ul>
      <li><a href="#">Item 2.1</a></li>
      <li><a href="#">Item 2.2</a></li>
      <li><a href="#">Item 2.3</a></li>
      <li><a href="#">Item 2.4</a></li>
      <li><a href="#">Item 2.5</a></li>
    </ul>
  </li>
</ul>

Split link and arrow

Split the drilldown anchor and main link as seperate elements with data-drilldown-split.

<ul data-drilldown data-drilldown-split>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a>
    <ul>
      <li><a href="#">Item 2.1</a></li>
      <li><a href="#">Item 2.2</a></li>
      <li><a href="#">Item 2.3</a></li>
      <li><a href="#">Item 2.4</a></li>
      <li><a href="#">Item 2.5</a></li>
    </ul>
  </li>
</ul>

Deeplinking

Deeplinking is supported with simple-navigation by default. You can change the Drilldown.selectors.selectedListItem variable to your selected class of choice to implement outside of simple-navigation.

<ul data-drilldown data-drilldown-overviews>
  <li><a href="#">Item 1</a></li>
  <li class="selected"><a href="#">Item 2</a>
    <ul>
      <li><a href="#">Item 2.1</a></li>
      <li><a href="#">Item 2.2</a></li>
      <li class="selected simple-navigation-active-leaf"><a href="#" class="selected">Item 2.3</a></li>
      <li><a href="#">Item 2.4</a></li>
      <li><a href="#">Item 2.5</a></li>
    </ul>
  </li>
</ul>

Merged Drilldowns

Drilldowns are typically made up of a single ul element, but if you have multiple lists you want to merge in to a single dropdown (eg. multiple simple-navigation lists), you can use drilldown-merge attribute to merge all lists in a div and turn it in to a single drilldown.

This is convenient when using multiple koi_render_navigations to build a single drilldown component.

<div data-drilldown data-drilldown-merge>
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a>
      <ul>
        <li><a href="#">Item 2.1</a></li>
        <li><a href="#">Item 2.2</a></li>
        <li><a href="#">Item 2.3</a></li>
        <li><a href="#">Item 2.4</a></li>
        <li><a href="#">Item 2.5</a></li>
      </ul>
    </li>
  </ul>
  <ul>
    <li><a href="#">Another 1</a></li>
    <li><a href="#">Another 2</a>
      <ul>
        <li><a href="#">Another 2.1</a></li>
        <li><a href="#">Another 2.2</a></li>
        <li><a href="#">Another 2.3</a></li>
        <li><a href="#">Another 2.4</a></li>
        <li><a href="#">Another 2.5</a></li>
      </ul>
    </li>
  </ul>
</div>

Custom drilldowns

You can have a completely custom drilldown by adding data-drilldown-custom attribute to your container. This will however require you to create your own forward/back buttons using data-drilldown-forward and data-drilldown-back:

    • Contact

      Contact us today to answer any of your burning questions!

      Address: Level 1, 234 King William Street, Adelaide, South Australia

      Phone: 1234 5678

<div style="max-width: 320px;">
  <ul data-drilldown data-drilldown-custom>
    <li>
      <button data-drilldown-forward class="drilldown__custom--forward">
        View Brand 1
      </button>
      <ul>
        <li>
          <div class="drilldown__custom--nested">
            <div style="background: #bada55 url('https://placehold.it/340x200') center; padding: 2rem;">
              <h2 class="heading-four">Brand 1</h2>
            </div>
            <div class="panel--padding compressed">
              <p>This is some content around brand 1, maybe a list of products or something.</p>
            </div>
            <div class="panel--padding panel--border-top">
              <ul>
                <li><a href="#">Product 1</a></li>
                <li><a href="#">Product 2</a></li>
                <li><a href="#">Product 3</a></li>
              </ul>
            </div>
            <button class="panel--padding panel--border-top" data-drilldown-back style="width: 100%;">‹ Go back</button>
          </div>
        </li>
      </ul>
    </li>
    <li>
      <button data-drilldown-forward class="drilldown__custom--forward">
        View contact information
      </button>
      <ul>
        <li>
          <div class="drilldown__custom--nested drilldown__custom--nested__contact">
            <div style="background: #bada55; padding: 2rem;">
              <h2 class="heading-four">Contact</h2>
            </div>
            <div class="panel--padding compressed">
              <p>Contact us today to answer any of your burning questions!</p>
              <p>Address: Level 1, 234 King William Street, Adelaide, South Australia</p>
              <p>Phone: 1234 5678</p>
            </div>
            <button class="panel--padding panel--border-top" data-drilldown-back style="width: 100%;">‹ Go back</button>
          </div>
        </li>
      </ul>
    </li>
  </ul>
</div>

Autofocus

You can automatically focus your drilldown on page load by using data-drilldown-focus.

This doesn't affect the automatic focus handling when transitioning through the drilldown.

API Notes

Relationships

You can find the first list of a drilldown by getting the data on the drilldown element like so:

Ornament.Data.get($drilldown, "firstList")

Similarly, all child lists have a "parentList" data object you can access:

Ornament.Data.get($myList, "parentList")

Resizing

You can resize a drilldown programatically (say it gets revealed by an accordion or an ajax call or something) by triggering an event on the drilldown element.

Ornament.triggerEvent("ornament:drilldown:resize");