Sidenav

Description

The sidenav component is included just in the framework. It is not a tui component available in the old times. The sidenav is a menu in the left or right side of the screen, and this is activated by clicking in a button. There is a sidenav in the Turbo Vision example. Check the Examples page.

Code Examples

These are some examples for component:

Note: To use an always actived sidenav, you have to put your application content in some element with a margin left or right, to give the sidenav space for the page.

<!-- Sidenav -->
<nav class="tui-sidenav">
    <ul>
        <li>
            <a href="#!">
                <span class="red-168-text">O</span>pen
                <span class="tui-shortcut">ctrl+o</span>
            </a>
        </li>
        ...
    </ul>
</nav>

<!-- Sidenav active button -->
<li class="tui-sidenav-button">≡</li>

<!-- Actived sidenav -->
<nav class="tui-sidenav active">
    ...
</nav>

Component Classes

This is the table with available classes for this component.

Class	Description
.tui-sidenav	Creates a sidenav. Use .left or .right to change the sidenav position
.active	Actives the sidenav
.tui-sidenav-button	Creates a sidenav activation button