2

I'm brainstorming for the best way to organize the navigation bar in my design and I found out that material design changed their design quite a bit recently. The navigation bar has an in-page navigation, like below:

material design

Basically, 'Navigation' is the primary category, 'Understanding Navigation' and 'Navigation Transition' are child pages, while 'Types of navigation' 'Lateral navigation'... so on are anchors within a page. They aren't separate pages.

Usually, I see some pages have anchors separately, such as:

  1. Top of the page, contents-style, like Wikipedia
  2. Top right hand corner of the page

So this pattern of having in-page anchors within the navbar seems slightly foreign to me, since most of the time, the navbar contains links to separate pages. But this is the best option I have for my current website.

I need users to be able to recognize the in-page anchors (so I can't put them on the right hand corner) and I need a lot of screen space (so I don't want to have a contents).

So, are there any research or relevant resources on the usability of this kind of pattern?

Improve this question

1 Answer 1

Reset to default
1

Another option, which is a more common pattern, is a sticky nav for in-page navigation. Here is an example on the Sony website:

https://www.sony.co.uk/electronics/televisions/af8-series?cpint=HOMEPAGE_TOPBANNER_CES2018A8F_9260

When you scroll down the page, the sticky nav appears at the top with links to in-page content.

What kind of website are you creating?

Improve this answer
1
  • Hi, thanks for the advice! Yes I browsed that pattern too, but I am creating a utility website (closest to a dashboard but not quite), so the top navigation bar is not a good option. I'm trying to maximize the content area as much as possible, since we have a lot of info to display. But thanks for the reference!
    – sofarsophie
    Jun 1, 2018 at 1:45

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.