Basic

The base Nav component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.

Default

This is basic example for nav components

Pill

Take that same HTML, but add pills property

Tab

Takes the basic nav from above and adds the tabs property to generate a tabbed interface.

Line

Take that same HTML, but use lines property

Additional elements

You can combine other elements such as badge, icon or caret to separate nav items, we provide Nav.Addon for wrapping those elements.

Sizing

Add size property and fill it with lg|sm to make navigations are larger or smaller

Vertical

Add vertical property to Nav elements for applying vertical appearance, but this feature is not supported for tabs interface.

Alignment

Change the horizontal alignment of your nav with horizontal property with start|center|end. By default, navs are left-aligned, but you can easily change them to center or right aligned.

Fill and justify

Force your Nav's contents to extend the full available width. To proportionately fill all available space with your Nav.Items, use fill property. For equal-width elements, use justified property. All horizontal space will be occupied by nav links.

Settings

Performance

CPU Load
60%
CPU Temparature
42°
RAM Usage
6,532 MB

Customer care

Reports

Projects

May 14, 2020