Navigation menus don't have to be made out of same looking links. Sometimes you want to emphasize a certain link that you think is more important than others and set it apart so your visitors can immediately recognize it.
Sometimes navigation menus are like restaurant menus with a list of options and a few featured items. When you have a list of links that look the same, it makes it harder for your visitors to click the important link that you want them to visit. However, with a little bit of creativity, you make a certain list item more prominent, guide your users throughout the site and make your navigation menu look much less boring at the same time. In this tutorial, we'll show you how to make a navigation menu with a featured list item using Bootstrap.
The links below are the CDN links to put Bootstrap in your project. Copy and paste them in your project's HTML file inside the head section:
In the HTML structure below we have a
menu that includes all the navigation top level links. Classnames such as a
.dropdown-menu are built-in Bootstrap classes. Dropdowns in Bootstrap can be triggered from
button elements and automatically include all the necessary layout positioning and styling. The list item with the dropdown has two elements, the
a tag to trigger the dropdown menu and a dropdown menu section inside a div container. Note that the
div element with the
.dropdown-menu class also has a
.w-100 class. This is because we want to dropdown menu to be full width of the window. Inside the dropdown menu, we created three columns. Since the Boostrap grid system has a 12-column layout, by using the
.col-md-4 for each column, we create 3 equally spaced columns next to each other. If you'd like to change the number of columns, you can use a different
.col value such as
.col-md-6 for a two column layout or a
.col-md-3 for a four column layout. The last column has our featured image and link.
Now that we explained the dropdown column structure, let's get to styling it with CSS
The CSS code includes all the spacing and styling of elements.
And there it is. Click on the arrow icon next to the About Us link to see how the dropdown menu looks: