Elements:Navs
This page shows the various navigation components included within the theme which can be used anywhere on the site including tabs, pills, inline navs, breadcrumbs & pagination links.
Base Nav
All Bootstrap navs follow a similar structure:
- The wrapper uses a base class
.navwhich can either be applied to anulelement ornavordivelements. - The navigation item uses the class
.nav-itemand is applied to thelielements within list navigations. - The navigation link uses the class
.nav-linkand is applied to theaelements within list navigations.
Active states are set on the .nav-link element by adding the class .active .
Disabled states are set on the .nav-link element by adding the class .disabled .
List navigation
Nav with links navigation
Sizes
.nav-sm & .nav-lg alter the size of navs via font size and padding on the nav links.
Small .nav-sm
Large .nav-lg
Responsive Navs (flexbox only)
Adding the flexbox flex-column , flex-BREAKPOINT-column , flex-row and flex-BREAKPOINT-row classes to your .nav element allows you to control when nav items stack and when they line up horizontal (float).
flex-column classes stack nav items vertical on top of each other where as flex-row will make nav items "float" horizontally. Combining both classes allows for easy responsive navs.
Leaving these classes out will mean nav items "float" horizontally on all screenwidths.
NOTE: will not work with flexbox disabled.
Stack on mobile, floats on larger screens
Alignment
You can use the flexbox utilities to align the alignment of navigation items.
Center .justify-content-center
Right .justify-content-end
Responsive alignment (flexbox only)
The justify-content-* and align-items-* classes are also responsive so you can control nav items horizontal and vertical alignment per screenwidth.
NOTE: will not work with flexbox disabled.
Horizontal
mobile: align center, desktop: align right
Vertical
mobile: align top, desktop: align center (note: the height is set inline for demo purpose only.
Combined
mobile: horizontal align center, vertical top, desktop: horizontal align right, vertical align center (note: the height is set inline for demo purpose only.
Steps
Default
Large
Circles
Steps become circular on wider screenwidths.
Circles Large
Tabs
Add the class .nav-tabs to the wrapper to force all items to display horizontally in a tab style.
Tabs can use static links or implement tabbable Javascript based tabs, see Tabbable Tabs & Pills.
Default
Vertical Tabs
Add the class .nav-stacked to the wrapper to stack items vertically.
Vertical Tabs Right
Add the classes .nav-stacked and .nav-tabs-right to the wrapper to stack items vertically & align them right.
Pills
Add the class .nav-pill to the wrapper to force all items to display horizontally in a "pill" style.
Pills can use static links or implement Javascript based pills, see "Javascript Tabs & Pills" below.
Default
Vertical Pills
Add the class .nav-stacked to the wrapper to stack items vertically.
Tabs & pills with dropdowns
By using a list structure you can include dropdown menus within the tabs or pills:
- Add a
.dropdownclass to you.nav-itemelement. - Then add a
.dropdown-toggleclass &data-toggle="dropdown"attribute to your.nav-linkelement. - Include your structured
.dropdown-menuafter your.nav-linkelement.
Tabs
Pills
Fill and justify navs
To force nav items to fill the available horizontal space you can use the .nav-fill and .nav-justified . They work the same minus .nav-justified will force all nav items to be the same width.
Nav Fill
Nav Justified
Sidebar/Section Menus
Left Side
Right Side
Accordion Sidebar/Section Menus
Left Side
Right Side
Breadcrumbs
Breadcrumb styling can be applied to ul lists or to links within a wrapper element with the .breadcrumb class, each item within must have the .breadcrumb-item class.
.active class is used to indicate the active breadcrumb item.
List examples
Links & nav examples
Pagination
Pagination uses a list structure with a .pagination class on the ul element and then .page-item on li elements and .page-link on any link elements.