jQuery iPod-style Drilldown Menu
Posted by Scott and Maggie on 05/14/2008
Note: We've created a new article with some major improvements to this plugin. To read the article and download the script, visit jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready.
1/16/09 Update: we contributed this menu plugin to the jQuery UI library. It’s currently being refactored and slated for upcoming release. You can track its progress at the jQuery UI Planning Wiki (Menu planning page), or better, post feedback or share your own ideas about the jQuery UI planning process by joining the planning wiki.
We created an iPod-style drilldown menu to help users traverse hierarchical data quickly and with control. It's especially helpful when organizing large data structures that don't translate well into traditional dropdown or fly-out menus.
This drilldown menu provides easy navigation of complex nested structures with any number of levels. The entire menu sits within a fixed-size area, and when a node is selected, breadcrumb links appear above the menu options to both deliver feedback and allow quick access back to nodes higher up in the hierarchy. A lateral iPod-style slide transition reinforces the notion that you're moving forward into more granular data, or backward into higher-level data. This menu is specifically useful in traversing deeply nested hierarchies, particularly those more than three levels deep. It also provides a more usable alternative to multi-level fly-out menus, which can present challenges to those with limited manual dexterity.
The simplest version works like the iPod menu or standard fly-out menu, where the primary goal is to select an end (leaf) node. When you select a category (indicated with an arrow), the menu drills you down into the next level of hierarchy:
It's also possible to configure the menu so that users can select either a category or a leaf node. This is useful for global navigation where users may want to select a higher level category page (Finance) or a detailed page (Mortgage). In this case, the menu options are separated into two parts: a selectable category name (text on the left) and, if applicable, a sub-menu drilldown navigation link (arrow on the right):
The iPod-style drilldown menu widget shown here is not coded for ease of modification, but is free to reuse and modify with a proper attribution to Filament Group. Feel free to visit our demo page and view the source code to see how it works.
Thanks for the helpful feedback!
We're no longer taking comments on this post because we've handed off development of this widget to the jQuery UI development team. The menu is currently being refactored and is slated for an upcoming jQuery UI release. We encourage you to track its progress and continue contributing your ideas at the jQuery UI Development & Planning Wiki.