DEV Community

Cover image for Designing navigation menu for web
Vosidiy
Vosidiy

Posted on • Updated on • Originally published at bootcamp.uxdesign.cc

Designing navigation menu for web

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.
Website sitemap for menu
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.

Basic horizontal menu

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:

Dropdown website menu example

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:

Simple mega-menu sample

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

Ecommerce dropdown mega-menu idea

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

Large Mega menu with banners

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:

Megamenu with inner sub menu

5. 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.

Large dropdown menu for website

Ebay menu categories design sample

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.

Follow me:
https://www.linkedin.com/in/vosidiy

Image description

Top comments (1)

Collapse
 
robertandrews profile image
Robert Andrews

Really good.