Should navigation bars be sticky or fixed?

Like most UX design decisions, choosing the best type of navigation isn’t a one-size-fits-all verdict. It depends on your digital product, target users, and UX goals.

Navigation impacts both users and businesses. Not only does well-structured navigation affect a user’s cognitive load and engagement, but it also influences conversion rates and SEO ratings. It’s vital to design user-centered navigation to ensure usability, which generates user satisfaction (and loyal customers).

Sticky and fixed navigation have recently become popular UX choices because they both answer this need for user-centered navigation. The terms “sticky” and “fixed” may seem similar, so much so that they are sometimes used interchangeably in UX design. But they actually describe different types of navigation.

Let’s set the record straight by examining the differences between sticky and fixed navigation, then review the use cases, pros, cons, and best practices of each.

What’s the difference between sticky and fixed navigation?

Selecting the best-fitting navigation for your website or digital product is important for the user’s experience and information architecture. It impacts the user’s flow and how much attention is given to the content. It can even boost conversation rates.

You may or may not know this, but the names “sticky” and “fixed” come from the CSS property for position. So the navigation header can have position:sticky; or position:fixed; assigned, which determines how the element will behave in the interface.

Sticky navigation

Sticky navigation bars are dependent on the user’s scroll position. But no matter where the user scrolls on the web page, at least part of the navigation is visible. When the navigation header has position:sticky;, it essentially toggles between relative and fixed based on the user’s scroll position.

For example, a web page has two levels of a navigation menu — the first level includes primary actions, and the second level includes secondary actions. When the user scrolls down, both navigation levels scroll until the second level hits the top of the viewport. So, the first level is no longer visible, but the second level is.

Only part of Medium’s navigation sticks to the top of the page when the user scrolls:

When you think of sticky navigation, you probably think of a header or bar that remains near the top of a web page (like in the previous scenario). This top-sticky position is the most common type of sticky navigation, but there are two other types — left-sticky and right-sticky.

Let’s compare each type of sticky navigation:

• Top-sticky — This navigation remains near the top of the viewport, and the content scrolls beneath the navigation once the navigation hits the viewport’s top. This is the most common placement of sticky navigation and is also known as a “sticky header”
• Left-sticky — This navigation remains near the left side of the viewport, and the content scrolls on its right side. This placement is common in dashboards or websites with many menu items
• Right-sticky — This navigation remains near the right side of the viewport, and the content scrolls on its left side. This placement is less common but can be used to support secondary navigation

Sephora uses left-sticky navigation for filters, and LinkedIn uses right-sticky navigation for secondary links:

These sticky navigation types can also be combined in the same interface design.

For example, a website may use top-sticky navigation for primary global actions (actions you can take on any page), as well as use left-sticky navigation for secondary local actions (actions you can only take on a specific page).

Fixed navigation

In contrast, fixed navigation always stays “locked” in place on the web page and doesn’t adapt as the user scrolls. When the navigation header is assigned position: fixed;, it becomes a permanent part of the interface. Due to its persistence, fixed navigation headers are frequently positioned at the top of web pages.

So, as the user scrolls down the web page, the navigation header remains where it is, and the content scrolls beneath it. Unlike sticky navigation, fixed doesn’t adapt to the user scrolling–all links and menu items remain where they are.

Home Depot uses a fixed navigation so the branding and important links are always visible:

Use cases of sticky and fixed navigation

As mentioned earlier, selecting when to use sticky or fixed navigation has multiple dependencies, like the UX goals. But there are known scenarios when one should be used over the other to optimize both the user’s experience and content.

For a quick guide on when to use which navigation type, here’s a breakdown of the scenarios where it’s better to use sticky or fixed navigation below:

Sticky navigation

• Content-heavy websites — If a website includes pages with a lot of content, sticky navigation only keeps the critical parts of the navigation so it doesn’t detract attention from the page’s content (e.g., ecommerce product pages)
• Mobile devices — The navigation for mobile devices needs to be condensed to not take away the limited screen space. Once the user starts scrolling, only a few actions (like a hamburger menu) should remain in the navigation header while the rest scrolls.

Peloton’s mobile app navigation condenses once the user scrolls to only show available filters:

Fixed navigation

• Simple websites — Fixed navigation is better for websites with limited scrolling, like single-page sites or web pages with minimal content. This way, the user isn’t distracted by any transitions the navigation menu would have if it were sticky (I.E., a dashboard)
• Brand visibility — Fixed navigation provides a way to constantly show the brand on the interface. Websites with fixed navigation use the brand’s logo as a link to the home page, which helps the user create brand awareness and recognition

Slingshot provides fixed navigation that consistently shows all links and branding:

Sticky navigation: Pros, cons, and best practices

