Is there a better approach for sidenav dashboard layout with subnavigation?

by Lenilson de Castro   Last Updated July 18, 2017 19:16 PM

I have the following scenario in terms of navigation, it's just an example of an admin panel but would be enough to exemplify my issue.

It's a dashboard admin layout in which some pages I have sub navigation. It is, from the side nav, I have the Events menu item from which will render the Event List Page on the main/detail area. The Event List Page allows the user to navigate into an Event Detail Page. From this point it has a set of navigation items that belongs the the event management system it self, that is, News, Schedule and Maps.

The problem that I'm facing is, I don't know how to keep navigation consistent given the deep level model. The bellow mockup is the draft that I have so far, but I'm trying to choose a good approach in terms of UX (I'm not the UX guy by the way, I'm the knows nothing about UX programmer guy). It looks like a pretty good ideal but like I said, I'm not the UX guy therefore I'm not sure on it.

Anyways, is it a good approach? Is there a better approach?

mockup

download bmml source – Wireframes created with Balsamiq Mockups



Answers 3


First of all, I have to say bravo to your effort and care to solve this problem even though you have no relation to UX.

Moving on, I think indeed that a multi-level "tree" navigation is the way to move forward for what you need.

Essentially you keep all your navigation options in the sidebar and you nest them accordingly under their parent navigation section.

Think of it like listing taxonomy. The simplest way to display that logic would be by like this: enter image description here

A more modern example can be found in this Patternfly article:

enter image description here

Plenty of apps/systems use the tree navigation. Think of any major e-commerce website (e.g Amazon) or even web-mail client (e.g Gmail) so this is a very familiar method of navigation for users.

Socrates Kolios
Socrates Kolios
July 19, 2017 08:33 AM

What you're talking about is a classic drill down approach. Given your stated limitations and the dynamic nature of your content, I think it's the best approach.

It's more common than you think. In the world of dashboards and admin tools, we talk about CRUD (create read update delete) apps all the time, but most actually follow the BREAD view pattern (browse read edit add delete) which has exactly what you're showing -- a list page leading to detail views. I've also seen this as CRUDI -- with I for Index. Personally I like the connotation of making BREAD over something CRUDI.

If you need a live example, Wordpress follows this pattern for pages. I generally don't recommend following their UX (which is dated and often clunky), but in this case, it makes sense.

To improve clarity and navigability, it can be worth adding breadcrumbs to the top of the main content area. Even if they only include links already reachable in the sidebar, they are closer to the user's current flow, and they will help you support more deeply-nested views (e.g., the news items in your mockup might have deeper content) if the need arises.

Nathan Christie
Nathan Christie
July 19, 2017 15:02 PM

Including a breadcrumb like: Events / Event 1 at the top or a "Back" button prior to the "Event 1" title or even an "X" close button on the top right corner of "Event 1" should be good solutions to your issue.

Marcus Wallace
Marcus Wallace
July 19, 2017 16:00 PM

Related Questions


Leaving private group before accepted

Updated April 04, 2017 10:16 AM

Which design you think is more efficient?

Updated June 19, 2017 08:16 AM



How to show password on a user's profile page

Updated June 17, 2015 22:07 PM