<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1059590667558673&amp;ev=PageView&amp;noscript=1">
Growth Driven Design

6 Examples of Great Website Menu Design (and Why They Work)

Written by Ryan Scott / September 24, 2015

is the Head of Marketing at Lean Labs. His experience ranges from higher education to SMBs and tech startups. When not doing digital marketing, he's sure to be enjoying some kind of nerdy pastime.

Your customers and prospects simply don't have the patience for confusing web design.

Kissmetrics reports that navigation has a bigger impact on usability and user experience than almost any other factor in how your site is designed. As consumers increasingly adopt technology to research, shop and communicate, expectations for fast-loading, easy-to-use websites are skyrocketing.

Some 40% of your prospects and customers won't return to your site if their first experience with it is negative - regardless of how great your products or services are.

Your website's menu is a gateway into your website, allowing visitors to navigate to the information they need. Modern consumers are notoriously impatient, and confusing navigation structure will cause your website's bounce rate (the percentage of visitors who leave immediately) to skyrocket. 

6 Examples of Stunning Website Menu Design

Before we get into our top examples for website menu design, we strongly suggest evaluating the way you approach your website design. In particular, do you have a "set it and forget it" mindset? 

If so, you should look into Growth-Driven Design (GDD). GDD is an iterative approach to web design in which optimization is a continual process. Check out what our founder Kevin has to say about GDD in the video below, then keep reading to see out six examples of stunning website menu design.



Squarespace's unique, dual-menu design offers first-time visitors the ability to access an abundance of information, without suffering from navigation overload. The primary menu features most commonly accessed pages while the secondary menu allows access to far more site pages. For brands with a complex product or an abundance of relevant information, the dual menu design is something to consider.




By far the most atypical menu in this list, Long Short Story manages to break many conventions of user-friendly menu design and still have an incredibly easy-to-navigate website. The simple, three-item menu at the bottom of the page works because the brand's site is so visual-heavy. Contact information is available upon scrolling, and the ability to sort and search is featured on internal site pages.

Free Download: 6 Reasons to Adopt Growth Driven Design



The denim brand's website features sidebar navigation, which is a rising trend in the usability realm. It allows users constant control over how they navigate the website. In the case of Edwin Europe, the side bar menu items are highlighted as visitors navigate throughout internal site pages. Sidebar menus are an excellent choice for mobile-optimized websites because they scale well and are easy-to-use on any device, from full-sized desktop computers to smartphones.




The term hamburger menu is used to denote the clickable, stacked icon that reveals hidden menus on full-screen websites. In the case of Bad Assembly, this web design tactic is used to its full advantage. The functionality allows the design to shine, appears well thought-out, and is consistent with the brand's visual-heavy approach.




Brand style guides have historically been presented as a large document, complete with headers. Uber's approach to digitally presenting their brand guidelines excels at presenting a large volume of information in an easy-to-use, intuitive format. Users can quickly and easily navigate through this simple, forward-thinking menu.




Sparked's menu features a slightly more traditional approach to navigation, with the modern twist of a hamburger icon. This works so remarkably well because the initially hidden menu serves to enhance the site's ultra-clean first impression.


Characteristics of Excellent Website Navigation

Above all else, a good website navigation structure is easy-to-use. This factor carries an immense amount of weight in how your brand is perceived by first-time website visitors. As user experience blogger Dmitry Molchanov highlights, your navigation can confuse and frustrate, or it can build trust in your organization. Usability experts estimate that some 50% of sales are lost because potential customers can't find the information they need. Here are some characteristics the world's most effective website menus have in common:

1. It's Intuitive

Consumers form first impressions of a website in just 0.2 seconds. The average prospect spends just 6.48 seconds interacting with a navigation bar. If your website navigation isn't simple enough that visitors can immediately tell where to find their desired information, your menu design is probably to blame.

The golden rule of web design for usability is "Don't Make Me Think," which is also the title of an excellent book on user experience. Your consumers don't have the patience to brain-power their way through hacking your menu structure. Using it should come naturally.

Website Audit Checklist

2. It's Deep, Not Wide

Unless your website consists of six pages, you can't cram every option into your primary navigation menu. Instead, design a "deep" menu, where each option represents categories. Each category can lead to an easy-to-use sub-menu of relevant options. To be clear, sub-menus aren't your only option, and website developers have creative freedom when it comes to presenting sub-categories of information. However, keeping your primary menu from appearing crowded is critical.

There is no hard-and-fast rule when it comes to a maximum number of options that can appear in your main website navigation. Conventional usability wisdom dictated between five and nine items. However, this rule can vary according to brand. Keeping your menu simple, and opting for a "deep" presentation of information with sub-menus instead of a wide, hard-to-use navigation bar matters.

3. Menu Items are Clearly Labeled

We've had clients who were opposed to using the word "blog" in their website navigation structures because that word has a negative connotation in their industry. We maintained that calling the blog section "articles" or "resources" would have a negative impact on user experience because it's less clear. Turns out, our internal data indicated it did. Always opt for simplicity and clarity.

The value of creativity in naming website menu items is pretty limited. Often, opting for anything less than the most obvious choice or most common primary menu items will frustrate site visitors. If someone is seeking your brand's contact information and it's buried in a sub-menu or named something really odd like "where to find our treehouse," you could lose the opportunity to win leads and sales.

Making the Best Navigation Menus

Clear and intuitive website navigation guards against frustrated first-time website visitors who bounce off your site to visit your competitor. A well-designed menu is a sales asset that can seamlessly guide your prospects throughout their research process. If you're unsure how your menu stacks up, take a moment to review it carefully. Better yet, run some usability tests with individuals who've never seen your website before. If there's a hint of frustration, consider redesigning with these guidelines and examples in mind.

Free Ebook: Why Responsive Web Design

Growth Driven Design

The set it and forget it mentality of traditional web design is flawed. With growth-driven design your site adapts to the changing market and you can watch your conversions improve month-over-month.

Get The Growth-Driven Design Strategy Kit


Every Great Growth-Driven Design Project Starts With Strategy

Base your website's strategy on your target audience's needs, problems, questions, and desires, and you will have solid foundation for success.

How do you ensure you've effectively addressed your target audience's key issues, and successfully provided the answers they seek, at each stage of their journey?

The Growth-Driven Design Strategy Kit provides the tools and process we use in our strategy workshops to help clients re-focus on the buyer journey and solve strategic failures through their website and messaging. 

More than just a templated document you fill out, this Strategy Kit goes deep into the foundational elements you need to launch a successful website that converts leads into sales.

In it find:

  • How to Complete Each Step of the Buyer Journey and Align Messaging 
  • Actionable Examples 
  • How to Use The Templates + Strategy to Enhance Your Website and Buyer Journey 
  • Our Client Onboarding Checklist 

Get your free Growth-Drive Design Strategy Kit and learn how to set your brand up for success with the foundational elements you need for an effective website. 

The Growth-Driven Design Strategy Kit will be available on August 30th. Sign up now to receive your copy as soon as it is released.

Grab Your Copy