Navs

Documentation and examples for how to use navigation components.

Bootstrap Navs documentation

Base nav

Centered with .justify-content-center:

Centered with .justify-content-end:

Sizes

Use .nav-sm for smaller size

Use .nav-lg for larger size

Use .nav-link-gray for gray styled color option.

Fill and justify

Force your .nav’s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your .nav-items, use .nav-fill. Notice that all horizontal space is occupied, but not every nav item has the same width.

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

Take that same HTML, but use .nav-pills instead:

Use .nav-pills-shadow to add box-shadow for .active class

Stack your navigation by changing the flex item direction with the .nav-vertical class.

Make arrows visible by setting a max-width size.

Or don't, then they will appear when the side of the content is smaller than the content size. Reduce the browser size to see in action.

Use "type": "vertical" for vertical alignment and the .hs-nav-scroller-vertical class for a scrollbar.

Parameters Description Default value
type Scrollbar type, vertical or horizontal. horizontal
target Element to which the scrollbar will move. .active
delay Animation delay. 20
offset Indent back for scrollbar. 0