Angular Bootstrap navs

Angular Navs - Bootstrap 4 & Material Design

Angular Bootstrap navs is a class which can transform a list of items into navigation components or Tabs/Pills. Navs helps to build more advanced components.

Examples of Angular Bootstrap navs use:

  • Vertical or horizontal menu
  • Tabs navigation menu
  • Pills navigation menu

See the following Angular Bootstrap navs examples:

Basic example


<ul class="nav grey lighten-4 py-4">
    <li class="nav-item">
        <a class="nav-link active" href="#!">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#!">Disabled</a>
    </li>
</ul>

Navs without unordered list


<nav class="nav grey lighten-4 py-4">
    <a class="nav-link active" href="#">Active</a>
    <a class="nav-link" href="#">Link</a>
    <a class="nav-link" href="#">Link</a>
    <a class="nav-link disabled" href="#">Disabled</a>
</nav>

Navs centered with flexbox


<ul class="nav justify-content-center grey lighten-4 py-4">
    <li class="nav-item">
        <a class="nav-link active" href="#!">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#!">Disabled</a>
    </li>
</ul>

Navs right-aligned with flexbox


<ul class="nav justify-content-end grey lighten-4 py-4">
    <li class="nav-item">
        <a class="nav-link active" href="#!">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#!">Disabled</a>
    </li>
</ul>

Navs with vertical direction


<ul class="nav flex-column grey lighten-4 py-4">
    <li class="nav-item">
        <a class="nav-link active" href="#!">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#!">Disabled</a>
    </li>
</ul>

Navs vertical without unordered list


<nav class="nav flex-column blue lighten-5 py-4">
    <a class="nav-link active" href="#">Active</a>
    <a class="nav-link" href="#">Link</a>
    <a class="nav-link" href="#">Link</a>
    <a class="nav-link disabled" href="#">Disabled</a>
</nav>

Navs with bold font


<!-- Grid row -->
<div class="row">

    <!-- Grid column -->
    <div class="col-md-6">

        <nav class="nav flex-column grey lighten-4 py-4 font-weight-bold">
            <a class="nav-link active" href="#">Active</a>
            <a class="nav-link" href="#">Link</a>
            <a class="nav-link" href="#">Link</a>
            <a class="nav-link disabled" href="#">Disabled</a>
        </nav>

    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-md-6">

        <ul class="nav grey lighten-4 py-4 font-weight-bold">
            <li class="nav-item">
                <a class="nav-link active" href="#!">Active</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#!">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#!">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#!">Disabled</a>
            </li>
        </ul>

    </div>
    <!-- Grid column -->

</div>
<!-- Grid row -->

Navs with various font and background color

Info notification

