The problem with sticky menus and what to do instead

7 May 2023

Designers use sticky menus (menus that stick to the edge of the viewport) to make them easy to access on long pages.

But this fancy pattern hurts UX far more than it improves it.

Here’s why:

Problem #1: They constantly take up space

They get in the way of the actual content. And it’s worse on small screens where space is more limited.

Semplice’s menu sticks to the top

For example, Material Design’s floating action button always gets in the way of the content behind it.

Material Design example with button position bottom right over the top of the content

Material Design’s sticky button obscures the content beneath

When zooming in, the size of the sticky menu can increase to a point where there’s little space for the content.

Medium’s website when zooming in and out shows how the content withint he menu gets obscured

On mobile, sticky menus may disappear upwards. They may also become misaligned or slightly cropped.

Problem #4: They’re difficult to access

If a sticky menu is taller than the content and viewport, users will be unable to access the bottom of the menu (in some browsers).

Even if the content is taller than the menu, users still have to scroll to the bottom of the content to see the menu which is long winded.

MOJ Pattern page with a sticky menu applied shows that you have to scroll all the way to the bottom of the content to reveal the bottom of the menu

MOJ Patterns with a sticky menu applied

You could add an inner scroll bar to the menu. But multiple scroll bars are hard to use.

Problem #5: Internal page anchors feel broken when clicked twice

Some sticky menus contain links that take users to content down the page.

When the user clicks the same link for a second time nothing happens, which makes the interface feel broken.

Clicking a sticky CTA for a second time feels broken

Sticky menus are always visually accessible, but in reality are far away for keyboard users navigating with the tab key.

Medium’s article list with a focused heading appears visually close to the top of the page but is actually far away in terms of tab stops by keyboard

The currently focused link feels close to the menu, but it’s not

Users who navigate back up the page by keyboard may end up focusing on a link that’s obscured by the sticky menu.

GOV.UK Step By Step page with the focused link obscured by the sticky header

The focused link in the top right is obscured by the sticky header (credit: GOV.UK)

Keep pages short: Sticky menus are a symptom of long pages so fix the root cause.
Just let users scroll: It’s a myth that scrolling is a problem. Even on mobile, the top of the page is a flick or 2 away mostly.
Put relevant links in context: For example, add a subscribe form to the end of a post or add a CTA to a pricing section.
Use a back-to-top link: They’re relatively unobtrusive (but only do this once you exhaust the other options).

Join 4000 UXers in my weekly newsletter. Every Sunday morning, you'll get 1 design tip that shuns ‘best practice’ and actually works. Mostly about forms but not always.