Article Title

Author Name

{CATEGORY}

{date}

{#hash1}

{#hash2}

Illustrations by {name}

{excerpt} A sprint is when a company or team dedicates a certain amount of time (around 2-4 weeks) to work on a specific project at full speed.

{0} Min read

Profile picture of Kiera Magnetti

4 min read

Solid site navigation is a must-have. Styled menus prove it doesn't have to be boring

Functional and fun don’t have to be exclusive. Here’s how to bring both to horizontal site menus.

A horizontal menu styled with a dark blue gradient and neon green button.

Stay informed on all things design.

Thanks for submitting!

Shaping Design is created on Editor X, the advanced web design platform for professionals. Create your next project on Editor X. 

Pretty much all of us (rightly) expect to find our way easily around any site. In fact, effective navigation is a top factor in making or breaking user experience online, according to a review published in the Online Journal of Communication and Media Technologies. Navigation menus are arguably the most ubiquitous feature on the internet. And of all menu types, the horizontal menu is the one we see most often, especially on desktop. But just because they're expected doesn’t mean they have to be boring.


On Editor X, you can now add styled horizontal menus and design them with a wide range of customization options. Find them under “menu & search” in the add panel and finetune the design from the Inspector. But that’s just the how. It’s up to you to make it your own. Here, we dive into a few best practices to keep in mind, and six ways you can style horizontal menus beyond basics.


Add some impact with Editor X's new styled horizontal menu capabilities.



1. Make sure menus do their job


Style isn’t a top priority when designing site navigation menus, and for good reason. Users need a smooth navigation experience. No matter what you do to amp up a site menu, there are a few things to keep in mind:

  • Make sure the menu is easily visible and readable, with enough visual weight and contrast between the links and background so that all users can read it.

  • Place the navigation menu where users can find it. Users generally expect to find it where they’ve seen it on other sites—at the top of the page, in the left sidebar, or at the bottom on mobile for example.

  • Avoid overloading your menu with options or creating a cluttered design.

  • Users should be able to interact with the menu easily so make sure it’s big enough to click on.

  • Consider adding interactions and visual cues to help users understand where they are on a site and help them navigate.

  • For pages with a long scroll, you may want to create a sticky menu that stays on screen.


Once the experience is as smooth and clear for the user as possible, there are a few ways to make them interesting and exciting.



2. Go bold


Horizontal menus don’t all need to be flat and minimalist. You can use subtle shadows to add depth, incorporate brand colors, gradients or prominent fonts to create an eye-catching header.


Take book publishing company Publishing Partner, for example. It injected the brand into its navigation menu with strong fonts and fun colors that stand out against the overall design. When looking for somewhere to enhance branding with aesthetics, the menu is a subtly ideal spot.