MDB has hundreds of colors to use within navs. Take a look here to know all the possibilities.


                <!-- Grid row -->
                <div class="row">

                  <!-- Grid column -->
                  <div class="col-md-4">

                    <nav class="nav flex-column pink lighten-3 py-4 mb-r font-weight-bold z-depth-1">
                      <a class="nav-link active white-text" href="#">Active</a>
                      <a class="nav-link white-text" href="#">Link 1</a>
                      <a class="nav-link white-text" href="#">Link 2</a>
                      <a class="nav-link white-text" href="#">Link 3</a>
                    </nav>

                  </div>
                  <!-- Grid column -->

                  <!-- Grid column -->
                  <div class="col-md-4">

                    <nav class="nav flex-column amber lighten-3 py-4 mb-r font-weight-bold z-depth-1">
                      <a class="nav-link active dark-grey-text" href="#">Active</a>
                      <a class="nav-link dark-grey-text" href="#">Link 1</a>
                      <a class="nav-link dark-grey-text" href="#">Link 2</a>
                      <a class="nav-link dark-grey-text" href="#">Link 3</a>
                    </nav>

                  </div>
                  <!-- Grid column -->

                  <!-- Grid column -->
                  <div class="col-md-4">

                    <nav class="nav flex-column cyan lighten-3 py-4 mb-r font-weight-bold z-depth-1">
                      <a class="nav-link active indigo-text" href="#">Active</a>
                      <a class="nav-link indigo-text" href="#">Link 1</a>
                      <a class="nav-link indigo-text" href="#">Link 2</a>
                      <a class="nav-link indigo-text" href="#">Link 3</a>
                    </nav>

                  </div>
                  <!-- Grid column -->

                </div>
                <!-- Grid row -->
              

                .nav a.white-text:hover { color: #e0e0e0!important; } .nav a.dark-grey-text:hover { color: #78909c!important; } .nav a.indigo-text:hover
                { color: #7986cb!important; }

Navs with gradient background MDB Pro component 


                <!-- Grid row -->
                <!-- Grid row -->
                <div class="row">

                  <!-- Grid column -->
                  <div class="col-md-6">

                    <ul class="nav peach-gradient lighten-3 py-4 mb-r font-weight-bold z-depth-1">
                      <li class="nav-item">
                        <a class="nav-link active white-text" href="#!">Active</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link white-text" href="#!">Link</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link white-text" href="#!">Link</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link white-text" href="#!">Link</a>
                      </li>
                    </ul>

                    <ul class="nav purple-gradient py-4 mb-r font-weight-bold z-depth-1">
                      <li class="nav-item">
                        <a class="nav-link active white-text" href="#!">Active</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link white-text" href="#!">Link</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link white-text" href="#!">Link</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link white-text" href="#!">Link</a>
                      </li>
                    </ul>

                  </div>
                  <!-- Grid column -->

                  <!-- Grid column -->
                  <div class="col-md-6">

                    <ul class="nav aqua-gradient py-4 mb-r font-weight-bold z-depth-1">
                      <li class="nav-item">
                        <a class="nav-link active white-text" href="#!">Active</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link white-text" href="#!">Link</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link white-text" href="#!">Link</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link white-text" href="#!">Link</a>
                      </li>
                    </ul>

                    <ul class="nav blue-gradient py-4 mb-r font-weight-bold z-depth-1">
                      <li class="nav-item">
                        <a class="nav-link active white-text" href="#!">Active</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link white-text" href="#!">Link</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link white-text" href="#!">Link</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link white-text" href="#!">Link</a>
                      </li>
                    </ul>

                  </div>
                  <!-- Grid column -->

                </div>
                <!-- Grid row -->
              

                .nav a.white-text:hover { color: #e0e0e0!important; }

Basic tabs MDB Pro component 


<!-- Nav tabs -->
<mdb-tabset #staticTabs [buttonClass]="'nav-pills tabs-4 light-blue lighten-3 p-3'" [contentClass]="''">
  <!--Panel 1-->
  <mdb-tab heading="Active">
      <div class="row">
          <div class="col-12">
              <br>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
          </div>
      </div>
  </mdb-tab>
  <!--Panel 2-->
  <mdb-tab heading="Link1">
      <div class="row">
          <div class="col-12">
              <br>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
          </div>
      </div>
  </mdb-tab>
  <!--Panel 3-->
  <mdb-tab heading="Link2">
      <div class="row">
          <div class="col-12">
              <br>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
          </div>
      </div>
  </mdb-tab>
  <mdb-tab heading="Link3">
    <div class="row">
        <div class="col-12">
            <br>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
        </div>
    </div>
</mdb-tab>
</mdb-tabset>

Tabs justified MDB Pro component 


<!-- Nav tabs -->
<mdb-tabset #staticTabs [buttonClass]="'md-tabs tabs-4 pills-secondary purple margin'" [contentClass]="''">
  <!--Panel 1-->
  <mdb-tab heading="Active">
      <div class="row">
          <div class="col-12">
              <br>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
          </div>
      </div>
  </mdb-tab>
  <!--Panel 2-->
  <mdb-tab heading="Link1">
      <div class="row">
          <div class="col-12">
              <br>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
          </div>
      </div>
  </mdb-tab>
  <!--Panel 3-->
  <mdb-tab heading="Link2">
      <div class="row">
          <div class="col-12">
              <br>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
          </div>
      </div>
  </mdb-tab>
  <!--Panel 4-->
  <mdb-tab heading="Link3">
      <div class="row">
          <div class="col-12">
              <br>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
          </div>
      </div>
  </mdb-tab>
</mdb-tabset>

Basic pills MDB Pro component 


<mdb-tabset #staticTabs1 [buttonClass]="'nav-pills pills-unique white p-3'" [contentClass]="''">
  <!--Panel 1-->
  <mdb-tab heading="Active">
    <div class="row">
      <div class="col-12">
        <br>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae
          placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
      </div>
    </div>
  </mdb-tab>
  <!--Panel 2-->
  <mdb-tab heading="Link1">
    <div class="row">
      <div class="col-12">
        <br>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae
          placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae
          placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
      </div>
    </div>
  </mdb-tab>
  <!--Panel 3-->
  <mdb-tab heading="Link2">
    <div class="row">
      <div class="col-12">
        <br>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae
          placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
      </div>
    </div>
  </mdb-tab>
  <mdb-tab heading="Link3">
    <div class="row">
      <div class="col-12">
        <br>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae
          placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
      </div>
    </div>
  </mdb-tab>
</mdb-tabset>

Pills justified MDB Pro component 


<!-- Nav tabs -->
<mdb-tabset #staticTabs [buttonClass]="'md-tabs pills-primary white'" [contentClass]="''">
  <!--Panel 1-->
  <mdb-tab heading="Active">
    <div class="row">
      <div class="col-12">
        <br>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae
          placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
      </div>
    </div>
  </mdb-tab>
  <!--Panel 2-->
  <mdb-tab heading="Link1">
    <div class="row">
      <div class="col-12">
        <br>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae
          placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae
          placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
      </div>
    </div>
  </mdb-tab>
  <!--Panel 3-->
  <mdb-tab heading="Link2">
    <div class="row">
      <div class="col-12">
        <br>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae
          placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
      </div>
    </div>
  </mdb-tab>
  <!--Panel 4-->
  <mdb-tab heading="Link3">
    <div class="row">
      <div class="col-12">
        <br>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae
          placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
      </div>
    </div>
  </mdb-tab>
</mdb-tabset>

Angular Navs - API

In this section you will find informations about required modules for navs component.

Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

API Reference for MDB Angular Pagination:
// For MDB Angular Pro
import { TabsModule, WavesModule } from 'ng-uikit-pro-standard'
// For MDB Angular Free
import { WavesModule } from 'angular-bootstrap-md'
Import example Modules list