Your primary or main navigation is one of the first things you tackle when developing a website. A popular way to lay it out is through a dropdown menu. Dropdowns can be tricky; fortunately, bootstrap helps with some default classes you can tap into.
Dropdown menus can be very useful since they help organize the content and help people find the sources they're looking for. Using dropdowns in navigational menus, however, can get tricky from a point of usability and user experience. In this tutorial, we'll cover the best practices for using navigational drop-down menus and how to build them with Bootstrap.
Here are some tips when creating dropdowns especially for navigation menus:
- Don't go deeper than two menu levels: Dropdown menus with more than two levels will add more cognitive load for the user, make it harder for the user to select menu items as they will need to hover over several menus to select the link. This is especially a problem in mobile devices where screen real estate is small.
- Keep the number of dropdown list items in a certain range: Avoid dropdowns when there are more than 10 or fewer than 3 options.
- Use hover effects: Give the user visual feedback when the list items are hovered on.
- Use the right colors: Use contrasting colors on dropdown list items. Changing the background color when a list item is hovered over will improve user experience.
- Adjust the spacing properly: Make sure the menu and list items have plenty of space by adjusting the width, height and padding. It is important for users to easily select an item. This is especially important for mobile users as they use their fingers to tap and select items.
Now that we covered the best practices of building dropdown menus, let's get to building them.
Copy and paste the external Bootstrap CDN link below in your project's HTML file:
Below, we have a main navigation component with a
nav tag. Inside there is a
ul list that contains one list item and inside the list item labelled "Products" there is another
ul list for the drop-down menu. Copy and paste the below code in your project and add your own menu list items as you need:
Right now, you'll notice that only the "Products" menu item is visible. This is because the class
.dropdown-menu is a prebuilt Bootstrap class that is set to hidden by default. In the CSS file, we make it visible when it is hovered over by selecting the class
.dropdown, adding a
:hover selector to it and setting the
display property to
block. That way, it will not be hidden anymore and will be displayed as block. Next, we select
li tags and the
a tags inside the
li elements and add a
:hover selector to them and changing their colors so that when they're hovered over, the list items will have a darker background to indicate that it is selected and the text inside will be white to create contrasting colors:
And there it is. Check out the JSFiddle below and hover over the Products item to display the dropdown menu.