Navigation menus are one of the most basic parts of any website. It’s how users get around our website and find our precious content. A good menu makes a big difference in user experience, after all, what’s the point of a pretty site if no one can figure out how to use it?
Read our ‘Muse Menu Cheatsheet’ and start designing a good navigation menu. We designed the menus described in this article and provided them in a Muse file for you to download and explore.
General Menu Options
Many of these options can be applied to most or all of the menu types.
Normal or fixed
Normal menus are placed on the screen and can be scrolled past. Fixed menus are pinned to the screen which causes the menu to always be on the screen, you can’t scroll past it. Fixed menus are useful when you always want the menu to be accessible.
Push Effect
Menu’s with a ‘push effect’ applied to them push the page when opened. This can usually be achieved by using default Adobe Muse accordions. Push effects can be a nice visual effect.
Dropdown
Dropdown can refer to dropdown menus or dropdown buttons. This effect can be achieved with the default accordion or composition widgets in Adobe Muse.
Triggers
Triggers can be text, buttons, or icons that you click on to open your menu.
Types of Menus
Top
This is the most traditional and conventional type of menu.
This is a great option for…
- Larger breakpoints where you have lots of horizontal screen space
- When you don’t have a lot of menu items.
- When you want users to see all of your links at a glance
- Dropdown buttons
Recommendation
A top menu is a great option because it suits most people’s needs and it works well for larger breakpoints. Top menus can be problematic when you have a lot of links since horizontal screen space can be limited on smaller breakpoints. For smaller breakpoints we suggest hiding the top menu and using a more mobile-friendly menu such as a hamburger menu or a full-screen menu.
Drawer (hamburger menu)
A drawer menu is a menu that you can access by clicking on a trigger which will cause the menu to ‘slide out’ from the side of the screen (like a drawer).
This is a great option for…
- When you want a menu that works on all breakpoints.
- Saving screen space by having the menu slide out.
- When you have a lot of links.
Recommendation
Drawer menus work well across all breakpoints. They are a popular option for smaller breakpoints because it’s capable of holding a lot of links and it saves valuable screen space. If you only have a few links, it’s usually easier to just use a horizontal top menu so that users can quickly access your links without opening a menu.
Full-screen
Full-screen menus can be accessed by clicking on a trigger which will open a menu that takes up the entire screen.
This is a great option for…
- When you want a menu that works on all breakpoints.
- Saving screen space by having the menu hidden until the trigger is clicked.
- When you want a menu that commands more attention.
Recommendation
Full-screen menus work well for all breakpoints. They are a trendy alternative to standard drawer menus. If you only have a few links, it’s usually easier to just use a horizontal top menu so that users can quickly access your links without opening a menu.
Side (Vertical Menus)
Side menus are positioned on the left or right side of the screen.
This is a great option for…
- Fitting all of your menu items. Because there is no limit to page length, you could put as many menu items as you want.
- Larger to medium sized breakpoints (desktop and tablet)
Recommendation
Side menus are great for when you have a lot of menu items. These work well on large to medium sized breakpoints. Consider using a drawer or full-screen menu for small breakpoints.
Sample File
To help you get started, we’ve created a Muse file that has all of the menus described in this post. The menus were all created by using the basic features in Muse.
