The topic of navigation design causes quite a stir among people who specialize in web design. Plenty of people wonder, what kind of menu is the best? The kind of menu that best fits the content and structure of a website. There are no perfect solutions that go well with everything. Below you’ll find a few tips that are worth using.
Horizontal menu
Navigation design with a menu in form of a horizontal bar on the top of a page, above the content field.
Upsides:
- Doesn’t take away a lot of space from the content.
- It is very easily noticeable by users, as it’s naturally combined with the content at the center of the page.
Downsides:
- Limited number of items, which translates to poor scalability.
- Link names need to be short.
When to use:
- When we have a small number of top-level categories. I’d say the maximum number is 6-8 links.
Horizontal menu with submenus in the tabs (tab menu)
Clicking a link on the horizontal menu bar causes a tab to be opened with lower level links.
Upsides:
- All the upsides of the horizontal menu.
- It allows to very clearly label the place on the website where the Visitor is located.
Downsides:
- All the downside of the horizontal menu.
- Graphic tabs take more space than regular links.
- A menu of this type also takes more space vertically, pushing the content lower.
When to use:
- When we have a two-level navigation structure.
- When it’s important to clearly label the structure levels for the user.
Side vertical menu
A list of links placed one under another located on the left or right side of the screen.
Upsides:
- Can fit very long lists of links.
- Can fit plenty of navigation levels and allows to label the relations between them.
- Very well Scalable.
Downsides:
- Takes quite a lot of space on the page.
- Might be harder for users to notice than a horizontal menu.
When to use:
- When we need to handle a large number of main sections.
- When we have a deep navigation structure that requires all levels to be labeled.
- A vertical menu might be a submenu of a horizontal menu.
Menu with a drop-down submenu
Rarely used for websites due to its downsides.
Upsides:
- Saves space on a page.
- A drop-down menu can fit very long lists of links.
- Users are used to this type of menu by using applications in graphic operating systems.
Downsides:
- The user doesn’t see the available options until hovering over the menu. A drop-down menu forces to memorize instead of reminding.
- Sideways drop-down menus are very unpopular among users, as they require good coordination to hit the right link.
When to use:
- As a shortcut menu for lower levels in a website’s structure.
- When we want to avoid creating distributing pages for the main categories.
Navigation through content
Navigation through links placed in the page content field, usually in form of different types of lists or sneak-peaks consisting of a title and short description of the destination page’s content.
Upsides:
- No problems with not noticing a menu. Such navigation is most convenient and natural.
- The entire area of a page is dedicated to the content.
Downsides:
- Inability to quickly go back to each level of the structure through the menu. Going back through the browser’s “back” button or “go back” type links.
- Inability to clearly label the user’s current position in the website’s structure in the menu.
When to use:
- Navigation through content works great when it comes to news websites based on frequently updated content.
