UI Design Spotlight: Exploring 7 Types of Navigation Menus

One of the more interesting ways that the Gate 39 Media team customizes designs for clients seeking a new website is through carefully-crafted user interface (UI) design. Creating UI for a website includes how the user is prompted to move through the website, including the main path through which a user explores the underlying pages of a website: the navigation menu.

The main navigation is often presented in a global navigation area —  meaning that it remains the same across the entire website. This area tends to include the site logo and functional navigation such as login and search links.

The styles for navigation menus are functional, supporting a user’s experience, but are also inherently part of the design itself (and are, thereby function AND form). Here, we explore the different types of navigation menu structures, describing and displaying the usage factors for each menu type:

1. Standard Horizontal Menu

The most common navigation menu style is a horizontal text-based navigation. This type of navigation presents a horizontal list of the main site pages, typically named in one or two words. It can either be created with graphics or straight HTML text, both of which can have rollovers for a bit of user interaction

2. Hamburger Menu

Originally created by Xerox product designer Norm Cox in 1981, the hamburger icon was originally designed to simply indicate a list within the Xerox system. These days, the hamburger menu or three-line menu is a compact solution often seen on mobile responsive websites that hides the traditional file menu until clicked. Also referred to as a Flyout Menu, this dynamic menu option also provides a high-end, stylish and subtle solution to a desktop version of a website where an ultra-modern minimalist design would take center stage. We’re seeing the hamburger menu trend more into desktop website designs as desktop/mobile designs converge.

3. Mega Menu

Often seen in online retail websites and those businesses offering lots of options in one menu, a mega menu is a drop down interface triggered by the user hovering over a link or defined area. This dropdown usually shows all options in one main, mega-panel and often groups related topics into categories. Mega menus risk overwhelming the user with options and are tricky to elegantly display in responsive mobile views. The mega menu is not our go-to, but they do have their place.

4. Scroll -Triggered

Scroll-triggered web effects have grown in popularity by bringing the user experience to a new interactive level of online viewing. These user interface effects are typically seen in parallax effects or in animations, which are (you guessed it) activated by the user scrolling. In terms of navigation, scroll-triggered effects offer a depth and animated experience that can make navigation simple and fun to interact with. We’re a fan of using scroll effects judiciously as too many instances of this can be overkill and ruin the user experience.

5. Vertical Sidebar Navigation

More prevalent in website designs of a decade ago, a vertical navigation does not produce a logical hierarchical structure for the even treatment of links, nor for sites that have any depth. Additionally, this vertical navigation unnecessarily uses up precious screen real estate.

While there are select exceptions where vertical navigation can work on inner pages of a website, vertical navigation is an out-of-date method on primary top-level navigation.

6. Hover Activated Dropdown Menu

A semi-controversial navigation menu type, a hover activated dropdown menu assumes intent of the user and provides additional menu options when a mouse moves across a link. Just because a user is hovering over a link doesn’t necessarily mean they are intending to actually interact with it. With a well crafted UI, we do implement this in primary navigation on desktop versions to create a streamlined experience. In mobile, a hover activated dropdown is more problematic.

7. Sticky or Fixed Menu

A popular trend in UI navigation and one that we implement often, the sticky or fixed navigation menu does not disappear when the user scrolls down a web page. Sticky navigation is typically used in websites where the main call to action elements are within the primary horizontal navigation bar. Also referred to as persistent navigation bars, these menus work well to give a user a sense of control on actionable websites and on longer web pages.

While navigation menus continue to evolve as digital habits evolve from online to mobile, in the end, selecting a navigation menu style should always be done with one key objective: to provide your website’s users with the most streamlined experience possible.

Considering a redesign of your business website? Let’s talk.