0

I'm making a simple blog where posts are tagged by location. The main idea is to divide the screen in two areas:

  • narrow left area for navigation, and
  • wide right area for the content itself (map, individual article, About page etc.)

Desktop layout

When viewed on mobile, the toolbar has a menu icon that toggles the navigation.

Mobile layout

I've searched through many navigation examples and came up with a concept that accommodates the primary navigation (Home, About, Login) and two-layer secondary navigation (Destinations-By Country, Destinations-By Date, Articles).

I'm not quite happy with this design yet, though, so I would like to ask the community for some advice. Is there a better way to solve the navigation? Every opinion is appreciated.

Improve this question

1 Answer 1

Reset to default
0

You can take a look at Navigation Patterns and Navigation drawer for some design patterns. The way the sidebar is collapsing looks good to me, as it still shows the search functionality which is probably important in your app.

I am not so sure about the elements inside the menu as you are using double tabs hierachy. A nested navigation might work better in your case, making all option occupy the whole width of the sidebar:

Home
Search
---
Destinations by country
    Canada
    Cuba
    Mexico
Destinations by date
Articles
---
Login
About

If you think "Destinations by country" should be visible to the user you could leave it open when the app loads.

Improve this answer
3
  • Thank you for your feedback. I have one concern about using nested navigation. What happens if there are 50 or 100 items (e.g. countries or articles)? And if they open on load automatically, the user will need to scroll all the way to the bottom to reach "Login" and "About". Is it considered a good UX practice? Is there any way I can show the "Destinations by country" expanded at the same time as the "Home", "About", "Login" and other menu items?
    – Glen
    Nov 16, 2016 at 14:21
  • Take a look at the comparison between "Expanding navigation drawer" and "Cascading navigation drawer (Desktop only)". In your case it wont be a good idea to display all countries opened. You could add a button such as "..." to expand or redirect to a different page. You could leave all tabs open without the ability to close (for example: Twenty sixteen WP theme twentysixteendemo.wordpress.com)
    – Alvaro
    Nov 16, 2016 at 14:35
  • I looked at the example. I also noticed that Skype for Windows has left pane with a similar design to my initial idea. And developers.google.com/products (when viewed on mobile) collapses the row above tabs on scroll. Maybe a menu collapsing on scroll and only keeping the tabs row would be another approach.
    – Glen
    Nov 17, 2016 at 14:29

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.