What's the name of this one page navigation pattern?

Question

I'm looking for a specific navigation pattern I saw some years ago, which I can't find anymore.

In this pattern the same navigation is repeated multiple times on top of each section on a single page. The links in the navigation are anchor links which scroll you to the other sections.

It looks like this:

[section 1]   section 2    section 3

  content
  content
  content

 section 1   [section 2]   section 3

  content
  content
  content

 section 1    section 2    [section 3]

  content
  content
  content

Do you know the name of the pattern or any websites that use it?

Thanks a lot!

Answer 1

I would try something like "Top bar", "Navigation top bar", "Scrolling nav" or something like that. I don't know if it is official name, but it describes it good.

These pages are using something like it: http://andy-hook.co.uk/ https://2015.avocode.com/

Answer 2

If you're looking for something that is literally repeated throughout the content of the page then I don't know that there is a specific name for it but I would call it something like "Repeated inline navigation", maybe?

If you're looking for something that has the navigation locked to a certain position (usually the top of the window) and updates based on the scroll position of the content then you you are looking for "scrolling navigation".

Example: http://blackrockdigital.github.io/startbootstrap-scrolling-nav/

Answer 3

I don't know a specific name for the style, but it seems to be a fixed div with in-page navigation. You put a fixed div at the top of the page with a menu and then each div is named such as

     <a name="Section 1" />  

Then, at the top of your page, in the menu bar (your fixed ), you'd put the link to that section:

    <a href=”#Section 1”>Section 1</a>

Answer 4

What you're describing sounds like the "Tab" + menu UI used on the Semantic UI framework, specifically on this page. The behavior of the tabs and the right menu seems pretty similar to what you're describing.

http://semantic-ui.com/modules/tab.html#/definition

Answer 5

This is called a

Bad Idea

Because it only makes navigation harder and has hardly any benefit. You could argue that in some cases (tall content sections) you sometimes have 1 or 2 more lines of text on screen. But that doesn't weigh up against the navigation problems it will create.

All the other answers mention a (scrolling) navigation bar, and for good reason. It keeps all the navigation neatly gathered in a fixed bar at the top. This means you don't have to scroll up or down to find the closest menu, it's always accessible. It also reduces repetitiveness of the website and thereby saves a few lines of scrolling/printing.