Drilldown

‹ Back

Basic usage

Drilldown can either be attached to a div 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:

<div data-drilldown>
  <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>
</div>

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

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><a href="#">Item 2</a>
    <ul>
      <li><a href="#">Item 2.1</a></li>
      <li><a href="#">Item 2.2</a></li>
      <li class="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:

<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:

    • Brand 1

      This is some content around brand 1, maybe a list of products or something.
    • Contact

      Email, phone etc.
<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><h2>Brand 1</h2></div>
          <div>
            This is some content around brand 1, maybe a list of products or something.
          </div>
          <button data-drilldown-back>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><h2>Contact</h2></div>
          <div>
            Email, phone etc.
          </div>
          <button data-drilldown-back>Go back</button>
        </div>
      </li>
    </ul>
  </li>
</ul>

API Notes

Relationships

You can find the first list of a drilldown by accessing data("firstList") like so:

$drilldown.data("firstList")

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

$myList.data("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.

$drilldown.trigger("ornament:drilldown:resize");