Default app bar and fixed tab bar

Topic: Default app bar and fixed tab bar

sales pro asked 8 years ago

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

Add comment

Marta Szymanska staff pro premium answered 8 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

Add comment

Write

Create snippet

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

About author

sales

Pro User

12Support score
3Questions 1Answers

0Snippets likes 0Snippets