# 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:

<figure><img src="https://4150968783-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FE2jCdhU9OpCbUJl0tqSd%2Fuploads%2FtfEJsisJPPksGXu0I5sb%2Fimage.png?alt=media&#x26;token=d65f3a7c-6443-4fb9-a532-82b66b93869d" alt=""><figcaption></figcaption></figure>

## 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://mdbootstrap.com/docs/standard/navigation/tabs/)

[https://www.w3schools.com/bootstrap/bootstrap\_tabs\_pills.asp](https://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp)
