Wednesday, December 20, 2017

If you’re looking for a code snippet to create an awesome navigation menu for your site, look no further! Here are 20 free code snippets for navigation which you can use to create fixed, auto-hiding, vertical, horizontal, responsive, stretchy, mega menu navigation and more!

You will find almost any type of website navigation in this list. They all come with free code snippets, perfect functionality, and easy implementation.

The great thing is that most of these are also responsive, so they will look perfectly in different screen sizes.

Check them out!

Auto-Hiding Navigation

The Auto-Hiding Navigation is a simple navigation code snippet that auto-hides when the user starts scrolling down. Once the user starts scrolling back up, it becomes visible. The auto-hiding navigations have been around for some time now, especially on mobile devices. This UX pattern is simple and efficient. The hiding effect makes everything easier and creates more room for content.

Vertical Fixed Navigation

This example is a smart vertical navigation menu, which contains round indicators that turn into labeled icons upon interaction. The idea behind this concept that puts round indicators at work, was to give users a hint about the number of sections they are about to scroll through. Each round indicator is basically a content chapter and has its own title underneath.

Stretchy Navigation

Stretchy Navigation is a rounded navigation trigger that stretches and reveals items. This navigation was inspired from the shopping list concept by Hila Peleg. This team applied a similar idea that stretches the navigation and creates 3 different cases where the snippet becomes useful: 1) fixed navigation, 2) add content button and 3) edit content button.

Responsive Sidebar Navigation

This is a side, vertical navigation menu that is very easy to integrate into your design. It is also ideal for dashboards and admin areas and has a responsive design. Responsive navigations for big sites aren’t easy to build. If you are working on an admin panel, for example, you will probably need to develop a vertical menu with many sub-categories. This snippet will save you of all that trouble.

Mega Dropdown

This is a responsive and easy to customize mega-dropdown menu component. If you are working on a web project and you have too much content to use, then this mega drop-down menu will come to your rescue. It makes it easier for users to navigate through content.

3D Bold Navigation

This navigation is bold and slides in when active and replaces the current content in a 3D space. This is a really nice resource and a nice approach for a website’s navigation.

Secondary Sliding Navigation

This is a bold, secondary menu that slides over the main navigation and it can be a great alternative to the regular drop-down menu. If you’re looking for a way to emphasize the sub-navigation this snippet will come in really handy.

Full-Screen Pushing Navigation

This full-screen pushing navigation replaces the current content by pushing it off your screen. This was inspired by the beautiful Hello Monday redesign which captured this team’s interests through its full-size navigation.

Bouncy Navigation

This is also a full-screen navigation, this time with floating menu items. This example is ideal for a web app. In some cases, you might want to present users with a choice, especially if you have a large list of categories, without them losing focus on the web page.

3D Rotating Navigation

This is a 3D rotating navigation that is perfect for skeuomorphic designs. You can use this snippet to make your website’s navigation bold and grab people’s attention. This example works quite nice on agencies and portfolio websites to show off skills.

Mega-Site Navigation

This is a responsive navigation mega menu that is very easy to customize and has subtle CSS animations included.

Rounded Animated Navigation

This is an experimental full-screen rounded animated navigation that uses CSS and jQuery and expands within a circle. This effect comes in handy and it is also pretty cool.

Secondary Fixed Navigation

This is a secondary fixed navigation which was specially created for users who want a quick overview of the page’s content. This snippet makes it easy for them to move from a section to another. It uses a jQuery powered scroll.

Full-Screen Pop-Out Navigation

You can now easily grab users’ attention through a couple of call-to-action buttons before letting them explore the site’s full-screen navigation. This has recently become a common approach for many websites. The idea of hiding the navigations makes things easier and creates more space for content.

Vertical Fixed Navigation

This vertical fixed side navigation allows users to easily browse through the page. They can easily select which one the site’s sections they want to see first. This example is very useful especially if users have to scroll through a lot of content. It will make it easier for them to find what they are looking for. This vertical navigation provides a complete overview of the page and reduces the browsing time.

Smart Fixed Navigation

This is a smart fixed navigation that allows users to access the menu bar at any time. Like the previous example, this one is also designed for websites that have a lot of content to show to their readers. The smart fixed navigation provides a quick way to go back to the top. This is why this snippet has a back-to-top button. Why would users scroll back to the top when they can simply click on a button.

Secondary Expandable Navigation

This is a simple and responsive secondary expandable navigation that makes the menu accessible. Navigations should be accessible to any users and in some cases, you might not have enough space in your header to show all the menu items. That’s where this snippet comes in handy. You can use the secondary expandable navigation to show all the menu items that didn’t fit in the main one.

Full Page Intro & Navigation

In this link, you will find a really nice intro page that focuses on a full-width background image and an awesomely animated menu. This example has a nice blurred effect behind the navigation that is similar to the iOS effect. You will easily impress users with this snippet. For example, you can mix high-resolution background images with really nice typography.

Simple Responsive HTML Navigation

This is a minimalist and lightweight horizontal menu that has a responsive design which will look great across all browsers and devices. It was built with pure CSS.

Flat Tabbed Menu

This is a flat tabbed menu code snippet that will definitely come in handy and save you a great amount of time. This menu is also responsive and looks great on all screen sizes.