Examples of Website Menu Designs

Navigation is an important part of your design that helps users to get to the website sections they need. From this article you will learn why navigation planning deserves a lot of attention. We will also show you best website menu designs worth looking at.

When visiting your website for the first time, users not necessarily see the main page. They could have clicked search results link in Google or come to look at the product or article somebody shared with them on social network. That’s why all site pages should contain navigation that will help users to learn about other sections and pages with information they might need. For example, when coming to ecommerce website, most users will be interested in learning about payment and delivery options.

Good website absolutely needs navigation since:

  1. It helps to understand what website is about (is it a shop, magazine or portfolio?) without looking at all the pages.
  2. Navigation helps website content to look logical, organized and well structured which leads to better user experience.
  3. It encourage users to stay on the website longer and check other sections.
  4. Navigation is good for SEO since it helps crawlers to index the content of your website.

We have grouped designs menu examples into three categories: horizontal, vertical and drop-down. But you can use several types of menu simultaneously if your complex website structure requires it.

Horizontal menu

Horizontal menu is used by websites with few sections and one-column layouts. It is usually placed below or above the header. Here’re several design options for this kind of menu:

Design using tabs:

Horizontal menu with tabs example

Design with items displayed as links or buttons:

Horizontal menu with underlined links example

Grey horizontal menu example

Green horizontal menu example

Using icons:

Horizontal menu using icons example

Highlighting current menu section is good for usability: users clearly see which section they are currently looking at:

Horizontal menu with a highlighted current section

The same is true for the item hovered with pointer. In this menu design example Notes section changes when hovered with pointer:

Horizontal menu with section highlighting

Horizontal menu with section highlighting in action

If the site is quite long, you can always display horizontal menu on top when user is scrolling down the page:

Website with fixed menu design example

Website with fixed menu design example scrolled down

The drawback of horizontal menu is that the number of links they can contain is pretty limited. That’s why sites with complex structure prefer to use drop-down menus or utilize both horizontal and vertical menus. For example, this website uses both drop-down hamburger menu and horizontal menu (in the form of tabs Magazine, Popular and Recommended):

Website with two menus

And here we see two horizontal menus with only the last of them droppping down. The logic behind it is the following: the first and the last item attract most attention.

Menu with one drop-down down section

And here horizontal and vertical menus are used simultaneously:

Horizontal and vertical menus used simultaneously

Vertical menu

Currently manufacturers favor widescreen monitors with width being significantly bigger than height. By putting menu on the side we free space for content on the top of the page. Vertical navigation is usually placed on the left since that’s how it is best viewed by speakers of languages with left-to-write writing.

Unlike with horizontal menu, tabs in vertical website menu designs are used less frequently:

Vertical menu with tabs

But vertical menus use links grouping more often:

Menu with links grouping, 	accordion menu

Icon usage is also common. In addition, sometimes vertical menu can be minimized to show only icons:

Collapsed menu with icons

Since vertical menus have more space for links, sometimes they tend to become hard to look through. In such cases you should look at drop-down menus as possible alternative.

Drop-down menus

Drop-down menus are good for websites with complex structure: online shops with a wide range of goods and a lot of product groups. With them you can hide subsections and keep the precious space uncluttered:

Large drop-down menu design example

Hamburger menu is also a type of drop-down menu that was originally used on mobile devices but currently can be seen on desktop versions of websites as well. It can contain a short list of website sections:

Small hamburger menu

Or a whole lotta of sections and subsections:

Large hamburger menu

Example above follows website menu best practices and effectively uses whitespace to make the menu easier to look through.

This type of menu has a drawback though — it can be too hard to notice. That’s why it is used for data of secondary importance. Nonetheless, designer has to make it visible enough to a user:

Drop-down menu with three dots

And when combining different types of menus you have to decide which parts would be dropping down and showing additional sections:

Menu with subsections

In big drop-down menus you can use graphical elements for guiding user’s attention. Example of using images in a horizontal menu:

Drop-down horizontal menu with images

In a vertical menu:

Drop-down vertical menu with images

We should also mention innovative website menu designs that aren’t widespread yet but deserve your attention. For example, navigation elements at Unlabel website are placed on all four sides of the page content:

Innovative menu design for online shop

This type of navigation isn’t suitable for PC or laptop screens since it involves too much mouse movement but this unique menu can be successfully used on mobile devices with smaller screens:

Innovative menu design for mobile

Fly-out menu idea is well developed in Wordie Wordpress template:

Innovative menu design for blog

Innovative menu design for Wordpress theme

Innovative menu design for Wordpress

Issuefly web app has a creative and unique menu with window navigation usual for operating systems:

Innovative menu design with OS like windows

Website menu design with windows

We hope that examples of website menu design from this article will help you improve navigation on your own website.

We, studio stfalcon.com, develop designs with functional and user-friendly navigation and will be happy to create a website or app for your business.

About author

Designer
Oleg was working in studio in 2011-2016 and have participated in numerous successful projects as UI/UX designer.

Related posts

Return to list Return to list