1

I have this Side Navbar with children. I am not sure that the way I am illustrating the children is the best way of doing this.

Questions - Is this the best way for me to illustrate navbar item's children? Is there more I can do to improve presentation?

primary: "#33404D",
secondary: "#465666",
accent: "#FFAB00"

First Attempt - Take 1(Oldest version of the component)

enter image description here

Second Attempt - Take 2

enter image description here

Third Attempt - Take 3

enter image description here

1

I don't think you'll find any "best practice" for this particular module. But here are some visual cues for the user to better understand the level changes.

  • The change in arrow direction with an animated pull-down of the child entities. (It draws the user's attention)

  • Use of fading colors is generally used to show change in levels. I would avoid using darker background colors for the child entities because unless there's a drop-shadow under the parent level, it is very hard to tell which is the parent and which is the child. A fade in color (dropping saturation) is a much more natural way of showing level-ins.

  • Avoid indentation at all costs! Although good for giving a clear sign of level-in, it will cause space issues if you have multiple levels and/or long menu item labels. The text also gets completely messed up if viewed in lower resolutions, smaller screens or larger text sizes as you'd see very few characters once you're 1 or 2 levels down. The missing icons and change of background color are enough.

Alternates

You can, instead, go for an indented list (I believe it's called hierarchy view). It's more common in documentation websites, not so much so for regular sites or web-applications.

Or, a pop-out menu where the level-ins are pop-outs.

0

You can make it better just with typography changes:

  1. Increasing the left indent

left indent

  1. Decreasing the font-weight

font-weight

  1. Using the icon color

icon color

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.