Skip to content

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:

  1. The wrapper uses a base class .nav which can either be applied to an ul element or nav or div elements.
  2. The navigation item uses the class .nav-item and is applied to the li elements within list navigations.
  3. The navigation link uses the class .nav-link and is applied to the a elements 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:

  1. Add a .dropdown class to you .nav-item element.
  2. Then add a .dropdown-toggle class & data-toggle="dropdown" attribute to your .nav-link element.
  3. Include your structured .dropdown-menu after your .nav-link element.

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


Accordion Sidebar/Section Menus


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.

Simple

Small

Large

Awesome Features

99.9% Uptime / Free Upgrades / Fully Responsive / Bug Free
Theme Colours

Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

Cookies are NOT enabled so colour selection is not persistent.

Back to main homepage

Back to intro page