Navbar

Description

The navbar is localized at the top of the page. By default, the navbar is fixed, but can be changed with display classes. See Util page for it. There is a navbar in Turbo Vision example. Check the Examples page for it.

Code Examples

These are some examples for component:

<nav class="tui-nav">
    ...
</nav>

This is an example with a navbar containing dropdowns. Check the Dropdown page for more examples.

<nav class="tui-nav">
    <ul>
        <li class="tui-dropdown">
            <span class="red-168-text">F</span>ile
            <div class="tui-dropdown-content">
                <ul>
                    <li><a href="#!"><span class="red-168-text">N</span>ew</a></li>
                </ul>
            </div>
        </li>
    </ul>
</nav>

The clock in the left side of the navbar is a component of the framework. Check the Datetime page to create this, or see the example below:

<nav class="tui-nav">
    <span class="tui-datetime" data-format="h:m:s a"></span>
</nav>

Component Classes

This is the table with available classes for this component.

Class	Description
.tui-nav	Creates a navbar