Navigation design showcase: Choosing the right navigation pattern for your website

We’ve previously covered how to develop effective navigation for your website, but now it’s time to focus in on the end result: the presentation.

Choosing the right navigation design depends on the unique needs of your website. To make a more informed decision when selecting the best approach, it’s helpful to be aware of the different types and styles of navigation available to you.

In this article, we’ll explore the most common navigation design patterns, including real-life examples of each navigation type.

Horizontal

This is probably the most popular type of navigation and consists of links somewhere along the top of a website, typically along with the company logo. This is a familiar pattern to users, and that familiarity makes it an excellent choice for most sites since it aligns with user expectation of where site navigation will be.

TBH Creative
TBH Creative uses a horizontal navigation pattern.

Hubble Contacts
This pattern can also be switched up a bit. This example breaks up links with the logo in the middle, which is another popular horizontal navigation approach.

Vertical

Many sites opt for a vertical placement for the primary navigation instead. This typically consists of navigation items listed from top to bottom down the side of the page.

Flats Life
This website uses a simple vertical navigation pattern.

WNC Inc.
The vertical navigation on the site is multi-level and uses icons for added interest.

Subnavigation

If a website is large enough to warrant sub-navigation, the horizontal and vertical patterns can be carried over to this as well. Sub-navigation can be in the same section as the main navigation or in a different area of the page entirely.

Red Rooster Coffee
On shop sub-pages, the sub-navigation displays in its own panel underneath the header.

OrthoIndy
The OrthoIndy website displays a collapsible side navigation on interior pages.

Dropdowns

Dropdown navigation is often used to more easily guide users through page levels. Dropdown menus can deter users from top-level pages and require particular attention on mobile devices, so this navigation pattern should be chosen carefully. They work best on large websites, such as e-commerce sites with a multitude of categories. Dropdown menus with extensive choices and content are commonly referred to as “mega-menus.”

adidas
Many e-commerce websites like Adidas use the mega-menu dropdown approach for better navigation through categories.

PayPal
PayPal uses dropdown menus with additional descriptions for each navigation item to help users in finding the right information.

Breadcrumbs

Breadcrumb navigation is used to show a user where they are within a website’s structure. This navigation pattern can significantly improve the user experience on websites with multiple page levels.

Etsy
Breadcrumbs are great for showing where a user is located within a product category.

WWF
The WWF website displays breadcrumbs on their third-level pages, giving users an easy way to get back to the top-level page.

Fixed/scrolling menu

A fixed menu pattern can be helpful for sites with long pages. This consists of a navigation that remains “fixed” to the top of the page when scrolling down. Another popular approach is for the fixed navigation to appear only when a user starts scrolling up the page. This allows users to continue on to other pages at any point while browsing a page without needing to scroll back to the top for the navigation.

Cacao 70
A fixed navigation on scroll gives users easy access to the navigation at all times.

Baker Hill
An alternate approach is to display the fixed navigation when scrolling up only, which helps keep the user's primary focus on the content, especially on smaller screens.

Hidden menu

If you’re taking a mobile-first approach to your website, you might consider using a mobile-focused navigation pattern for all devices. For example, hidden navigation that is displayed only when a user clicks to open it is a growing web design trend. This can be an effective design pattern if your users are savvy enough to not be confused by the lack of initial navigation.

Rowan Made
The “hamburger” menu icon is a popular approach to opening a navigation and is now familiar to most users.

No navigation

Yes, that’s right—some websites skip the main navigation altogether! While this is a rare approach, it can be useful for small websites that aim to focus in on content with minimal distractions for the user.

SquareSpace
SquareSpace has no main navigation outside of a prominent call-to-action, which help users to focus on the desired action of the site.

Club of the Waves
In place of a main navigation, this site uses links throughout the content to get to the interior pages.

Creative navigation

If your audience and web strategy allow for it, you can also break away from the traditional navigation patterns and really get creative.

Jardan
Full-page style navigation is a trendy pattern. On this website, the navigation displays when hovering over different sections of the page.

Weekend
The main navigation on this website is located at the bottom of the page, a twist to the traditional horizontal navigation pattern.

Coulee Creative
This interactive navigation shows how navigation can be both functional and creative.

Learn more

Hopefully, now you have a better understanding of these popular navigation patterns and what approach will work best for your website. If you’d like to learn more about website navigation, check out the following articles:
Ready to revamp your website? Start here
Kayleigh

About the author | Kayleigh Circle

Kayleigh is a web developer at TBH Creative, specializing in front-end development and responsive design. She likes to blog about a variety of web design topics, including design tips, the latest trends in the industry, and how to make your website more successful.

View more posts by Kayleigh

Receive articles in your inbox