Open root

Create a Sidebar

The sidebar on this website pays homage to the design of sidebars in many great applications. For instance, Safari & Xcode both provide sidebars which make navigation of hierarchical data natural. This user interface is so important that it has a dedicated section within the Human Interface Guidelines: Outline Views. While NSOutlineView is a great choice for macOS apps, a website's sidebar must obviously be built upon a different technology stack. Luckily, provides a tutorial describing how to achieve a similar design using web technologies. The sidebar on this website is directly inspired by that article. Of course, the outline view needs a dedicated sidebar within which to reside. This demo shows how to build that.

With some effort, you should be able to leverage the two previous articles to produce a rudimentary sidebar. The following list enshrines a few solutions to pesky issues faced during the design of the sidebar on this website: