Simple, semantic, script-free, accessible navigation pattern.

What is this?

It’s a very simple UI pattern based on the navigation for this site. I’ve stripped back the styling and tidied-up the code to make it easier to put to use on small projects or for prototyping - if you want to use it.

Demo Download Source


The navigation sits at the bottom of your document with an id of “#main-naviagtion”.

In the header you place a ‘jump to link’ with a href of “#main-naviagtion”.

When triggered the navigation is positioned at the top of the viewport and slides into position using CSS transitions.

Within the navigation element there’s another ‘jump to link’ - this one has a blank href of “#” which triggers the navigation to close.


Browsers - Works perfectly in all modern browsers and IE9+. In browsers that don’t support :target or css transitions it degrades to a simple jump menu.

Bugs - If you find a bug email me or fork it on GitHub!

Improve it - Help make it simpler, more semantic and more stable.

View Demo | View Source on GitHub

More Projects