Navigation menu examples for website (Design and code)

Ideas for better menu designs

Published in

Bootcamp

4 min readApr 11, 2022

Introduction

Website navigation menu is an essential part of UI. It’s like a foundation of any website. That’s why you shouldn’t ignore this article if you are a web designer or web developer.

There is no so called “best website navigation”. Menu always depends on website. For ex. For some websites it is enough simple horizontal menu. For more complex websites you may need a large mega-menu. Here is tutorial for megamenu with bootstrap. Most of e-commerce websites has multi level menus like treeview. so it depends on your website’s structure and number of pages.

How to design better website menu

First of all you should create a sitemap or structure tree of your website based on importance of every link. Some links should be always visible at the top header or at the bottom — footer, but some other links are linked with other pages. For example: Pages like — About, Products, Plans, Contact, and Blog pages should be visible at the top header. To access the History of company and Team pages, you need to click the About page first, then go to inner pages.

In this tutorial I will share all possible menu variants with examples. These are mostly horizontal menus. These information are useful for both web designers and front-end developers. At the end I will share a link to download html css code.

#1. Simple horizontal menu with dropdown

You’ve already seen such menus everywhere on the internet. Dropdown menu can opened by click or on hover, or both. On bootstrap framework it is clickable only. But you can make it open on hover with few line of css code.

#2. Multi level menu design.

Multilevel web menu is also called tree-view menu. When you open a dropdown and bring mouse cursor one of the item of dropdown, another dropdown appears from left or right side. Here is example image:

#3. Megamenu design samples.

Mega-menu is mostly used on e-commerce sites. It can show all catalogue of products on single dropdown window. You can put large content inside mega-menu, like showing all categories of products, many links, banners inside it. It is a bit complex menu to create and make responsive. Here is some design examples of mega menu:

Here is another megamenu style for ecommerce web sites, each category list has its heading and icon:

Ecommerce categories dropdown mega-menu idea

Even, you can show product promotions or offers inside mega-menu block. Here is sample:

#4. Mega-menu with tab menu inside

That kind of megamenu is mostly for e-commerce websites, It is same as above large full width megamenu but, It has vertical (sometimes horizontal tabs). Tabs can be clickable or hoverable as well. Here is example:

#4. Dropdown with large submenu.

Another variant of menu is dropdown with large submenu on the right side.

Ecommerce menu dropdown sample screenshot

Example of drop-down mega-menu for e-commerce image

#5. Large dropdown menu design.

It is same as normal dropdown but it has larger width, Similar to Ebay.

Conclusion

Helping visitors to navigate throughout website pages should be a priority for every website. The website menu design should work well for both desktop and mobile users. If you are web developer or front-end developer, then download a ready to use code:

if You are designing a Navbar for Website, Admin, Or any vertical, or horizontal menu, I’d recommend using ready-made Design Systems or UI kits rather than spending too much time on it. Try: finalui.com