How to Create Simple Navigation Dropdowns with Bootstrap

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.

Best Practices

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.

Getting Started

Copy and paste the external Bootstrap CDN link below in your project's HTML file:

HTML

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:

CSS

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 .dropdown-menu 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.