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?

Improve this question
4
  • Is is your navigation design pattern a horizontal or vertical one?
    – NB4
    Dec 27, 2017 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, 2017 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, 2018 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, 2018 at 13:38

4 Answers 4

Reset to default
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.

Improve this answer
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.

Improve this answer
1
  • Do you have any documentation for this?
    – Devin
    Jul 27, 2018 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

Improve this answer
1
  • The subpages are not listed in the side navigation menu.
    – Tin Man
    Nov 27, 2017 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.

Improve this answer
1
  • 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, 2018 at 13:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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