Hamburger Footer: Reaching the Bottom of Infinite Scroll

Published

Abstract image of hamburger menu with a real hamburger being clicked

Infinite scroll (endlessly scrolling pages) can be annoying when you want to get to the footer section of a site. A common technique is to move the footer to the bottom of the sidebar โ€“ Twitter do that... but what if you don't have a sidebar? What about putting the footer in the header navigation?

Here's a couple examples of it, and some more techniques for making footers reachable with infinite scroll active:

Update: This article is a collection for inspiration, and does not address accessibility issues.

Footer in the Header Nav

Screenshots showing Unsplash's footer links in an expanded hamburger menu
Footer in nav on Unsplash

Unsplash Menu

I first noticed this browsing Unsplash - always a good source of UI inspiration. Whilst infinite scrolling through beautiful photos, the footer is always reachable inside the hamburger menu of the main navigation ๐Ÿ‘‡

Buzzfeed Burger ๐Ÿ”

After seeing this, I wanted another example - 'who else uses infinitescroll?'. Buzzfeed, obviously! They have a 'Load more' button, but the footer is still inside the hamburger:

It seems to work well - the footer often consists of important links, so merging it into the header isn't a bad place for it?

Today, footers have matured and now serve as an important reference point for people as they complete a variety of tasks on websites.Footers 101, Therese Fessenden

Either way, I'm not sure how new or popular the 'footer links in header' pattern is, but here are the more traditional methods:

decorative section divider

Load More, Sticky Footer, or Pagination?

Different sites have different needs - here's 3 traditional options that we may have been more used to seeing in the past:

Load More Button (Dribbble) ๐Ÿ€

After scrolling to the bottom 3 times, the Load More button is shown, giving you chance to reach the footer:

Dribbble load more button - when button clicked, button changes to bouncing ball loading state
Dribbble load more

Sticky Footer (Airbnb)

Airbnb's footer in the new site is always present, sticky along the bottom, and also expands on click to show more links:

Just use Pagination? (Etsy) ๐ŸฆŽ

"My lizard brain is no match for infinite scroll". As Alex Ellis writes, sometimes infinite-scroll can suck you into scrolling forever. Even for content-heavy feeds, you can still show lots of content while just using pagination, keeping the footer where it's traditionally shown. Etsy is a good example of that:

decorative section divider

A new norm for a new behaviour?

In Footers 101, Therese Fessenden summarises that the presence of a footer is critical, and are found at the bottom of almost every web page โ€“ below the main body of the content.

She goes on to write how people use them as a last resort to locate hard-to-find content, and intentionally scroll to it. Maybe these days, people are used to infinite scroll websites, and behaviours are changing to look for those links elsewhere. Maybe the header works as that place? Here's an example using both:

Sixth Tone website - 2 screenshots side by side showing the navigation open and closed.
Left: Footer in the traditional position with menu closed | Right: Menu open, showing footer also within header nav (Sixth Tone website)

You made it to the end.

Catch me @graeme_fulton on the tweet site, and sign up to the Prototypr newsletter ๐Ÿ’Œ for more ideas. โœจ

[Update 04/06/2022]: As Adrian Roselli has pointed out (see comments section), sidebar and sticky footers are a problem for keyboard-only users due to scroll behaviour. Read his article on keyboard-only scrolling areas to learn more.

Comments

If you have a comment to add, tweet @prototypr or @graeme_fulton. Also, join the Prototypr newsletter - this is an independent and open platform with no paywalls, made by designers for designers.