Angular Bootstrap Navs

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.

.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

.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]="'nav-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

<ul class="nav md-pills pills-unique">
    <li class="nav-item">
        <a class="nav-link active" href="#!">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link 1</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link 2</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link 3</a>
    </li>
</ul>

Pills justified MDB Pro component

<ul class="nav md-pills nav-justified">
    <li class="nav-item">
        <a class="nav-link active" href="#!">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link 1</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link 2</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link 3</a>
    </li>
</ul>

Pills with dropdown MDB Pro component

<ul class="nav md-pills nav-justified pills-primary">
    <li class="nav-item">
        <a class="nav-link active " href="#">Active</a>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Separated link</a>
        </div>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link 1</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link 2</a>
    </li>
</ul>

API Reference:

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'