If you’re thinking of starting a new website, there are many things to consider when it comes to the best practices of site design.
Right up there at the top are user interaction and site navigation. Studies have shown that more than half of the time if users can’t find what they’re looking for on a site, they leave. Not good!
To avoid that issue, it’s crucial that your website has user-friendly navigation and the optimal website menu design. After all, you want to keep people on your site as long as possible, right?
That’s where this guide saves the day! Keep reading to learn the different types of website menu designs to learn the pros and cons of each.
Let’s get started with the most important choice to make when it comes to deciding which type of menu bar to use on your website.
Vertical vs. Horizontal Website Navigation
Choosing which direction you’re going to use for your website navigation may not seem like that big of a deal, but it can make a real difference in user interaction and the look of your site.
So what’s the difference between vertical and horizontal website menu design?
Vertical navigation involves menu options being lined up, one on top of the other.
For example, Amazon makes great use of this choice on their massive retail site.
Horizontal navigation has the options in your menu placed next to each other.
Social change organization Amplifier is an awesome example of horizontal design.
7 Different Website Menu Design Options
Once you decide between vertical or horizontal navigation, it’s time to take a look at where you’re going to place the menu bar on your website – bottom, top, left, right, or diagonally.
Just keep in mind that diagonal menus are trending right now due to their aesthetic appeal, but they can be hard to pull off, as certain placement on sites can limit overall design options.
Your best bet is to choose a navigation placement option that both looks good and plays well with the general layout of your whole site.
You should also remember that while desktop site designs have more flexibility when it comes to menu placement, you need to keep mobile site design in mind due to them being viewed on a smaller screen.
Now for the fun part! Let’s take a look at the pros and cons of seven different choices for your website menu design.
1. Mega Menus
Mega menus are a popular choice amongst eCommerce companies, thanks mostly to the ability to display a large number of categories and a ton of content all at once. This type of website menu design is typically seen in the form of gigantic dropdowns that display extra navigation links.
Example: Using deep navigation choices, Target makes good use of a mega menu.
Pros: Every menu option is visible and eliminates the user’s need to scroll. This is also a highly organized menu option, allowing for major and minor categories.
Cons: Having too many choices can end up confusing site visitors. This option tends to not display well on the small screens of mobile devices.
2. Drop-down Menus
Drop-down menus are mostly used on educational and news sites. But there are some eCommerce companies that use them quite well! Drop-down menus feature both hover and click options that open new columns with additional categories.
Example: Bentley combines elegance and function with their drop-down menus.
Pros: This traditional menu option gets rid of clutter and clears up more page space to help keep things organized.
Cons: 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.
3. Dropline Menus
Dropline menus are almost identical to dropdown menus, other than the fact that they open up a category from the menu bar, revealing a line that includes subcategories, instead of using a column.
Example: The official site of the Olympic games makes excellent use of droplines.
Pros: Reduces clutter, just as drop-down menus do, allowing for additional free space on each site page.
Cons: Requires excessive scrolling and makes menu hard to use on mobile devices, also as drop-down menus tend to do.
4. Split Menus
Split menus are mostly seen on sites that contain a large number of categories, but the owners also want to keep their site looking clean and readable. This type of website menu design is made up of two parts – the main menu and a sidebar that contains secondary items.
Example: NYU makes great use of split menus while also keeping pages clean.
Pros: This type of menu tends to be easier to navigate while still displaying a large variety of options.
Cons: Split menus take up more of the display space on any given site page.
5. Accordion Menus
Accordion menus are often used for artistic or architecture websites, as they can keep tons of content organized, and allow for dynamic changes of view via sections that expand individually.
Example: The Samsung help site contains some amazing accordion menus.
Pros: This type of website menu design helps to keep a lot of content free from clutter. It also maintains a clean design and reduces the need for excessive scrolling.
Cons: If accordion menus aren’t designed well they can result in a negative user experience.
6. Hamburger Menus
Hamburger (or Push) menus tend to be the best choice for sites that want to pack a punch with messaging. They are very trendy amongst contemporary design buss and are optimal for keeping screen real estate from being stolen.
Example: MoneyLion puts hamburger menus to awesome use on their site.
Pros: This menu type gives users more choice and reduces overwhelming them with tons of options. It also allows for focused content branding to draw attention to what is on the screen without overcrowding it.
Cons: Hamburger menus can cut down on users discovering additional content that is on view at any given time. And icons can easily be overlooked by those that aren’t up-to-date on current tech or design trends.
7. Sticky Menus
Sticky (or Anchor) Menus work well for portfolio sites, as they reduce the need for users to put extra effort into scrolling all the way up or back down a site page. The menu constantly stays at the top of the page, no matter how much visitors scroll.
Example: Names for Change has a gorgeous site with an amazing sticky menu.
Pros: Reduces scrolling time by over 20% and eliminates the added effort to scroll back up to the top of site pages to access the main menu.
Cons: This type of website menu design tends to limit choices when it comes to overall site design, due to the fact that many types will clash with the look of the anchored menu.
Want More Help with Your Website?
Whether you’re just starting out and need some advice on how to make a site or you’re looking to improve your current site with a better website menu design, we’re here to help.
Check out some of our step-by-step website guides for help with making your site the best that it can be and get your story out there into the world!