Navs
Base Nav
Use base .navclass for building all types of navigation components. For light & Dark backgrounds use .nav-light, .nav-darkmodifier classes. For alignments and vertical navigation please check official documentation.
Nav light
Nav dark
Tabs
Add the .nav-tabsmodifier class to generate a tabbed interface.
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-pillsclass 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-squaremodifier class to create a square pills.
Pills Rounded
Add the .nav-pills-roundedmodifier class to create a rounded pills.
Sizing
The .nav-smmodifier 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-leftclass along with .nav-link.
Nav with icon on top
Add .link-icon-topclass along with .nav-link.