2

I'm using an always-visible side navigation bar for a web app I'm helping design. This bar serves as the topmost navigation throughout the app, providing fast access to top-most categories even from deeply-nested pages.

It follows this pattern: Navigation drawer mini variant

What I'm wondering is: If I'm on a child page, should the navigation bar highlight the top-most parent? Or should it not highlight anything, since I'm not on the parent page itself?

To clarify, imagine this as the hierarchy:

  • Page 1
    • Subpage 1
    • Subpage 2
  • Page 2
  • Page 3

Only page 1, 2, and 3 are in the side navigation. I'm on subpage 1. Should "Page 1" be highlighted in the side navigation or not?

  • Is is your navigation design pattern a horizontal or vertical one? – NB4 Dec 27 '17 at 4:58
  • It's a vertical icon-only sidebar (that can expand into a full-blown hamburger menu on click, but still shows only the top-most items). – Tin Man Dec 27 '17 at 10:47
  • 1
    I feel like the core of the problem isn't about highlighting. There are other ways to let the user know where they are. This might help: material.io/guidelines/patterns/… – invot Jan 26 '18 at 19:27
  • @invot I know there are—I plan to include breadcrumbs. However, I'm only curious about the best practices associated with icon-only top-level sidebar navigation in this question. – Tin Man Jan 27 '18 at 13:38
2

My answer is subjective, as it is based on my own experience with both kinds of navigation.

The one without a highlighted parent annoys me, because it does not show me ‘how did I get here?’.

The one with a highlighted parent gives me the opportunity to get an overview of the subpages, or to ‘backtrack’, without having to remember which main navigation item exactly is ‘back’.

It should be clear however that there are more subpages than the one you are on, and that the highlighted item is not the page you are on. Possibly by offering secondary navigation between subpages, or something like breadcrumbs to visualise the path to the current page.

1

Subpages are "sub" of a parent, as long they are subpages they still belong to their parent. therefore, if there is no indicator in the menubar for the subpage itself, the parent should be highlighted.

  • Do you have any documentation for this? – Devin Jul 27 '18 at 3:07
0

You should highlight whatever page the user is on, so in your case subpage 1.

You do this to also assist the user to keep track of where they are in the application page hierarchy.

If the user is has scrolled half way down a page vertically and the heading of the current page is not fixed to the top of the application. This navigation menu is their only indication of where the are.

Subpage 1 Highlighted

  • The subpages are not listed in the side navigation menu. – Tin Man Nov 27 '17 at 18:19
0

I love the way WordPress has evolved to tackle this problem.

enter image description here

Have the top-most navigational items follow one set of rules when selected, and the children follow another; that way a child page can show its status without conflicting with the parent. In this case, the selected parent is highlighted, but the selected child page is bolded.

  • Thanks. However, to clarify, the subpages aren't shown in the sidebar, so I can't highlight it differently. I added an illustration to my question so you can get an idea of what it looks like. – Tin Man Jan 27 '18 at 13:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.