Navs
Base Nav
Use base .nav class for building all types of navigation components. For light & Dark backgrounds use .nav-light, .nav-dark modifier classes. For alignments and vertical navigation please check official documentation.
Nav light
Nav dark
Tabs
Add the .nav-tabs modifier class to generate a tabbed interface.
Working Tab Example
HOME
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Tabs active colors
| Class | Values |
|---|---|
class="nav-tabs nav-tabs-[value]" |
primary / success / warning / danger / info / light / dark / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke |
Pills
Add the .nav-pills class to create a pilled navigation.
Pills active color
| Class | Values |
|---|---|
class="nav-pills nav-pills-[value]" |
primary / success / warning / danger / info / light / dark / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke |
Pills Square
Add .nav-pills-square modifier class to create a square pills.
Pills Rounded
Add the .nav-pills-rounded modifier class to create a rounded pills.
Sizing
The .nav-sm modifier class is used to for smaller size navs.
Fill and Justify
Nav Fill
To proportionately fill all available space with your .nav-items, use .nav-fill.
Nav justified
For equal-width elements, use .nav-justified.
Nav with icon on left
Add .link-icon-left class along with .nav-link.
Nav with icon on top
Add .link-icon-top class along with .nav-link.