Topic: Default app bar and fixed tab bar

sales pro asked 5 years ago


Is it possible to have a navbar with two rows, similar to this? Material Design Example Image

Marta Wierzbicka staff answered 5 years ago


Hi, This is not navbar actually, but tabs as Material Design Guide says: https://material.io/guidelines/components/tabs.html#tabs-usage. We have tabs like this in our documentation here: https://mdbootstrap.com/components/tabs/#classic-tabs. So, we don't have double navbar in MDB, but you can try to create something like here:
<!-- Nav tabs -->
<div class="tabs-wrapper"> 
    <ul class="nav classic-tabs tabs-cyan pt-1" role="tablist">
        <li class="nav-item">
            <h4 class="nav-link waves-light text-white" data-toggle="tab" href="#panel51" role="tab"><strong>Page title</strong></h4>
        </li>
    </ul>
    <ul class="nav classic-tabs tabs-cyan" role="tablist">
        <li class="nav-item">
            <a class="nav-link waves-light active" data-toggle="tab" href="#panel51" role="tab">Profile</a>
        </li>
        <li class="nav-item">
            <a class="nav-link waves-light" data-toggle="tab" href="#panel52" role="tab">Follow</a>
        </li>
        <li class="nav-item">
            <a class="nav-link waves-light" data-toggle="tab" href="#panel53" role="tab">Contact</a>
        </li>
        <li class="nav-item">
            <a class="nav-link waves-light" data-toggle="tab" href="#panel54" role="tab">Be awesome</a>
        </li>
    </ul>
</div>
Best, Marta

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags