Drill Down
The 'Drill down' component is used when many potential options are avaiable to a user but we don't want to present them all at once. This component provides an inline navigation mechanisum that allows users to 'drill down' through a set of categorised options to find the item that suits their needs.
We use this component to help users waid through the many variations of Cambridge English courses that we offer in an logical and intuative manner.
Initial state:
When a user select an item, that item is in a loading state:
Top level option two
When the content has loaded, the selected item' children are displayed and the selected item appears as a link back acting like a breadcrumb:
Top level option two
Sub option one
Sub option two
Sub option three
Drill down content such as tables or products with prices.
As users drill down further, each selection is appeanded to the the breadcrumb trail always allowing a user to step back:
Top level option two > Sub option two
Loading state for stepping back: