15

The Bootstrap documentation site uses a very interesting navigation concept.

They have a per-page navigation bar that sticks on top of the page once you scroll down and highlights the current area on the page as you go.

Here is a screenshot of the navigation bar when you are at the top of the page.

enter image description here

The red rectangle is not part of the design, it is used to highlight what navigation bar I'm referring to.

This is a screenshot of the same page but scrolled down a bit.

enter image description here

Note how that navigation bar suddenly stretches across the entire width of the page and always sticks at the top.

Is there a name for this navigation concept, if so, what is it called?

Improve this question
3
  • I'd simply refer to the act of "sticking" as "anchoring" the nav bar but I'm not aware of a specific term for this sort of nav element. Google uses them a lot.
    – Ben Brocka
    Feb 16, 2012 at 16:37
  • 1
    I just sent the question to the "resident Bootstrap expert", aka @mdo aka the Creator.
    – dnbrv
    Feb 16, 2012 at 19:10
  • This sticky header is one of my favorite navigation improvements in the last 5 years. I wish is was more widespread.
    – drawtheweb
    Sep 18, 2012 at 19:51

5 Answers 5

Reset to default
7

There is no well-stablished name for this pattern. The term "sticky headers" is usually applied to interface elements that are fixed from the beginning.

The fact that some navigation elements become "sticky" while they are relevant is a subtle but interesting difference. In this way, the visual hierarchy is kept despite of scroll.

Gilles Vandenoostende refered to this pattern as Dynamically Fixed UI. More recently, a CSS position named 'sticky' has been proposed and it is supported by Webkit for this behavior.

This mechanism is also applied to group heading in lists on some mobile platforms. Android contact app uses this approach:

enter image description here

Improve this answer
3

They call it ScrollSpy on their site.

The ScrollSpy plugin is for automatically updating nav targets based on scroll position.

Improve this answer
4
  • 2
    Thanks! That is for highlighting the area as you go. I see. Embarrassing that I didn't find that piece of information myself, however that doesn't answer how that stick at the top navigation concept is called.
    – Octavian Helm
    Feb 16, 2012 at 10:33
  • I'd like to add that scroll spying is especially useful when designing parallax scrolling sites. This is a cool feature but it can easily turn into a navigational nightmare. Sony's landing page for their tablet is a showcase example of how to use scroll spying: discover.store.sony.com/tablet it also changes the URL according to section.
    – Adam Grant
    Feb 16, 2012 at 14:51
  • 2
    ScrollSpy is the name of the plugin that manages the navigation/scrolling behavior. The OP's question seems to be about the name for the overall design/interaction pattern.
    – Rob Flaherty
    Feb 16, 2012 at 17:57
  • In this case the sticking effect is achieved by assigning the subnav-fixed class to fix the position of the menu bar in response to scroll events.
    – Pau Giner
    Feb 16, 2012 at 20:20
1

Looks like a variation on the "Google" menu bar. Attached to the top with anchors setting off events. Easy to attach(CSS) the navbar. Maybe a JQuery tool for the events?

Improve this answer
1

Like others said, there is not agreed upon name for this UI pattern. In addition to “Sticky Element” and “Dynamically Fixed Element”, one name I found was “Fixed Floating Element”.

I’ll just add that, thought this pattern is most useful for toolbars and navigation, nothing stops you from using it for other types of content. I’ve seen it used for non-essential navigation, ads, or even a page’s main text content (e.g. on media-rich pages such as designer or photographer portfolios).

Improve this answer
0

If you're asking what the name is for the design pattern of a full-width navigation bar that "sticks" to the top of viewport, I'm not sure there is a single agreed upon name. But I generally refer to them as a "fixed navbar" or "fixed menu bar".

Improve this answer

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.