Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

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:

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- FontAwesome CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

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.

<nav class="navbar navbar-expand-lg" role="navigation">
  <a href="/" class="col-xl-3 col-lg-2 col-sm-4 col-5">
    <img alt="LunarXP Logo" class="img-fluid py-3 logo" src="https://raw.githubusercontent.com/solodev/hero-search-bar/master/images/logo.png" aria-role="logo">
  </a>
  <button id="sidenav-open-btn" class="navbar-toggler menu-hamburger position-absolute pointer pr-4" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item dropdown position-static nav-item px-3 text-uppercase mb-0 d-none d-lg-flex">
        <a class="nav-link dropdown-toggle d-block w-100 h-100 text-white py-4 top-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <strong>About Us</strong>
        </a>
        <div class="dropdown-menu w-100" aria-labelledby="navbarDropdown">
          <div class="container">
            <div class="row">
              <div class="col-md-4">

                <ul class="dropdown-list">

                  <li><a href="#">Testimonials</a></li>
                  <li><a href="#">Video Gallery</a></li>
                </ul>
              </div>
              <div class="col-md-4">

                <ul class="dropdown-list">
                  <li><a href="#">Our Story</a></li>
                  <li><a href="#">Our Team</a></li>
                </ul>
              </div>
              <div class="col-md-4">

                <a href="/">
                  <img alt="Dropdown Image" src="https://github.com/solodev/featured-menu-item/blob/master/images/featured-image.png?raw=true" class="rounded-circle">
                </a>
              </div>
            </div>
          </div><!-- container -->
        </div>
      </li>
      <li class="nav-item px-3 text-uppercase mb-0 position-relative d-none d-lg-flex">
        <a class="d-block w-100 h-100 text-white py-4 position-relative top-link" href="#"><strong>News</strong></a>
      </li>
      <li class="nav-item px-3 text-uppercase mb-0 position-relative d-none d-lg-flex">
        <a class="d-block w-100 h-100 text-white py-4 position-relative top-link" href="#"><strong>Locations</strong></a>
      </li>
      <li class="nav-item px-3 text-uppercase mb-0 position-relative d-none d-lg-flex">
        <a class="d-block w-100 h-100 text-white py-4 position-relative top-link" href="#"><strong>Products</strong></a>

      </li>
      <li class="nav-item px-3 text-uppercase my-3 my-lg-0 mr-5 mr-lg-4 mr-xl-5 d-none d-lg-flex">
        <a class="d-block w-100 h-100 text-white py-4 position-relative top-link" href="#"><strong>Contact</strong></a>
      </li>
    </ul>
  </div>
</nav>
</ul>

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.

/* Dropdown Menu */

.dropdown-menu {
  background-color: #fff;
  border: none;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}


.navbar .navbar-nav>li.dropdown .dropdown-list {
  padding: 50px 0 0 60px;
  list-style: none;
}

.dropdown-list li,
.topbar li {
  text-transform: capitalize;
  line-height: 80px;
  padding-bottom: 0;
  padding-top: 0;
  border-bottom: 2px solid #e7e8e8;
}

.navbar-nav ul.dropdown-list li a {
  height: 62px;
}

.dropdown-list a {
  color: #373c3b;
  font-size: 25px;

}

.navbar-nav li>a {
  position: relative;
  display: block;
  padding: 0;
  line-height: inherit;
}

.rounded-circle {
  margin-left: 75px;
  padding: 24px 0;
  width: 220px;
}


/* Navigation Menu */

.menu-hamburger {
  bottom: calc(50% - 10px);
  right: 0;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.menu-hamburger span {
  width: 30px;
  height: 4px;
  display: block;
  background: #fafafa;
  margin-bottom: 4px;
}

.menu-hamburger span:last-of-type {
  margin-bottom: 0;
}

nav {
  background: #010101;
  z-index: 3;
}

nav .navbar-nav li.navbar-item {
  line-height: 110px;
  margin-left: -5px;
}

nav .navbar-nav li.navbar-item a {
  padding: 0 20px;
}

/* Media Queries */

@media (max-width: 768px) {
  .navbar .row {
    width: 100%;
  }

  .menu-hamburger {
    right: -25px;
  }
}

@media (max-width: 575.98px) {
  nav.h-navbar {
    max-height: 70px;
  }

  nav .navbar-header img {
    max-width: 70px;
  }

  .menu-hamburger {
    bottom: calc(50% - 12px);
  }
}

@media (max-width: 767.98px) {
  nav.h-navbar {
    max-height: 90px;
  }
}

.row {
  justify-content: space-between;
}

.sidenav-open-btn {
  margin-right: 2.5rem;
}

And there it is. Click on the arrow icon next to the About Us link to see how the dropdown menu looks:

Download from Github

Share on Facebook Tweet It

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

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev