The menu on your website sets the tone for all the other elements of your site. The right menu type creates an overall website hierarchy and also puts first-time visitors at ease, guiding them where you'd most like them to go.
Once a user lands on a company website, about 50 percent of them use the navigation to get oriented with the website before moving forward. Your navigation structure is arguably one of the most crucial elements of your site.
Choosing which menu type to use is as important as the colors and layout of your site. Here are eight menu types you should consider as you design or redesign your company website.
You've probably noticed that more and more sites are using the hamburger icon like you'd see on your mobile device to indicate that there are more choices for navigation. A hamburger menu frees up valuable space you might wish to use for other elements while still allowing you to include important links you otherwise might not have room for.
However, use this option very strategically. Some studies show that the use of a hamburger menu may hurt user experience (UX). If your audience is made up of older people, for example, they may avoid the hamburger icon. A mere 52 percent of those over 45 years of age know what the icon means.
Big Spaceship offers a simplistic, almost mobile device approach to navigation on their landing page. There's a round icon that says "menu." When you hover over it, the icon animates into a hamburger menu such as you'd see on your mobile device. Click on the hamburger menu, and you discover the options for contacting the advertising agency to get more information about working with them. This menu structure is simple and to the point.
A menu bar is something you've likely seen frequently during your online journeys. It's a bar with navigation options that appears either horizontally across the top of the page or vertically to the side. It almost always appears above the fold and typically just under the site header. A menu bar tends to have a background with buttons or solid text on top.
There are certain features that users expect to see in the navigation bar, so keep those in mind as you're choosing your navigation categories. For example, you'll need choices such as home, about us and contact.
A mega menu drops down when the user hovers over one of the elements on the page. It's one main panel that offers all the main navigation options on the website. Think of it as a sitemap that's user-friendly. Mega menus are useful to sites that have a variety of categories with choices under each category.
Reading Truck Body uses the mega menu option to highlight the products they provide. Under each main category, they offer a number of options. For example, service body trucks are available with aluminum service bodies, Cranemaster bodies or steel service bodies. The mega menu allows the company to keep their main navigation structure manageable while still showing the various styles available.
A drop-down menu is another way to organize a lot of categories in a way that doesn't overwhelm site visitors. Unlike the mega menu that needs a hover, the drop-down menu forces the user to take action, such as clicking on the title of the button. When the user clicks on the button, the rest of the menu appears under the button. You can still expand this menu to take up most of the page, or you can keep the choices directly under the button as a bulleted list.
Another element you can add to your navigation bar that makes it more interactive is a bit of animation. For example, if the user hovers over one of the choices, the text color might change or the choice might expand slightly in size. Make the changes fairly simple so as not to bog down the speed of the site. A slight animation grabs the user's interest and makes them take action.
Jack's Donuts does a good job integrating just the right amount of animation in their navigation bar. Upon a first look, the text is white. Hover over any of the choices, however, and the letters change to a deep purple to match the rest of their color scheme. For those who have animations turned off, an alt-text box pops up that has the title tag of the button inside.
Some sites need a separate page for each category to cover all the many links on the site. You often see this type of structure with larger eCommerce retailers and blogs. For example, if you sell hats and have three dozen cowboy hat styles and two dozen fedoras, you aren't going to put those links on your homepage. What you would do is have a button for fedoras and create a page that lists the different fedoras with links to more intensive descriptions and photos of each.
Do you want to get a little creative with your navigation? Circular timeline navigation works particularly well for history-based choices and to tell the story of your company from the beginning to now. A circle puts the focus on your navigation, making it part of the entire screen rather than the top or side of your page.
BryBry received a nod as one of the best in navigation designs from Awwwards. The navigation is certainly unique in that it plays as a video, and you have to click and hold to navigate where you wish to go. There are some drawbacks to this type of creative navigation, such as confusion on the part of the user. A better solution might be to put navigation in a circular layout but lose the video component of having to hold to go to a new page.
Want to keep navigation available at all times? Create a fixed navigation bar that drops down as the user reads down the page. A fixed navigation bar is particularly helpful on sites with lengthy content pieces. If the user suddenly decides to sign up for your services, for example, they can get to your services page with a quick click of the button rather than having to scroll all the way back up to the top of the page.
The above are just a few of the menu types available for your website navigation. The best menu type to use is the one that matches the overall tone and purpose of your site. You may even find that combining a couple of different models has the best results. Try out a few different styles, do some A/B testing and see which performs best with your site visitors.
Lexie Lu is a freelance UX designer and blogger. She keeps up with the latest web design trends and always has some coffee nearby.
Get started with everything you need to know about developing a website.
Look at what a difference a website redesign makes!
Before 
After 
- Before and After - alexanderlawgroupplc.com
In 2022, we completed our transition to Advanté-BCS. Our team provides the same high-quality service that our clients have come to enjoy under a new brand.
Please visit us at https://advantebcs.com/website-design/ to get started with your new website!
