A Better Approach to Multi-Level Sidebar Navigation

Improving sidebar design

Designers must stop using multi-level sidebar navigation. Grouping many items and subitems together in a small space creates visual clutter. As a result, users have trouble finding items when they navigate.

For example, a sidebar with a navigation hierarchy with three levels will display many text labels. Users navigating between levels can easily misinterpret which level they're on or click the wrong one if they don't look carefully.

The indentions in front of each label indicate different hierarchy levels. The primary level has no indention but is distinguished by icons. The secondary level has a single indention, while the tertiary level has a double indention. As you can see, the visual cues to distinguish the levels are too subtle for the eye to notice.