Menu Close
  • Home
  • Bootstrap 5 — More About Navs
    •

Bootstrap 5 — More About Navs

CodeWithAnbu

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to customize navs with Bootstrap 5.

Using Dropdowns

We can add dropdowns to our navs.

For example, we can write:

<ul class="nav nav-tabs">  
  <li class="nav-item">  
    <a class="nav-link active" aria-current="page" href="#">foo</a>  
  </li>  
  <li class="nav-item dropdown">  
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>  
    <ul class="dropdown-menu">  
      <li><a class="dropdown-item" href="#">action 1</a></li>  
      <li><a class="dropdown-item" href="#">action 2</a></li>  
      <li><a class="dropdown-item" href="#">action 3</a></li>  
      <li>  
        <hr class="dropdown-divider">  
      </li>  
      <li><a class="dropdown-item" href="#">actiob 4</a></li>  
    </ul>  
  </li>  
  <li class="nav-item">  
    <a class="nav-link" href="#">bar</a>  
  </li>  
  <li class="nav-item">  
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>  
  </li>  
</ul>

We add a dropdown by adding an li with the dropdown and nav-link classes.

Together, they make the dropdown toggle fit inside the menu.

Then we add our dropdown toggle with the .dropdown-toggle class.

And .dropdown-item class is applied to dropdown items.

We also have .nav-tabs to style the nav as tabs.

Pills with Dropdowns

We can change .nav-tabs to .nav-pills to change the links to display as pills:

<ul class="nav nav-pills">  
  <li class="nav-item">  
    <a class="nav-link active" aria-current="page" href="#">foo</a>  
  </li>  
  <li class="nav-item dropdown">  
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>  
    <ul class="dropdown-menu">  
      <li><a class="dropdown-item" href="#">action 1</a></li>  
      <li><a class="dropdown-item" href="#">action 2</a></li>  
      <li><a class="dropdown-item" href="#">action 3</a></li>  
      <li>  
        <hr class="dropdown-divider">  
      </li>  
      <li><a class="dropdown-item" href="#">actiob 4</a></li>  
    </ul>  
  </li>  
  <li class="nav-item">  
    <a class="nav-link" href="#">bar</a>  
  </li>  
  <li class="nav-item">  
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>  
  </li>  
</ul>

JavaScript Behavior

We can add tabs that show content when we click on it.

To do that, we write:

<ul class="nav nav-tabs" id="myTab" role="tablist">  
  <li class="nav-item" role="presentation">  
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>  
  </li>  
  <li class="nav-item" role="presentation">  
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>  
  </li>  
  <li class="nav-item" role="presentation">  
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>  
  </li>  
</ul>  
<div class="tab-content" id="myTabContent">  
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at neque orci. In vehicula metus eu euismod rhoncus. Pellentesque pharetra ligula sed efficitur ultricies. Quisque et congue metus, id rutrum purus. Maecenas finibus efficitur mauris, quis varius enim elementum a. Phasellus vel aliquet diam. Proin tincidunt eros pellentesque mauris laoreet, nec ullamcorper magna vulputate. Suspendisse potenti. Nullam lobortis ultricies nunc id vulputate. Curabitur pulvinar, lorem ac tempus lobortis, tortor tortor dignissim enim, quis tempor est lacus ut augue. Sed tincidunt lectus urna, ac aliquet velit suscipit a. Nullam tempus sem id nibh vulputate, nec ultricies lorem porttitor. Sed pharetra lacinia odio non sodales.  
  </div>  
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Mauris ullamcorper ornare dui at bibendum. Duis sed quam ac purus tincidunt aliquet. Suspendisse potenti. Praesent vitae turpis dui. Fusce ut tincidunt est, ut sagittis mi. Sed euismod pharetra pulvinar. Morbi at facilisis quam. Vestibulum sagittis arcu sit amet scelerisque vestibulum. Nulla nisl libero, ornare et facilisis et, tempus sagittis massa. Sed tincidunt metus non ex ornare, eu elementum lorem sagittis. Nam a sapien eleifend, dignissim purus sit amet, ultrices neque. Suspendisse imperdiet purus eu posuere pellentesque. Nulla facilisi.  
  </div>  
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Sed dui purus, tempor ac consectetur quis, viverra ut tellus. Duis eget venenatis nibh, eget placerat diam. Suspendisse a ex libero. Ut quis turpis tempor sem pharetra ullamcorper sed at metus. In eget nibh orci. Aenean ac nulla nulla. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin eu facilisis felis. Nulla sed risus mattis, tristique odio eu, mattis ex. Morbi aliquet nulla eget vestibulum lobortis. Sed aliquam odio magna, et dictum sapien scelerisque sed. Praesent odio sapien, gravida ac leo quis, ornare placerat nibh. Donec id ex mauris. Nunc ut sapien quis ex malesuada pretium non sed elit. Cras maximus ipsum sed augue sollicitudin, ut scelerisque velit ultrices. Sed rutrum viverra massa in condimentum.  
  </div>  
</div>

to add the tabs.

The nav-item class is applied to the nav items.

And the tab-pane class is applied to the content class.

href is the URL for content. It should match the ID of the tab content divs plus a hash before it.

fade adds a fade effect for transitions.

Conclusion

We can add navs to display content.

The styling can be changed.

Post Views: 9
Posted in Bootstrap