How to Create a Featured List Item in Your Navigation Menu
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.
Getting Started
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:
HTML
In the HTML structure below we have a ul
or menu that includes all the navigation top level links. Classnames such as
a.dropdown
and .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
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: