SALES / SUPPORT : 844-261-1206 (Mon-Fri, 09:00-17:00 EST)

The Ultimate Guide To Website Menus

By Eva Barnes , Aug 3 2017
Website menus

Thinking of designing a new website for a business? Can’t decide what type of Navigation to use? Don’t worry, we’re here to save the day!

save the day

Image Source: Freepik.com

A study by User Interface Engineering shows, that 60% of the time users aren’t able to find the information they are looking for, on a website. This badly impacts the website’s user experience, thereby stopping you from achieving conversion optimization. In order to eliminate this issue, it is vital that the site has a user-friendly menu. Thus, we have constructed a website menu guide, simple enough for a layman to understand.

Menus are a part of the overall website navigation, but digging deeper into that subject would just uncover a lot of unnecessary information; thus it’s best, if we just focus on the titbits that are important.

The most important aspect to ponder over before deciding which type of menu bar to use, is to settle on whether you want vertical navigation or horizontal navigation.

Vertical Navigation

Vertical Navigation entails that the options in the menu will be queued one below another in stacks.

Smokey Bones
Source

Film School Berlin
Source

Arbor
Source

Horizontal Navigation

While in the case of horizontal navigation, the options in the menu will be placed one beside another.

Pauline Osmont
Source

AWD Agency
Source

bern
Source

Once that is decided, the next step is to pick where to place the menu bar – the top, bottom, right, left or diagonally. Diagonal Menus are a relatively less archaic trend; this choice if executed perfectly, looks more appealing. However, Diagonal Menus are very hard to pull off as their placement can hinder with some design ideas the developer might have.

For the navigation placement, you can pick any option you like, depending on which looks the most appealing aesthetically, and works well with your general layout.

Adobe

While desktop sites can have any type or placement of menus, mobile sites and applications generally have a tighter niche; because smaller screens and the lack of cursors can prove to be a hindrance with some designs.

NY Times
Source

A site can have the same menu bar throughout, or different menus for different webpages. Furthermore, each of these menus, especially the Main Menu bar, can have various submenus to enable responsive mobile navigation.

Although there are ample options, some of which are stated below, yet developers sometimes create their own customized forms of navigation including Suckerfish and Transmenu.

    1. Mega Menus are most frequently used by e-Commerce websites because of the large amount of content and categories that need to be showcased. Generally, they are in the form of massive drop-downs that exhibit additional navigation links.

Pros

Cons

All options are visible, so no need for scrolling

Too distracting resulting in low readability and understanding

Highly organized; Can structure options in groups and sub-categories

Problems with display on small screens; parts of the menu outside the window cannot be seen and moving the cursor will close the entire menu.

Mega Menu
Source

    2. Drop-down Menus are preferable for Digital Libraries, e-Commerce, News and Educational sites. They have a hover option and a push or click option that is used to open a column or box with subcategories listed there. The click option however, is more preferable amongst users.

Pros

Cons

Clears clutter and frees up page space by organizing data under different subcategories

Excessive scrolling on mobile devices; as these menus are harder to navigate on small screens

 

It’s frustrating sometimes as users need to showcase dexterity and nimbleness while using it.

Drop Down
Source

    3. Drop-line Menus are very similar to drop-down menus, excluding the fact that opening a category from the menu bar will reveal a line instead of a box or column, which carries the subcategories.

Pros

Cons

Clears clutter and frees up page space by organizing data under different subcategories

Excessive scrolling; menus are harder to navigate on small screens

 

Readability is hard on mobile phones and iPads; making it difficult to view the whole line at once

Drop Line
Source

    4. Split Menus are mostly used for sites that need to display many categories, but don’t want to compromise on the look or readability. Theses menus are basically in two parts (present on different parts of the webpage), the main menu that showcases all the core elements, and often a sidebar that displays secondary items.

Pros

Cons

Easier to navigate

Takes up more display space

Can be used to display more options, without decreasing its readability

 

Split Menu
Source

    5. Accordion Menus are frequently used for Design, Art, Photography, Portfolios or Architecture websites because they can organize oodles of content, using dynamic switching or rather expandable sections.

Pros

Cons

Makes the structuring of content clutter free with its minimalistic design

If misused, can provide a horrible user experience

Diminishes the need for endless scrolling

 

Accordion Menu
Source

    6. Hamburger Menus, or push menus as they can be called, are the best choice for sites with bold messaging and plain sailing aesthetics. They are amongst the contemporary design trends and are ideal to keep the screen real estate far from being bestrewed.

Pros

Cons

It gives users the choice to ‘opt in’ unlike other menus which overwhelm users with an abundance of options.

Decreased discoverability of content, which can only be viewed if the option is clicked. The icon can easily be overlooked in some cases where the antique user can’t recognize the icon.

Allows focused branding of content; as it draws attention to what is already on screen instead of crowding it

 

Hamburger Menu
Source

    7. Sticky Menus aka. Anchor Menus, are fitting for News Sites, Portfolios or websites like Pinterest. They dwindle the need for users to put extra effort in scrolling all the way to the top, to access the navigation options. The menu is stuck to the top of the page, making it quicker to navigate and accessible to the user, at all times.

Pros

Cons

Saves time as it is 22% quicker to navigate

Design Limitations; Many design ideas have to be forgone that could clash with or not look with these menu

It is always on screen so no scrolling or effort is required to find it

Incompatibility with some mobile phone browsers because of particular JavaScript implementations and Fixed-position CSS

Sticky Menu
Source

Lastly, no menu can be created without finalizing its design and look. There are innumerable choices for this. The menu can be in the form of a single bar or individual buttons. It can bear text or icons; there can be animations or images, box menus or even hamburger menus. The bar can be flat, textured, wooden, bubble wrapped, indented, tabbed, lifted or bold. And don’t even get us started on the color schemes

Do leave your thoughts on this article, in the comments section below.

About The Author

Eva is a marketing major with a keen interest in web design. She is also an explorer and loves to dig into web trends from mobile apps to visual communication and everything in between. Feel free to send her your web design queries or blog related feedback in the comments below.

Leave a Reply