Navs
Documentation and examples for how to use Bootstrap’s included navigation components.
Bootstrap Navs documentationBase nav
Centered with .justify-content-center:
Centered with .justify-content-end:
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.
Nav tabs
Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface.
Nav pills
Take that same HTML, but use .nav-pills instead:
Nav segment
Nav icon
Nav break
Long contents don't fit in small screens? Use .nav-{breakpoint}-down-break modifier classes to break horizontal alignment and keep the same style in vertical order. Reduce browser size to see it in action.
Nav vertical
Stack your navigation by changing the flex item direction with the .flex-column utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., .flex-sm-column).
Nav scroller
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.
Vertical
Use "type": "vertical" for vertical alignment and the .hs-nav-scroller-vertical class for a scrollbar.
Nav scroller methods
| 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
|
Transform tabs to btn
Long contents don't fit in small screens? Plugin breaks tabs to collapse in vertical order. Reduce browser size to see it in action.
You can utilize "transformResolution": "sm|md|lg|xl" to change when they are vertically aligned.
Transfor tabs to btn methods
| Parameters | Description | Default value |
|---|---|---|
transformResolution
|
Trigger breakpoint | null |
btnClassNames
|
Classes for tabs buttons after transform |
null
|