When using the term 'traditional menu', we are referring to a navigation menu in the form of a bar in the webpage that directly displays links.
Rather than having a menu button, traditional menus present all the information to the user immediately when entering the site. These menus often display links in a horizontal form along the top of the page (arguably the most popular) or vertically down the side of the page.
The dropdown menu is another alternative to both more traditional menus and the hamburger menu.
Advantages and disadvantages of traditional menus
In order to know which menu is the right choice for your webpage, it is important to understand the advantages of the more classic, traditional menu design, compared to the hamburger menu. This classic design definitely has more reverence in the design world and there's a reason—it is a tried and tested success amongst users.
However, there are also some downsides to it, especially as the world edges further into a more mobile-heavy place. Smaller screens mean less screen space!
As the digital landscape evolves, it's tempting to focus solely on new and emerging technologies when designing a website. However, in some cases, traditional website menus may still be the best option for delivering a user-friendly experience to your visitors.
Explore the advantages of using a traditional website menu and why it may be the right choice for your website.
Clear and visible navigation structure
Traditional navigation bars are useful in directing your user to your best pages, as well as helping them find exactly what they are looking for without having them spend time and effort clicking through a variety of things.
Comprehensive view of website content
This user friendly design also provides an effective, overarching view on everything your website has to offer. This can pique the users interest in other topics that they see and encourage them to explore more of the pages on your website.
Can accommodate a larger number of links and categories
Especially effective on desktop versions of your website, the traditional menu can house a large number of relevant categories with links around the website. This gives you space to effectively summarize your products in categories.
For instance, if you are building a website for a small business, this could be a useful way to concisely show what products or services you are selling via relevant categories—very useful for those who might not be as aware of your brand/company.
More accessible for users with disabilities
Less clicking means the website is more user friendly to everyone, including those with disabilities.
While traditional website menus have been a staple of web design for many years, they are not without their drawbacks. As web technologies and user preferences evolve, traditional menus may not always be the best option for delivering a seamless user experience.
Adds clutter to the page
Traditional menus prevent your webpage from looking as clean as they demand more attention from the user's eye. Keeping the page tidier, with less information allows you to easily emphasize the main content you want the user to see.
Not as effective for mobile devices
If you are creating a mobile app, then the traditional menu may not be as effective. This style of menu takes up a lot of space on the screen, making the area for your content much smaller. This is a big disadvantage to consider if you are wishing to create a webpage for both mobile and desktop users.
The hamburger menu is a form of navigation menu that hides navigation links from the main page. Instead, the user simply clicks on the hamburger icon to view the menu and explore the other pages from there. This is marked by a menu icon which consists of three horizontal lines stacked on top of one another—like layers of a hamburger.
This iconic hamburger button has grown in popularity, so much so that it has become an extremely recognizable icon, almost akin to the speaker icon that signifies volume. Users universally know that those three horizontal lines will lead to a list of links (also known as a navigation drawer), usually in the form of a sliding menu to look through.
These menu items will appear over the top of the main content and list a series of links to other pages they might want to explore on the website.
The hamburger menu is typically used for mobile apps as it is very accommodating to smaller screens and mobile devices. However, it can also be helpful on desktop websites—for instance if there are too many pages you need to link to in your navigation bar.
When done correctly, a hamburger menu limits the clutter on your page, allowing you to shrink several of the links into one compact main menu. This off canvas menu creates a cleaner, less cluttered webpage—something that users have been known to respond to positively.
There are many different designs of the hamburger menu, each catered towards different designs and purposes. By familiarizing yourself with the various different styles, you can decide whether your menu appears across the whole screen, whether it appears in a small bubble in the corner, or whether it only takes up half of the screen.
One of the most popular hamburger menu examples is the responsive hamburger menu. This method uses pure CSS (Cascading Style Sheets) only and it replaces the standard, horizontal menu to a responsive menu that allows lists containing navigation links to be opened one after the other.
Another great example is the simple centered hamburger menu—an option that transforms the three lines to another symbol, such as a cross or an arrow. This use of icon animation is effective in showing the user that they simply have to tap the icon again to get out of this main menu.
There is a variety of icon animations to choose from, all transforming that ubiquitous three lined icon into a new shape. Using this method, the menu slides into view and displays the navigation links in the center.
The hamburger icon is commonly used in either of the top corners of the web page. If the webpage is geared towards an audience of native speakers that read left-to-right, many favor the top left corner as this is concurrent with the way they read and these users will immediately gravitate towards the left hand corner to look for the menu icon.
However, due to the hamburger icon's increased popularity, it does not necessarily hinder the webpage to include it on the right top corner instead, if this looks better on your webpage. Likewise, it also makes sense to keep the left side of the screen dedicated to the immediate, important information you want the user to see, with the menu as more of an additional feature and therefore positioned in the right hand corner.