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.

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.