Aesthetic and engaging website navigation menus largely define your site’s success. They help your visitors easily get from point A to point B and finally reach point C — a conversion!
If your site is built with Drupal, you are in luck. There are plenty of modules to build modern navigation menus and improve your website navigation. We will see how to create a very attractive website navigation design with one of them — the Menu Item Extras Drupal module.
Best practices for website navigation design
Website navigation menus bring you the most value if they are built in accordance with the best design practices. Here are some of them.
Make the purpose of the menu links clear
It should be obvious to your website’s visitors at a glance what they will get when they follow a particular menu link. To achieve this, you can use descriptive labels written in simple, user-friendly language, or use icons and similar design elements to enhance the visual effect.
Limit the primary menu to 7 options
Avoid clutter in your links, so your users do not get overwhelmed by choices. Of course, it depends on your website, but the optimal UX design recommendation is keeping the primary navigation under seven items.
Make the navigation menu stand out visually
Your website’s primary menu should have a design that captures your users’ attention. Use good contrasts, clear fonts, visually enhancing icons and images, and more to achieve this.
Put the navigation menu in an expected place
The main navigation menu should be located in a visible and obvious place where visitors expect to see it. This is usually the top or left or right top of your website’s pages. Footer navigation is popular as well.
Take care of mobile navigation
Make sure your navigation is designed to be as easy-to-use on mobile devices as it is on desktops. With limited screen space, they usually have a design of a hamburger, flyout, off-canvas menu, etc. It’s best to use responsive navigation menus that adapt to different device screens.
Better website navigation design with Menu Item Extras Drupal module
At least some of the above best practices for navigation menu design can be fulfilled by the Menu Item Extras module in Drupal. With it, the purpose of your links can be made clearer, and your navigation can stand out and catch your Drupal website visitors’ eye.
The Menu Item Extras enables you to add extra fields to your menu items. This means that ordinary navigation links can have a richer design thanks to adding other elements as Drupal fields (related images, icons, background images, etc.)
Enabling the Menu Item Extras Drupal module
When installed, the Menu Item Extras module also brings with it another module — the Menu Item Extras Demo Base. So while enabling the main module, you can optionally the additional one, too, if you need an illustrative sample for your Drupal website navigation design.
Adding an image field to a navigation menu
We can now add any field to any desired menu that we can select in “Structure — Menus” (Main navigation, Footer, User account menu, some custom menu, etc.). Field management works the same way as in Drupal content types. Let's add an image field.
We can also manage its display to configure how it will look to our users — for example, hide its label and choose a special image style to give a consistent design to all images.
Adding menu links with images
And now, when we add a menu link, it will have a new field for an image. Let’s add a few links like this to our Drupal website’s Main Navigation. We specify the link title, existing content URL, make sure the parent link is the one we need (Main Navigation), and add an image.
Let’s check the website’s front page now and see how our main navigation design looks. Now it is enriched with images and is much more enticing for visitors. It’s hard to resist clicking!
Of course, this is just a rough sketch that will look better after the navigation design is brushed up with good front-end experts.
See a video about adding images to navigation menu items with the help of the Menu Item Extras Drupal 8 module.
Order a professional website navigation design
The options for site navigation designs are endless. Let our Drupal development and web design experts create the website navigation design that will attract your potential customers and lead them confidently throughout your website. Contact us!