Back to Top navigation is a feature I generally don’t notice in web design. They are generally just arrows, sometimes labeled, which get the user back to the top of the page. Sometimes they do not appear until you get to the bottom and others hover after scrolling a bit. In general, functional navigation is pretty boring and standard. Smashing Magazine has a great article (it may be 10 years old but trust me) on back to top navigation, collecting several examples and best practices.

On mobile, menus turn into a standard “hamburger” icon with three lines. This expands out into a more detailed menu view. Again Smashing Magazine has some great insight into the history of the responsive, mobile menu. It has a collection of related articles which are also great.

Here are 2 examples which break the navigation norms I have grown used to.

Build a Bear Workshop has a great example of back to top navigation being used in a fun way. When the user clicks the rocket ship, the page blasts off back to the top. The rocket animation is unique to this site. It is an SVG (scalable vector graphic) which means that the graphic is load with code and not a hosted image. This makes the load times quicker and the vector detail sharper.

Liberty Hall has a pretty unique take on the mobile menu. It effectively doesn’t have one. 

Do you remember the days where every website had a sitemap instead of a modern menu? A page of only links to the various content on the site? Generally, they are only used now for SEO (search engine optimization).

In this responsive website’s case, they used the footer as a sitemap style menu. Clicking the “Hamburger” Menu icon sends the user down to the footer. After a moment of initial confusion, I decided I loved this effect and loved that the content was simple enough to just list out like this. I will definitely be taking this inspiration further.

(And here is a link to an article from ux movement explaining the benefits of a footer sitemap.)