How to Choose the Correct Menu Style

How to Choose the Correct Menu Style ✔

Courtesy of @leeohgonzalez
⠀
🤔 Are you delivering a thoughtful navigation system to your users? ⠀
⠀
Menu’s should be purely functional & help support a user’s experience.
⠀
You can reduce drop off rates on your site by making sure user’s can find the proper links they’re looking for 👀
⠀
Sticky nav’s gives users a constant location to access links while navigating through the site.
⠀
But, if your site doesn’t have a ton of web pages then maybe a sticky nav isn’t necessary to reduce clutter.⠀

Menu Styles

Your navigation style should primarily support a ser’s experience & be extremely functional. A menu style can also have design benefits & be a reflection of your communication style to your consumer.
Let’s explore the different styles & figure out which will be best for you.

Standard Horizontal

The most commonly used is the horizontal text-based navigation. All links are visible & you can enhance the user experience by creating a sticky bar and/or including dropdowns for organizing content. Use this style of navigation to minimize interaction & confusion.

Hamburger Menu

With mobile devices now driving over 52% of web traffics design is now focused on a mobile-first approach. The hamburger menu helps consolidate information into a slide out menu reducing clutter on the landing page & having a dedicated location for navigation.

Full Page

Similar to what can be achieved through a hamburger menu, a full page desktop menu utilizes each corner of the webpage to navigate users. This is most likely used by creative agency & studio portfolio sites where there isn’t a large list of pages.

Bottom Page

Understanding how mobile design users hold their devices is what helped spawn this design execution. With a majority of users have a more natural lower grip on their phone, building a navigation bar that’s easier to reach just makes sense.

Vertical Stack

Probably the least used navigation style because of how unconventional. The vertical stack uses icons to help navigate users & is typically used for dashboard focused sites. Overall, the menu can be fairly distracting if not designed properly & creates unusual aesthetic users aren’t familiar with.

Carousel Menu

The carousel menu design takes advantage of users scrolling when landing on a page. The menu breaks down into specific sections at each scroll & designers have more control over the users viewport. This is a great way to communicate how long users can expect to be scrolling.

Keep These Tips In Mind

• Understand how your user navigates through sites
• Take into consideration that most users will be on mobile
• Is it better if links are visible? Or hidden?

Get 50+ Marketing Tools we use in Tegra 🤘

Follow the link 👉 tegra.co/tools to get a list of 50+ free (or cheap) growth marketing tools that we and other growth agencies use to scale businesses like yours + growth hacking insights.