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.
Add the .nav-tabsmodifier class to generate a tabbed interface.
| 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 |
Add the .nav-pillsclass to create a pilled navigation.
| 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 |
Add .nav-pills-squaremodifier class to create a square pills.
Add the .nav-pills-roundedmodifier class to create a rounded pills.
The .nav-smmodifier class is used to for smaller size navs.
To proportionately fill all available space with your .nav-items, use .nav-fill.
For equal-width elements, use .nav-justified.
Add .link-icon-leftclass along with .nav-link.
Add .link-icon-topclass along with .nav-link.