> For the complete documentation index, see [llms.txt](https://aeudoc.gitbook.io/developer/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aeudoc.gitbook.io/developer/presentation/jquery-plugin/tabs.md).

# 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="/files/PgAXSlxiWCtuam7SRqi7" 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://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp>