3

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!

  • This would actually be considered an antipattern (something to avoid). And I don't think there is a standard name for it, because it was never widely used. I've been involved in web dev on and off for 15+ years and never saw it before. – user31143 May 12 '16 at 15:28
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/

  • That's actually not what I had in mind. In the pattern I'm looking for the navigation is literally included multiple times on one page. – Tobi May 12 '16 at 15:07
  • I think there is no name of the pattern here for this. But I can invent one :-) What about "In-page repeatable navigation"? – Jan Toman May 12 '16 at 15:25
1

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/

1

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>
1

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

0

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.

  • I have no idea why you would opt for a multi-navigation-bar setup with modern CSS and JS capabilities - You can eve make a large nav bar shrink as the user scrolls away from the page header as Adobe do: adobe.com/uk/creativecloud.html – Andrew Martin May 13 '16 at 8:11

protected by Community May 12 '16 at 17:50

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.