Creative Uses of Navigation

by Tom Kenny (@tkenny)

With the combination of javascript and CSS, navigation doesn’t have to be static transitions between content or just another standard boring menu. Below is a showcase of creative navigation that can make the user experience more interesting and memorable.


Tap Tap Tap smoothly slides in and out product information.


RZMota loads content into a section at the bottom of the page.


MB Dragan‘s navigation expands from the top to reveal sub-menus.


Red Crown Studio slides up and down to the relevant content.


Dragon Interactive uses javascript to fade the menu states between colours on hover.


Polar Gold has big typography as it’s navigation with content appearing below each title upon click.


branded07 uses a very simple navigation menu that has a follow effect when hovering from one section to another.


Apple tend to be at the forefront when it comes to web design and their horizontal product navigation is no exception.


We Bleed Design uses transparent PNGs overlaying a series of colours making the transitions between content fun and interesting.


Marketing Informatico uses an illustration of an iceberg and transitions between the sky and underwater.


Sursly is the portfolio of Tyler Fink who implements a very nice left-to-right sliding navigation.


Search Inside Video mixes a content sliding navigation with a progress tracker display.


Pikaboo displays navigation content in lightboxes.


Now Leaving Earth is a CSS Zen Garden design by G. Scott Olson and scrolls from left-to-right with the rocket that flies into space staying in place and the background moving.


Jason Read uses an accordion effect to display content.


Associated Flavors places it’s navigation in space, scrolling down to content.


Tomáš Pojeta is another site that transitions between sky and underwater with beautiful illustrations.


CSS Tricks displays a description about the destination upon hovering over the relevant tab.

kriesi implements an accordion effect directly into the navigation which reveals an icons for each section.


Jiří Tvrdek displays navigation in the form of oranges in a tree with the content in the trunk and underground.

Improve Your Eye for Great Design

Learn why the best designers make the decisions they do to design successful websites people love in this FREE eBook with 3 in-depth case studies. I’ve spent hours studying what makes these websites amazing, so you can use what works and focus on your design work. Subscribe now to get it immediately.

100% privacy. No spam. Completely free!

by Tom Kenny

I’m a freelance web designer and front-end developer with over 7 years of experience designing for the web. Follow me on Twitter here.