Anatomy of a menu types.
How you structure your website navigation
Depends on your target audience, and what format you think would be most intuitive and accessible to them. There’s no one “right” way to design it.
You simply have to consider how you can enable first-time and repeat visitors to get the most out of your site.
Menu types
- Horizontal navigation bar.
- Dropdown navigation menu.
- Hamburger navigation menu.
- Vertical sidebar navigation menu.
- Footer menu.
Horizontal Navigation Bar
The horizontal navigation bar is the most common type of navigation menu. It lists the major pages side-by-side and is placed in the website header.
The sections featured can include content categories as well as links to a learn more page and a sign-in page.
Dropdown Navigation Menu
List the most important or general items in the top-level navigation bar and include the rest in a dropdown menu.
On its website, you can hover over any primary navigation link and a detailed dropdown menu will appear.
The dropdown menu will contain all the categories for that particular section of the site.
Hamburger Navigation Menu
Most often seen in mobile web design. With this approach, the navigation items are often listed horizontally on larger screen sizes and collapse behind a hamburger button on smaller screen sizes.
This type of design is ideal for mobile apps or sites where real estate is limited.
Vertical Sidebar Navigation Menu
The items are stacked on top of each other and positioned in the sidebar.
Since real estate isn’t as limited, you can write longer navigation links and include more top-level options.
Footer menu
It’s considered good practice to include links in the footer menu to the most important pages on the site.
At minimum, a website's footer menu should include links to legal pages and a way to get in touch with the site owner.