Drilldown
‹ BackBasic 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_navigation
s 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
:
<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");