Navigation in website design does not undergo many changes. It includes almost the same elements, always meets the audience from the outset and modestly takes its place in the top header. Since the popularization of the hamburger button, nothing earth-shattering has happened. However, this does not mean that its life is boring and uneventful.

As an integral element of the UI and a crucial part of good user experience, navigation never abstracts itself from design or distances from trending solutions. It always manages to blend in, but not get lost in the spectacle that awaits in the modern hero area.

Designers conduct various experiments to adapt it to new realms to come up with exciting solutions. And one such attempt to create navigation that meets the mainstream results in ultra-narrow, sticky vertical navbars.

We have already seen narrow sidebars. However, this time it differs a little bit.

The renewed version is more compact, minimal and elegant. It bets on popular features like vertical lettering. And most importantly, it sticks to the screen and follows the user through the website, complying with all the basic requirements of good navigation.  Let’s consider some representative examples.

Austin McKinney

Our first stop is the personal portfolio of Austin McKinney. Here, the vertical navbar includes only the essentials: a hamburger button, links to profiles in social media platforms, the name and occupation of the artist.

Thanks to its white, clean, and ultra-narrow design, it perfectly blends into an overall light environment with a powerful geometric vibe. It creates a necessary anchor for online visitors, providing them with helpful information.

Editorial New

The team behind Editorial New shows us that the solution is quite universal and works regardless of coloring, stylistic options or interactive details. What’s more, it is an ideal partner for websites that position themselves as online magazines.

Here the navbar includes just one element – the hamburger button. It opens a slide-out menu with a table of contents. Since it sticks to the left side of the screen, wherever users are on the page, they always have quick access to links in order to jump from one section to another.

Note, unlike the previous example, here the vertical navbar is a part of the perimeter navigation that makes the design look complete.

The Crowdfunding Formula

The vertical navbar of Crowdfunding Formula is located on the right side. Although we are not accustomed to seeing it there, nevertheless it works perfectly. What’s more, thanks to the contrasting orange color that marks the logotype, selected menu link, and search button, the sidebar naturally catches an eye.

Note, it does not have any borders: it just seamlessly flows into the design. However, thanks to the boxy vibe that runs throughout the page and generous amount of whitespace, it gets its own place under the sun.

NSDI

The team behind NSDI uses a vertical navbar for displaying not just the hamburger button, but also pagination for a full-screen slider. Another distinctive feature is that all elements move with the user. Here, you can see an ultra-narrow vertical navbar and corner navigation that co-work together in order to create a comfortable user experience.

Much like in the case of The Crowdfunding Formula, here navigation does not have a distinctive background. However, the team has used contrasting colors to naturally set the elements off from the composition.

Cervelo Cycles

Cervelo Cycles has a more-or-less traditional sidebar, though this fact does not stop it from looking trendy and refreshing. It covers all the menu links, logotype, search field and CTA. It is relatively wide and stands out from the content flow due to its solid black background.

Its key feature lies in a small transformation. The sidebar morphs into an ultra-narrow vertical line with everything hidden inside once the user starts to scroll down. The minimized version has only the hamburger button in the center. However, it is precisely what is needed for online visitors to avoid getting lost in the content-heavy environment.

Villa Covri

The official website of Villa Corvi has not one but two ultra-narrow vertical navbars. The first one includes only social media links displayed in vertical rhythm, whereas the second one comprises the button to the inner menu and nameplate. Along with the upper header, these two strengthen the subtle boxy vibe of the website.

Note, only the right panel sticks to the screen and moves along with users. It transforms into a horizontal line on tablets and cellphones to create consistency across various devices.

TedCo

There are two important takeaways from the official website of TedCo.

First, much like in the case of Editorial New, here the vertical navbar is a part of the corner navigation. It looks neat, elegant and informative. It finishes off the sophisticated design of UI.

Secondly, the path of exploring the website is unconventional. Instead of moving down, users scroll to the right along the X-axis. Here the vertical navbar stays where it is, giving users the necessary focal points to feel comfortable.

Rogue Studio

The navbar in Rogue Studio is an excellent example of the solution where all the navigation links are exposed to the audience. On top of that, the creative team managed to gracefully include logotype and social media icons.

Although the component looks more cluttered in comparison to the previous ones, it has one significant advantage over them. It gives users what they need right here, right now without unnecessary moves.

Sticky Positioning with Nothing but CSS (Thanks to CSS Position: Sticky)

September 16, 2019 • Positioning, Sticky

by Thoriq Firdaus8 hours ago

Difficulty:IntermediateLength:ShortLanguages:

Sticking elements when the user scrolls to a certain point is a common pattern in modern web design. You’ll see it applied to top navigation, the sidebar, share links, or perhaps ad blocks; retaining visibility within the viewport as the user scrolls. 

Historically we’ve needed JavaScript to do this. However, sticky behaviour has become a new standard (CSS position: sticky), allowing us to achieve the effect with pure CSS. Let’s take a look at how it works!

Sticky Position

sticky is a new(ish) value for the position property, added as part of CSS3 Layout Module Spec. It acts similarly to relative positioning, in that it doesn’t remove anything from the document flow. In other words, a sticky element has no effect on the position of adjacent elements and doesn’t collapse its parent element.

Given the following example, we set the #sidebar position to sticky along with top: 10px. The top value is required and specifies the distance from the top edge of the viewport where the element will stick. 

#sidebar {
	position: -webkit-sticky;  // required for Safari
	position: sticky;
	top: 0; // required as well.
}	

Now, as we scroll the page, when the sidebar’s distance from the top of the viewport reaches 0, the sidebar should stick, effectively giving us a fixed position. In other words, the sticky is kind of a hybrid between relative and fixed position.

Nesting

Additionally, CSS position: sticky will work within a scrolling box or an overflowing element. This time we’ll set the top to 15px to give some more space above the sidebar when it’s stickily positioned (yes, that’s a word).

The sidebar will remain sticky all along the parent’s height (ie: when the bottom of the parent reaches the bottom of the sidebar, it will “push” it off the page once more.)

Easy, isn’t it?

Support

In the last couple of years browser support for CSS position: sticky has taken huge leaps. From the chart you’ll see it enjoys excellent coverage, although many supporting browsers (such as Chrome and Edge, both of which use the Blink rendering engine) still struggle when CSS sticky is applied to

or

elements.

Additionally, as mentioned earlier, Safari offers full support but requires use of the -webkit- prefix.

Using the Polyfill

To help out our non-supporting browsers (not that there are many nowadays) we can use stickyfill developed by Oleg Korsunsky. The polyfill works nicely in various circumstances. Whether the designated element has padding, margins, borders, been floated, or formed with relative units like em and percentage, the polyfill will accurately mimic the CSS sticky position behavior. And using stickyfill is equally intuitive.

To begin, grab stickyfill.js (optionally with jQuery, if you are more familiar with and prefer using jQuery for selecting elements). Link these libraries within your HTML document. Then initiate stickyfill with the designated element, as follows:

var sidebar = document.getElementById('sidebar');
Stickyfill.add(sidebar);

If you are using jQuery, you could write the following instead:

$('#sidebar').Stickyfill();

Now, our sticky sidebar should work across browsers including Chrome and Opera. The polyfill is smart enough that it will only run in non-supporting browsers, otherwise it will be completely disabled, stepping aside for the browser’s native implementation.

Caveats

There are a couple of other things to note before you take the plunge and use sticky position on your websites:

• First, the height of the parent container should be greater than the sticky element.
• The polyfill has its own shortcomings, in that it won’t work within an overflowed box.
• At the time of writing, there is no specific JavaScript event handler for sticky to identify when the element is stuck. Such an event could be useful, for example, to add additional classes when the element is stickified (that might not be a word). There is however a slightly hacky way to achieve this using the Intersection Observer API. Read this post to find out more.

Closing Thoughts

CSS sticky position is a brilliant tool if you simply need a plain sticky element. If your need grows beyond that though—say you want to add some fancy effects upon the sticky element—you’ll still be better off opting for a JavaScript solution, be that self-written, or a library like Waypoints.js with its sticky module.

Further References

• Why (Sticky) JS is not Ideal?
• CSS Sticky Working Draft

Learn CSS: The Complete Guide

We’ve built a complete guide to help you learn CSS, whether you’re just getting started with the basics or you want to explore more advanced CSS.