Tabs

General information

Navigation tabs are one of the features specified in the "global.css" file which is found in the "custom" plug-in folder.

A typical example of navigation tabs in our applications looks like this:

Example

A page section with 3 navigation tabs is implemented in the following way:

<div>
    <ul class="tabnav nav-tabs">
        <li class="active" data-value="tab-1"><a> Tab 1 </a></li>
            <li class=""       data-value="tab-2"><a> Tab 2 </a></li>
            <li class=""       data-value="tab-3"><a> Tab 3 </a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="tab-1">
            <div class="order-tab">
                Content 1
            </div>
        </div>
        <div class="tab-pane" id="tab-2">
            <div class="order-tab">
                Content 2
            </div>
        </div>
        <div class="tab-pane" id="tab-3">
            <div class="order-tab">
                Content 3
            </div>
        </div>
    </div>
</div>

For more examples: https://mdbootstrap.com/docs/standard/navigation/tabs/

https://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp