Posted by & filed under Navigation.

The problem:

You want to simplify navigation by not exposing secondary levels of navigation at all times

Last month I published a blog post discussing vertical navigation and how a multi-column approach can be used to expose up to two levels of navigation in a vertical format (see Vertical Navigation: Finding your Way). At that time I discussed some of the advantages that could be provided by implementing a persistent two column navigation system. There may be times, however, when exposing two levels of persistent navigation is neither desirable or necessary. This may be the case when you either don’t want to allocate the space for two persistent columns on your page or when you decide that secondary categories are not closely related and the likelihood of users wanting to quickly more between these categories in a single click is small.

The solution:

Implement secondary navigation as a non-persistent fly-out menu

A non-persistent, fly-out approach to secondary navigation is the proposed approach.  This is similar to the persistent navigation menu proposed in the earlier blog post, except that when the secondary menu is open, it simply overlays page content without requiring any shrinkage of the content area available to the application. The secondary menu will automatically dismiss when the user either selects a category or mouses-out of the region occupied by the menu.


Admin-Non-Persistent Secondary

Notice that unlike in the case of the persistent navigation, the secondary menu (1) need not occupy a full column from the top to bottom of the content area.  In fact, keeping the menu compact and making it only large enough to show the required number of menu items is preferred as it will best keep the users eye focused on the options available.  Also, centering the menu vertically with its parent item reduces the amount of required mouse travel and reduces the likelihood that users will accidentally dismiss the menu by leaving the menu when the make a quick rightward movement.

One of the key drawbacks of fly-out menus is that there is no way to use the menu to reflect the users current location in the site since the navigation item related to that page is hidden after the user selects it.  Because of this, when using non-persistent secondary navigation it is important to clearly label the page to provide the user with feedback regarding their current location.  In the illustration above, Events, the current page is clearly titled (2) and shown selected when the menu is open (3).  The Admin item in the primary navigation also appears as selected (4).

Here are some additional considerations that should be taken into account when implementing this pattern:

Mobile considerations

When the screen width will no longer accommodate the fly-out menu, an “off-canvas” approach will be used to keep two levels of navigation within one column by giving the appearance of a menu the slides left and right to expose either the primary or secondary set of menu choices.

Storage - Mobile nav

11 Responses to “Vertical Navigation using a Non-Persistent Secondary Menu”

  1. Something that needs to be considered is whether the fly-out menu should be displayed on click or hover. If it is displayed on click, a second click either by selecting a menu element or clicking outside the menu region would be used to dismiss it. What would you expect the behavior to be?

  2. In the mobile case, will the sidebar be able to be accessed by swiping in from the left?
    How come it’s doesn’t go all the way down, like the sidebar above?

    • I think that swiping in from the left is an interesting idea. Right now the intent is that the menu would only be accessed by tapping the menu (hamburger) control. I would not want to specify the swipe interaction in all cases as it could interfere with other gestures. But I certainly think it could be considered as an optional or enhanced behavior in the right context. As for the length of the menu, it should occupy the entire height of the screen. This will be corrected in our final design.


Leave a Reply

(will not be published)