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.

How to Create a Featured List Item in Your Navigation Menu

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 menu that includes all the navigation top level links. Classnames such as .dropdown and .dropdown-menu are built-in Bootstrap classes. Dropdowns in Bootstrap can be triggered from a or 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:

Author

Paris Tuzun
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Get started today

Join people and businesses across the globe that trust Solodev.

We never share your information with anyone. Learn more

We use cookies to provide and improve our services. By using our site, you consent to cookies.