We know that at least part of sticky navigation always remains on the web page no matter where the user scrolls, and it’s best used in scenarios like content-heavy websites. Let’s further explore its pros, cons, and best practices.

Pros

• Clutter-free — Because sticky navigation dynamically removes some of the navigation once the user scrolls, it reduces the interface’s clutter as well as the risk of the navigation competing with the content for the user’s attention
• Usability — On sticky navigation, the user can easily find where they are on a website (like a “You are here” marker), as well as access quick links to go to their next destination on the website, enhancing the usability

Cons

• Distracting — When the user scrolls, the transition that occurs as the navigation header changes may distract the user. If the user was reading a paragraph and scrolled down to read more, they could lose their reading position if their eyes diverted to the transition
• Performance issues — Poorly implemented sticky navigation can cause lag when scrolling (especially if using Javascript), and position: sticky; is not supported on older browsers (so a fallback option is needed)

Trip Advisor’s sticky navigation has a distracting jump effect when it adapts as the user scrolls:

Best practices

• Provide feedback — Users must be able to easily interact with and understand the navigation. Use interactions like hover effects and active states to show the user where they can go on a website, as well as tell them where they currently are
• Keep it lightweight with CSS — Native CSS properties like position: sticky; are more efficient versus Javascript because they load web pages faster. You can also enhance the performance by using system fonts and SVGs for icons
• Optimize for mobile devices — The navigation for mobile screens must be minimal due to space constraints. Collapse the majority of the navigation into a “hamburger menu” icon. And if needed, place 1 to 2 buttons for important actions (like accessing a profile) adjacent to the hamburger menu

Fixed navigation: Pros, cons, and best practices

Fixed navigation works best on simple websites because its position stays “locked,” keeping it at the top of the web page as users scroll. Let’s take a look at fixed navigation’s pros, cons, and best practices to better discern when to use it.

Pros

• Consistent — Fixed navigation doesn’t change and always remains visible on each page of a website as the user scrolls. This helps users familiarize and easily access links like their user profile or the home page
• Simple — The position: fixed; property is easy to implement from a developer’s perspective, and most users are accustomed to finding the navigation bar at the beginning of a web page

Cons

• Space-consuming — When the navigation header doesn’t consolidate and remains as is, there isn’t as much real estate for the content. This can cause issues for mobile devices if the navigation header fills almost a quarter of the screen
• Impedes accessibility — Because fixed navigation is locked in place, it can obstruct content (especially if the header is bulky). Users who rely on keyboards to navigate an interface may not be able to see content that remains behind the navigation header

Home Depot’s fixed navigation partially obstructs the keyboard focus when using Shift+Tab keys:

Best practices

• Keep it compact — Since a fixed navigation header is permanent on the interface, prioritize key links and call-to-actions to minimize its size. For instance, only include the brand logo, search, and primary links
• Minimize distraction — A prominent fixed navigation can steal the user’s attention from the content, so avoid bold background colors, large logos, and animations. Find a balance between giving the header visual importance without it being distracting
• Test for accessibility — Use a keyboard to navigate critical user flows (Tab and Shift+Tab keys) and ensure the navigation header doesn’t obstruct the content in focus

Why do website visitors prefer sticky navigation?

Though there are pros and cons for using sticky or fixed navigation, users tend to prefer sticky navigation due to its benefits from enhanced usability. Unlike fixed navigation, sticky balances usefulness with screen real estate — so users can easily access the navigation without it intruding on their overall experience.

Here’s a closer look at other reasons why users prefer sticky navigation:

• Optimized visual hierarchy — Sticky navigation takes up less screen real estate as the user begins to scroll and has low contrast with the website’s background. The web page still feels organized with the navigation, but the user can focus more on the page’s content since it’s given greater emphasis
• Dynamic navigation — Sticky navigation adapts as the user begins to scroll, which gives designers the opportunity to only the most relevant navigation options. Not only does this provide better intuition to the user, but it also reduces their cognitive load while sorting through the website’s information
• Increases confidence — Users feel more in control with sticky navigation because it’s always within reach and shows essential interactions, like important menu items and searches. This gives users a sense of confidence by giving them ready access to the navigation and allowing them to complete tasks without hunting through the website

Data holds up these claims.

Contentsquare, a product analytics platform, shows that actionable websites with sticky navigation have decreased bounce rates (users who leave a site after visiting a single page) and increased conversion rates (users who completed a desired task).

Since the ability to easily find information is important to users, websites that swap to sticky navigation can anticipate optimized performance from their analytics.

Conclusion

If you’re unsure whether to use sticky or fixed navigation, you need to test it. Run an A/B usability test with real participants and examine their success rate, time-on-task, and overall satisfaction with one navigation to compare results to the other.

At the end of the day, it’s important to pick a navigation type that supports both the user and business in meeting their goals.