In-page Navigation Links on Navbar

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?

Tags: