Drilldown

What is a Drilldown?

A Drilldown is a component that is used to present menu subitems in a way that allows the user to navigate a hierarchy within a menu. Whenever a user "drills down" to the next layer of submenus, the next set of menu items slide in from the right and overlay the previous menu, replacing them on the screen.

When and why?

Drilldowns can be used when a menu has multiple 'levels' in a hierarchy. For example, you might be able to "drill down" through levels of Organisation, Department and Manager when looking through a list of employees.

Only the last option in a particular hierarchy will actually point to a destination and allow the user to explore their options before committing to moving to a new page. While navigating through the hierarchy, the page that the user is currently on will remain visible until they choose a destination from a submenu.

Drilldown types

The following Drilldown types are available:

Drilldown properties

Drilldowns have the following properties:

Drilldown compositions

Below you can find examples of the compositions you could create using a Drilldown

Using a Drilldown

Navigating the Drilldown

Menu items in a Drilldown perform one of two functions: 'parents' that contain submenus, or 'destinations' that act as a navigation element. 'Parents' are used to drill down throughout the menu's hierarchy, whereas the user will be drilling down until they reach their desired 'destination'.

When a 'parent' item is selected, it will reveal subsequent submenus which in turn may be a parent or destination item. The submenus it contains will slide in from the right and cover up the previous menu items. 'Parent' menu items are identified by an icon of an arrow pointing to the right, indicating that they lead further down into the hierarchy.

Each submenu that a 'parent' item leads to must contain a back button, which lets the user go back to the level above the current menu. The back button must be the first item in the menu, so it is easily accessible and visible. 'Destination' items act as a navigation element and do not have an icon, indicating to the user that they will be taken to a new page when they are selected rather than drilling down further into the menu.

Organising submenus

Submenus should be directly related to their 'parent' – i.e. if a parent is labelled 'Department', the submenu should display a list of 'parent' or 'destination' menu items that are Departments. Try to organise these menus as logically as possible.

There is not a limit on the number of submenus that a Drilldown can contain, but as a good rule of thumb any more than three may be confusing for a user, and might cause them to backtrack quite a lot if they find it difficult to find their desired destination.

Uh-oh! Looks like we haven't finished building this page yet.

Come back soon, and we'll have more exciting content to share.