Introduction
Dropdown menus are pretty much essential in the navbar of most websites. As your website grows you will likely find that a standard dropdown menu no longer works for you — it becomes bloated, difficult to wade your way through the list and so creates a poor user experience. Once this happen (well, before it happens) a mega menu is available to save the day… and keep users browsing your site.
A mega menu is a dropdown menu that contains multiple levels. It allows a lot of links to be contained in a single dropdown without compromising the usability. In fact, it improves the usability. By keeping a lot of links in the same dropdown users have to click less to get where they want. A mega menu allows you to group links together into categories… it’s not a million miles off putting several dropdown menus into a single dropdown menu.
Mega menus can get huge and, on particularly large websites, will often be full-width (i.e. take up the entire width of the viewport). They don’t have to be though. Don’t feel you need to wait until you can take up the full width, or use the full width if it’s not the optimum size. Use what is best for your site. What is best for your site is what is easiest for your users to navigate. As we all know, if a site is hard (or even simply not easy) to navigate, your visitors will not stick around long and will leave to go to a competing site that is easy to navigate.
Make It
In this coded example I’m going to use the mega menu we use on our website. There are far bigger examples available but, as ours is relatively small, we can keep the code easier to follow. It still contains the elements you will need so is easy to expand as is necessary for your site. If you want to see what it looks like on the actual website click here. Of course if you have any questions or require any assistance putting your nav together please contact us.
For clarity I’m going to build the bulk of the navbar first in the next bunch of code. After that I’ll show the code for the mega menu. Finally we’ll put it all together into one glorious mega menu’ed navbar!
The Navbar
This is a responsive navbar built using Bootstrap’s navbar component. As Bootstrap is a mobile-first framework, the default is a collapsed burger-menu toggler controlled nav. This example expands at the large breakpoint using the class .navbar-expand-lg
.
You’ll notice I have also added some padding to each .nav-item
. You don't need this, I've just done it to make stuff a little clearer.
The Mega Menu
The bit we’ve all been waiting for! This will not work by itself… it needs to go into the space where the comment in the navbar code above is.
A quick bit of explanation to review as you look through the code below. You will see we have a couple of standard .dropdown-item
s first. We have separated them out as they give a high level explanation about our services rather than more specific services we offer. To separate those two from the rest of the mega menu, we use a .dropdown-divider
. A .dropdown-divider
is simply a grey line that allows you to clearly separate out sections of the mega menu.
The next bit is the list of services we offer split into three core categories. The categories are arranged as columns. You can choose how you do this. You could use rows and columns or you could use, as I have done, flex to achieve your goal.
All Together Now
Feel free to copy this code and paste it into your chosen text editor. Simply stick it between your <body>
tags and you've got yourself a mega menu navbar template to work from. If you would like a starter template for a Bootstrap project check out our post about getting started with Bootstrap 4.
Conclusion
Hopefully with the code and explanations above alongside the code comments, you’ll be able to put together your own Mega Menu with ease. You could use some of Bootstrap’s own utility classes to add some colour or some spacing utilities, like I have done, to give a bit of room between your menu items. You can even add in images, forms and more besides. Really, once you’ve got your head around the basics like we’ve gone through here, you can add elements to your heart’s content. Do remember to make sure that whatever you do improves the usability of your website or, at least, makes it more engaging.
Further Reading
We are creating a series of tutorials to help beginners through the process of getting to grips with Bootstrap. You can access them through our blog. If you have any requests for tutorials please get in touch with us.
Originally published at https://welcm.uk.