Website navigation design with Menu Item Extras Drupal module

Website navigation design with Menu Item Extras Drupal module

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.

Example of good website navigation design

  • 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.

Example of engaging website navigation design

  • 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.)

Drupal Menu Extras module

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.

Enabling the Drupal Menu Extras module

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.

Creating an image field for a menu link in Drupal

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.

Configuring an image field for a menu link in Drupal 8

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.

Adding menu links with images

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!

Navigation link with images thanks to the Menu Item Extras Drupal module

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!

2 votes, Rating: 3.5

Read also


See why it’s worth including FAQ (Frequently Asked Questions) in your content marketing strategy, as well as how it is created with a very nice Drupal module — the FAQ Field. Our explanation will...


E-commerce opportunities are endless nowadays. More and more business owners decide to hire e-commerce developers and skim the cream off online sales. Today, we will describe the new opportunities...


See how event schedules can be created with the help of the Smart Date Drupal 8 module. It uses very flexible and user-friendly approaches to date and time.


Among the nice Drupal 8 shopping cart modules, we would like to discuss one today. Its name is the Commerce Cart Flyout module in Drupal 8. Let's see what it does in the usability arena!


The Drupal 9 release is scheduled to come on June 3, 2020. One more big step has just brought it closer — the Drupal 8.7.7 version. In this blog post, we will tell you what’s new in it and...

Subscribe to our blog updates