Navigating a website can be easy or tricky, based on how the website navigation is structured.
When shoppers come to your eCommerce store, they want to quickly get the lay of the land and find what they want.
Therefore, when it comes to designing a site, while you should experiment, it's important to choose the right website navigation menu.
Hidden menus, cluttered feeds, and unfamiliar icons confuse customers and prompt them to leave the site.
There are many website navigation menu examples for an eCommerce store but it’s important that you choose the one that aligns with your store and makes customers’ life easier.
Jump to:
Horizontal Menu
Vertical/Sidebar Menu
Hamburger Menu
Mega Menu
Sticky Menu
Faceted/Guided Navigation
Footer Navigation
Which website navigation menu to choose from and when? What navigational approach works for you depends on several factors, such as:
What your site is about The amount of content it has How the users engage with you How they access the site (desktop/mobile) Horizontal Menu A horizontal menu is the most commonly used website menu bar. It has a one-column layout with sections placed above or below the site header. Sometimes it’s paired with a website dropdown menu to reveal a secondary level of navigation items.
Here’s how to spot a horizontal menu: It’s often located above the fold and adjacent to the company’s logo The items are displayed as tabs, links, buttons, or icons See this example that uses tab navigation:
Here, the items are displayed as links:
On the other hand, this navigational design uses buttons:
Pros of horizontal navigation menu for eCommerce It’s the most familiar and conventional navigation. It allows designers to integrate full-width-images into the body of the page. It’s easier for customers to navigate because it’s clean and clutter-free. Cons of horizontal navigation menu for eCommerce The biggest disadvantage of top horizontal bar navigation is that it limits the number of links you can include on the page without resorting to sub-categories.
This type of navigation works well for sites with fewer categories and pages but for sites that need complex information, it’s not an ideal navigation menu option.
In such a case, you’d benefit from a website dropdown menu or both horizontal and vertical menus.
Will it work for your online store? If you need to display only 5-12 items on the main menu, this website menu design works perfectly.
It’s generally a common option for single-column website layouts and can be aligned left or right.
You can combine it with dropdown sub-navigation or vertical menus to have more information on the website.
Here are some examples of horizontal menus that we love:
1. Apply a ‘focused’ side menu navigation (Peach & Lily) Peach & Lily has a horizontal menu with different navigation items. What’s interesting is they also include a vertical menu design above the navigation bar—Shop and Services.
When you click on the Shop button, the following window appears:
2. Add an overview ‘filter’ in the drop-down menus (ASOS) ASOS takes it a step further with a website dropdown menu. They include relevant icons to make the navigation visually appealing.
Vertical/Sidebar Menu While the majority of online retailers choose a horizontal menu, some retailers offer a wider variety that can only be covered under a vertical menu or a mix of both.
Typically, in a vertical menu, the navigation items are arranged in a single-column layout from top to bottom. It’s often found at the top left-hand side, before the main content.
As per usability studies, vertical menus perform better on the left than on the right.
Some websites use a vertical menu with other website menus when they have more links to include.
Pros of Vertical/Sidebar navigation menu for eCommerce Can fit a lot of menu items
Vertical menu allows you to include as many navigation items as you want without running out of space.
Easy to scale and alter
A vertical menu is ideal for you if you frequently add new categories or change menu names on the website. It allows you to add or remove pages without affecting the site design.
All content is visible
Unlike the horizontal menu, this type of website menu lists all website pages that users can click to get the information they need. This makes vertical navigation much easier to navigate and a great option for single-page websites.
Fits all screen sizes
Whether you access the site from desktop or mobile, the vertical menu opens up to the same width and height, and does not affect the site’s design and usability.
Cons of Vertical/Sidebar navigation menu for eCommerce Users are trained to read horizontally
Since the majority of online retail stores have a horizontal layout, most people are accustomed to reading from left to right since it’s accessible and habitual to them.
The right side gets more clicks
Since users read from left to right, they’re likely to take action when they reach the end of the navigation bar and click the options on the right more often.
Therefore, a vertical menu situated on the left-hand side might get fewer clicks than a menu placed horizontally.
They can get cut off
Since the vertical menu is long, the user might not be able to see all of it together. A horizontal menu works better because it covers a wider space on the screen and doesn’t get cut off.
Do check this: Promote Your Online Store in the USA - 17 Unique Ideas
Will it work for your online store? If your website has many links to showcase, a vertical menu is ideal for you.
It allows to quickly scale and configure website navigation menu as per users’ preferences which is suitable for complex apps and websites.
If you are designing on mobile, choose a vertical menu since it takes less space and allows more information to fit in.
Here are some examples of vertical menus that we love:
1. Show a minimalist vertical menu (Stellar) Stellar Beauty’s website menu bar features a minimalist vertical menu with main categories highlighted on the sidebar. Users can hover over a category to reveal more options. Clicking on them will take the user to the desired page with more information.
Recommended reading: eCommerce Website Optimization: 28 Improvements You Can Make Today 2. Find a balance between horizontal and vertical (Pipcorn) This website’s menu bar combines the functionality of horizontal and vertical menus for a delightful user experience. Certain horizontal navigation items such as Shop and About Us have vertical dropdowns to reveal more information.
Hamburger Menu Spoiler: It’s not a menu with delicious pork recipes that you’d find at a neighborhood joint. It sits at the top left or right corner of the website/app with a three-line icon that expands into a wider dropdown menu.
Need context? Check here:
See the three horizontal lines in the upper left corner? That’s a Hamburger Menu.
💡Bonus: The hamburger menu website was first discovered in the 1980s by Norman Cox as a part of the interface for Xerox Star. It wasn’t popularized until UI/UX designers in 2009 were looking for a way to fit in a lot of information on the tiny screens of smartphones that save space and display more information.
Pros of hamburger navigation menu for eCommerce Easy to recognize
Hamburger menu— like its counterpart—Hamburger has been around for years. People immediately recognize it on apps, websites, video games, computer software, etc.
Since the average user stays on the page for 10-20 seconds , it’s important to make the page easy to comprehend. This website menu design allows familiarity and conventionality so users don’t have to figure out how to work around this navigation.
Clean Navigation & UI
It’s common knowledge that when a user is presented with too many choices, they become needlessly confused and frustrated.
Heard of the Jam Experiment ?
As per this study, when customers were offered 6 jams versus 24 jams on consecutive days, they were 10x more likely to purchase on the day they were presented with fewer options.
The hamburger menu website offers a condensed design that doesn’t show a lot of information upfront and lets users decide how they want to navigate the site.
This means users can easily digest the target message without getting bogged down by distractions.
Holds secondary functionalities
This website navigation menu is ideal when your core pages are visible on the site, but you also need to include a few secondary options or subcategories.
For example, it may not be important to include the About Us or Contact page on the main page. In that case, you can hide them behind a hamburger menu and save screen real estate.
Cons of hamburger navigation menu for eCommerce Poor display of sections
One of the major gripes with the Hamburger navigation menu is that it can make the information within the menu less important.
Especially when a lot of information is central to the user’s experience, relegating it under a hamburger menu doesn’t help.
Low engagement
Hamburger menus have lower click rates than other website navigation menus. Users tend to focus on the information in the middle and then scroll down.
Many assume it’s additional information, so they don’t bother going through it unless they want to find out more.
Another reason for low click rates is that the icon is hard to reach.
Phones are getting bigger, and it becomes increasingly difficult to reach the uppermost left or right-hand side corner where the hamburger menu is situated.
Users want to navigate the site as easily as possible, so if the hamburger menu requires a grip adjustment from another hand, they aren’t goin’ for it.
Will it work for your online store? Depending on how well you have designed the hamburger icon and how easily customers can navigate it, it could be a boon or bane for eCommerce stores.
If you can make the menu easily visible, clickable, and prominent, the menu will stand out easily, and the customers will be able to navigate the site.
Some examples of hamburger menus that we love:
1. Sync banners with product categories (Zara Home) Look how well Zara optimizes their hamburger menu. They tuck in all product categories inside the menu with rotating banners of the product categories on the landing page to make the site visually appealing.
2. Show all the categories and subcategories in the hamburger menu (ULTA Beauty) ULTA Beauty has its main menu lined up horizontally and a hamburger menu that opens up to more categories when a customer clicks on it. Some elements that make the landing page more lucrative are popping color schemes and offers such as ‘free shipping’ and ‘sale’
Mega Menu We all have seen mega menu navigation online. It’s pretty common and especially useful on sites with a lot of links.
Essentially, it’s an easy navigation menu where all options are displayed upfront and laid out horizontally and vertically.
When a user clicks on a category, they can see all the sub-categories at once. No extra clicks, taps, or scrolling are required.
Here’s an excellent example from Bloomingdale's to show you what a mega menu looks like:
Pros of mega menus for eCommerce: One or more big panels divided into groups of navigation options Navigation items structured through layout, typography, and icons Everything visible in a click No extra scrolling, tapping, or hovering Everything in one place
For bigger sites with too many categories, mega menus offer a structured layout to include all the pages within the menu. Users can quickly glance at the options and choose the one they’re looking for.
Super easy to follow
Mega menus offer much more space than a standard drop-down menu.
The design enables the site to be divided into categories with sub-menus to maintain proper navigation across the breadth of content.
This makes the menu more accessible where a user instantly understands where to go to find the information they’re looking for.
Can add images and icons
One of the limitations of using a standard drop-down menu is that you have many texts and links that can be bland for a customer browsing the site.
Mega menus allow visuals to be added to the fold to catch users’ attention and add visual appeal.
Quirky illustrations and icons make the navigation interesting and allow customers to stay longer on the page.
Cons of mega menu for eCommerce Whether your website needs a mega menu depends on its size, nature, and objectives.
You will benefit from a mega menu if you have too many categories to offer.
However, if your website is relatively small and doesn’t need as many links, a standard drop-down menu will suffice.
Mega menus are typically used by online retail stores with a large number of categories. The menu allows to group products into subcategories to direct the users to the relevant information easily.
Depending on which category you fall under, you should decide whether you need a mega menu on the site or not.
How to make it work for your eCommerce store: Make it easy to scan
Make the layout super quick to understand so customers can find what they are looking for. Consider typography, bold text, and link spacing to make the navigation powerful.
Don’t add categories if they don’t add value
With a mega menu, you can fit as many links as you like, which can overload the customers with information and lead to choice paralysis.
Therefore, make sure to design the menu carefully and only include categories that can serve the purpose of customers getting what they want.
Carefully choose your menu options
It’s important that you think about the order in which users want to navigate the site after analyzing shoppers’ data.
Prioritize your menu options accordingly to make the site lucrative for customers.
Time your mega menu to eliminate frustration
Another thing to consider here is how the mega menu gets triggered. Do users need to hover over the area or click on the link?
This is important so the users avoid opening and closing the menus unintentionally.
Jakob Neilsen recommends a short delay of 0.5 seconds after hover to get the menu triggered. Another option is to activate the menu on a click, though most retailers opt for hover.
Here are some examples of Mega Menus that we love:
1. Write product-specific category titles (Adidas) Adidas’ menu uses short titles with emboldened parent categories to make the menu easier to comprehend. In addition to a highlighted structure of categories, they include relevant visuals closely associated with the topic.
Bonus: See those CTAs on the top? Free delivery, easy sign-up, and quick returns make it easy for customers to shop from the site.
2. Display your content alongside categories (Net-a-Porter) Net-a-Porter uses a different layout for each section. On the left hand, they have categories listed in a vertical menu format. In the middle, there are links to a couple of lifestyle articles and on the right-hand side, a cover story.
See how their editorial section is more image-heavy compared to other sections.
3. Highlight discounts and deals in the menu dropdown (Macy’s) Macy’s is an interesting example with sections to shop as per collections such as business casuals, contemporary trends, weddings, etc so customers with specific needs can directly head to these sections. Even better are the offers and discounts on the navigation bar to hook customers to the site.
Sticky Menu Sticky or fixed menus keep the headers in one place on a website or app while the user scrolls through the rest of the page.
They make the navigation quicker, browsing simple and easier, and improve the discoverability of the elements in the header with an increased possibility of users clicking on them.
Pros of sticky navigation menu for eCommerce Faster Navigation & More Control
Smashing Magazine conducted a study to determine if sticky menus work. Their analysis found that sticky menus were 22% quicker to navigate than other navigation options.
Using a sticky menu could cut off 36 seconds from a five-minute website visit.
This means that a user spent much less time navigating the site because the options were right in front of them the entire time.
More Preferred By The Users
The same study also found out that when two websites confronted the users—one standard website and another with a sticky navbar, hundred percent of the participants preferred the sticky navigation.
Most of them didn’t even know the difference between the two sites but felt they spent less time clicking on the website with a sticky bar.
Cons of sticky navigation menu for eCommerce Although many people prefer sticky navigation, the limitation of the menu is that it takes up too much space. While that might not be an issue for desktop users, it is for those accessing the site on mobile.
It can also be trickier for developers to create the mobile website menu design since it comes with technical challenges and on-site issues such as slow page speed.
Sometimes a site may not need too much scrolling or has a lot of images and icons that can obscure the sticky menu.
Tread carefully along these parameters and decide if your site needs a sticky menu or not.
Will it work for your online store? Take into account the content-to-chrome ratio
Sticky headers take up a lot of space that can be used for content on the website.
It’s trickier in mobile phones given the screen size, so make sure the content to chrome ratio is maximized and the sticky bar takes up less space, so the content can be added to the site.
Choose an appropriate background color
Since the header appears at the top of the page, it’s important to consider enough visual contrast to make the site more readable, noticeable, and clearly differentiated from the item it's hovering over.
The dropdown should be clearly separated from the background.
Keep the animation minimal and natural
There are only two cases where you need animation: when you need to shrink a large header area or to include partial headers.
Other than that, animation can come off as annoying and unnecessary to the viewers. It’s best not to use animation and keep the header sticky when a user scrolls.
But when you have to include it, make sure it’s quick and smooth and the header shrinks as per the scrolling speed but does not disappear or jump at the user.
Take into account the partial headers
Partial headers stay unobtrusive while you scroll down on the page and can be accessed from any corner of the page.
The only issue with partial headers is that anytime a user scrolls up, the header reveals in case the user wants to access the header.
While that may be true in some cases, it’s also possible that users might have scrolled up to see a product or fetch some information.
That’s why animation should appear neither too slow nor fast, so they’re not obstructive to the viewers.
Here some examples of sticky menu that we love:
1. Enable a sticky header (Rocky Top Vapor) Rocky Top Vapor, an online vape store , has a sticky navigation menu that’s locked on the header and is visible when you scroll down. Above the navigation, there are options such as Home, My Account, Login, etc. to give quick access to customers’ details.
2. Show the search bar in the sticky menu for convenient navigation (Buy Buy Baby) Buy Buy Baby drops down all the buttons on the horizontal menu as you go down the page. The landing page is designed in fun, bright colors for visual appeal. The header remains constant along with a search bar, sign in, and add to cart icons, which users can access from anywhere on the page.
Keep Reading: eCommerce Sticky Menu: Things to AVOID + 8 Inspiring Examples Faceted/Guided Navigation Faceted navigation allows people to customize their search based on what they’re looking for on the site. In most cases, it’s either located on the sidebars or on top of the page with product filters to make the navigation easier.
For example, if you’re searching for shoes, a faceted search allows you to narrow down the search results using multiple categories and facets.
What faceted navigation doesn't involve: People use ‘filters’ and facets’ interchangeably, but product filters only allow one filter to be applied at a time. This filter may produce hundreds of results which becomes difficult for users to go through.
On the other hand, faceted navigation allows multiple filters to be applied at the same time that are specific to product attributes to give customers a result they’re looking for.
Pros of faceted navigation menu for eCommerce: Shows everything available
As a user navigates the site, they are introduced to the website’s catalog. They can check product attributes such as color, size, price, brand, etc. as per the filters they set, which can guide them to the closest result that matches their search query.
No more guesswork
Faceted search allows users to find what they want without having to try different search queries.
They don’t have to enter product details manually to find an accurate search result. Instead, they can narrow down the search by using facets to find what they want.
Makes navigation a breeze
Store owners have previously considered reducing the products to make navigation easier for customers.
With faceted search, users can navigate through a lot more content, making it easier for merchandisers to list more products on the site.
Will it work for your online store? Optimize the number of facets
While having a good number of facets is important, too many of them can lead to choice paralysis.
That’s why it’s important for you to choose an optimal number of facets depending on customers’ use case and awareness.
Track the facets that customers are using more and the ones that are unused to refine the search accordingly. Take into account the contextual search to avoid confusion.
For example: If a customer is looking for shirts on the site, the right facets are size, color, brand etc. Remove a facet such as a shoe size that is irrelevant to the query.
Let customers select multiple facets at once
Say you’re looking for a shirt on a site.
You want to check more than one size and want the results in ‘red’ and ‘blue’ color. Also, the shirt shouldn’t cost more than $15.
Will you go back and forth to filter the product as per size, price, and color? No, right?
This will only increase friction and might frustrate a user after a point. A better way is to allow the selection of multiple facets to narrow down the search, so customers can find what they want in a super quick and efficient manner.
Show the count of facets
Displaying the number of products available lets users know how effective their search queries and facet selections were.
At the same time, having a count next to unselected facets tells them which facet is helpful or redundant in their search process.
Capitalize on thematic filters
Having filters such as ‘work,’ ‘casual,’ and ‘party,’ and seasonal tags such as ‘summer’, ‘winter’, etc. on a retail website can guide users to product offerings that are specific to these types of events.
This is a good starting point to explore more on the site. The search can further be distilled down with facets such as size, color, price, etc.
By matching these moods and tastes, a store can capture users’ intent and upsell matching items that can increase the average order size.
If you are looking to improve customers’ shopping experience, then you need to have faceted search.
By displaying the search to the visitors, you make the site more intuitive and dynamic, increasing the possibility of them visiting you again.
However, if you have a small shop with a few products, a faceted search may not be the right choice for you.
Simple product filters might do the work. Another factor to include while tinkering with the facet search is the cost involved in designing the UX and maintaining facets.
But in any case— if you want to make navigation a breeze for your customers and improve conversions, faceted search can go a long way in helping you with the goals.
Here some website menu examples of faceted search we love:
1. Use the sidebar to show product-specific facts (Zappos) We love the faceted search of Zappos. After you select one of the categories, facets related to the product appear on the sidebar. This helps you to narrow down the search and arrive at the results you want.
At the same time, there is a count next to each facet to tell a user how many products have specific attributes and the number of options they can choose from.
2. Apply filters with the facets for better product discovery (Sephora)
Sephora’s search is impressive. Besides having facets on the side, they have more filters such as New, Bestseller, Clean, Vegan, etc. on the top to help customers narrow their search results.
Footer Navigation Footer navigation is usually secondary navigation, containing links that don’t fit or are not important to include in the main navigation.
It’s an important extension of top navigation to help users reach the pages they’re interested in, encourage mail sign-ups, and establish credibility through privacy-related information.
The best footers act as a roadmap for website users to lead them to accurate results, which helps to increase conversions.
Pros of footer navigation menu for eCommerce Keeps users on site
Footers are a good way to suggest where the visitor should head next—About Us, Blog, or to know more about the store’s accreditations.
Without the secondary information, the user will never know about your story, who the founders are, the trends in the industry, etc., which is a passive way to double down on sales in the future.
Gives them a chance to connect on social media
Encourage a dialogue with your customers on multiple channels. Footer navigation allows you to link your social media profiles at the bottom so customers have multiple channels to reach out to you.
Improve SEO by a mile
Building a comprehensive footer will positively affect your SEO. Including the correct number of links on the footer helps with the link juice, increasing the importance of inner pages.
This will lead to a better ranking that will improve your traffic and conversions. Ensure that you don’t pack too many keywords in the footer that can negatively impact your SEO.
Cons of footer navigation menu for eCommerce Slow loading time
Too much information on the footer can slow down the page's loading speed, which is one of the main reasons the users leave a site quickly.
As per Nielsen Norman Group, an average user stays on the page for only 10-20 seconds, so you need to add only useful fields that will engage and hook customers to the site.
Used as secondary navigation
Above-the-fold content gets more importance and rightly so since 57% of people spend time browsing the content on the top.
In that case, footer navigation may not always be viewed by the user, and they might scroll past the information mentioned on the footer.
Therefore, always make sure that your main navigation items are covered at the top and then decide the links to include at the bottom.
Will it work for your online store? It makes sense for eCommerce sites to have a footer because it helps customers find specific products and categories that could otherwise be hard to find.
Make sure to design a footer that supports your website's information structure and nature.
For example: A website can have a horizontal top bar with a vertical footer on the bottom that lists information such as About Us, Contact Us, Blogs, etc.
Consult your UX designer to understand what kind of alignment will work best for you depending on the website's layout.
Here are some website menu examples of footer navigation we love:
1. Use the footer navigation to show your brand USPs (Slupfluid) Slupfluid’s footer is impressive with a bold brand name on the left side and attributes such as cruelty-free , vegan, and no mineral oils, to tell customers what they stand for.
Below that, they have a standard copyright patent and accepted payment methods. On the right, you see the information one would expect on the footer menu— FAQs, return policy, privacy policy, terms and conditions, and social media handles.
Overall, it’s a beautifully designed footer menu with the right amount of information that makes an impact in a bold way.
2. Highlight important CTAs with a popping color scheme (Period Aisle) Period Aisle has a fascinating footer with bursts of orange and maroon and a mission statement to tell customers what they stand for.
They have all the relevant links such as reviews, FAQs, shipping, contact us, and more to get people to know them.
The footer also has a form where you can sign up with your email ID to avail free shipping.
Have you seen this? 8 pillars of a High-converting eCommerce homepage (+ Examples)
Frequently Asked Questions - eCommerce Navigation Menu 1. Why is navigation important in eCommerce? Navigation is important in eCommerce because it helps users find the products they are looking for quickly and easily. Optimizing your navigation menu can help improve the user experience on your site and make it easier for customers to find what they need.
Good navigation should be intuitive and easy to use. It should guide users to the information or products they are looking for without difficulty.
2. How do I optimize my navigation menu? There are a few key things to keep in mind when designing your navigation menu:
Keep it simple
Too many options can be overwhelming for users. Stick to the essentials and make sure your menu is easy to understand.
Use drop-down menus sparingly
While they can be helpful in organizing items, they can also be confusing for users. Try to keep your menus flat (ie. no more than two levels deep).
Use clear and descriptive labels
Users should be able to understand what each link leads to without needing to click on it.
Consider your mobile users
With more and more people using mobile devices to browse the web, it's important to make sure your navigation menu is mobile-friendly.
3. How many items should be in a navigation menu? Depending on the type of navigation menu you go for, it’s best to limit items to three to six main categories.
This is because a shorter navigation bar is more accessible and can be used with ease. You can also save this as a hamburger menu or sticky menu, easing things up for customers.
If you do need to add more to navigation, use a dropdown menu with additional options that contribute to the main categories already present.
4. Does navigation affect SEO? Navigation is one of the key factors that search engines use to determine the structure of your site and to crawling and indexing your pages.
When it comes to navigation, it's best to keep your navigation menu items separate from your content. This helps search engines understand what each page is about and improves your chances of ranking high in relevant search results.
You should also make sure your most important pages are easily accessible from your navigation menu.
5. Where should the navigation be on a website? The most common placement is at the top of the page, but depending on your website's layout, it might also make sense to place it on the left- or right-hand side.
There is no universal roadmap of creating the best website menu that’s sure to work.
TLDR: In an eCommerce industry, brands deal with customers with different preferences, so it’s important that you run A/B tests to understand what works for your target audience and what sets them off.
Remember the following principles of a good header and you should be able to drive sales with the help of them:
1. Brevity & specificity:
Only add links to the header that is important to users’ experience. Relegate the rest either under a drop-down menu, footer menu, or hamburger menu.
2. Organization:
Ensure you organize the categories and sub-categories properly with a visual color and format contrast that will make the site look neat and clutter-free.
3. Discoverability:
Since you cannot add everything to the footer, take the help of a drop-down or mega menu to include products or sub-categories that make the discoverability of an item easy.
Remember the advantages and downsides of employing any website menu to the site— and take into account the hacks and best practices we have included to drive navigational excellence on the site.
Final word 98% of visitors who visit an eCommerce site—drop off without buying anything.
Reason: User experience issues that cause friction for visitors.
And Convertcart solves for exactly that.
We help eCommerce brands optimize their websites to boost their conversions.
We've helped 500+ eCommerce stores (in the US) improve user experience—and 2X their conversion rate.
How do we do this?
Our conversion experts can audit your site
.svg)
.svg)
.svg)
.svg)
.svg)
