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.
More Tab/Pill Styles
.nav-pills-flat (with overflow scrollbar)
.nav-tabs-flat
.nav-pills-flat + .nav-rounded-group
.nav-pills-border-bottom
.nav-pills-border-bottom + .nav-pills-border-lg
.nav-pills-border-bottom-inside
.nav-pills-border-bottom-inside + .nav-pills-border-lg
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.