One of the most important elements when designing a website to be mobile friendly is of course, the navigation. If you’re looking for excellent examples of navigation menu design, here’s some of cool techniques for handling navigation in responsive designs.

Greedy Navigation

A responsive navigation menu that stacks items into a dropdown menu when they overflow. A hamburger style button with count badge appears when there are hidden items to reveal.

Hexagon menu

Menu in the shape of an hexagon. The menu items are featured on the burger click. A hover effect features title and subtitle. It uses CSS3 2D and 3D transitions.

Dropdown

Smooth circle animation for menus

A different approach

Click the hamburger icon and watch as the track list springs into the window.

Simple pulldown/hamburger menu

Just a really simple, reusable, pulldown menu that closes automatically with minimal code and opens with slick animations.

Navigation reveal idea

Collapsible nav with burger menu, no JS

A collapsible navigation with a burger menu that animates into a close button and all without JavaScript. Boy, what a bargain!

Atomic Hamburger Menu CSS

Pull Menu

Just pull down and release to jump between pages.

iOS style sliding menu

Here’s an easy way to create an iOS style, side sliding menu.

Responsive navigation menu

The menu is designed to handle an unknown number of menu items using only css – for example in WordPress sites, where heights for animations will always be unknown. Menus/submenus are shown and hidden with css, javascript is only used to add a couple of classes on click. This could conceivably work using pure css and :target if you’re particularly keen to avoid javascript altogether!

Responsive CSS3 Side Navigation Menu

Media Queries Transitions (resize the window slowly to see the transitions), nav items slide out on hover when it collapses on smaller screens.

Pure CSS off-canvas menu with flexbox

Flexbox allows the content area to resize to fit the remaining space in the viewport when the menu becomes visible and takes up a chunk of the width.

Touch device jelly menu concept

Use PaperJS for the canvas graphics and TweenJS for the animations. Both of them tend to freak out some folks, but don’t worry, they are really intuitive and easy to understand.

Line Menu Icon that Expands Into Actual Menu

It’s smallen-ized through CSS transforms and then expands when you click on it by adding a class. Some elements are hidden when small to make it seem like a simplified icon.

The Backside Menu Flip

A responsive navigation pattern whereas the nav (under 768px) is located on the “backside” of the page content.

Offcanvas sidebar menu with a twist

Menu items will flow out of container given window height below roughly 700px.

Material Design Hamburger

Android’s Material Design hamburger animation built in CSS (with a sprinkle of JS).

Side Menu Staggered Animation

Full-Screen Menu Overlay

A full-screen menu, showcasing your brand and website navigation. Built using SCSS and vanilla JS.

Elastic SVG Sidebar Material Design

Completed without any animation libs, just simple js with requestAnimationFrame and custom easings.