• More Theme Elements
• Alerts
• Animations
• Avatars
• Badges
• Button Groups
• Buttons
• Cards
• Carousels
• Collapse / Accordions
• Colours Utils
• Cookie Banners
• Counters
• Call To Action Blocks
• Dividers
• Dropdowns
• Forms
• Forms Input Groups
• Icons
  • Icon Utils/Overview
  • Icons: Bootstrap
  • Icons: Flags
  • Icons: Font Awesome
  • Icons: Ionicons
  • Icons: Linearicons
  • Icons: Line Awesome
• List Groups
• Modals
• Modals Onload
• Navs
• Tabbable Navs
• Overlays
• Progress Bars
• Select Picker
• Shadows
• Social Media Branding
• Spacers
• Spinners
• Tables
• Toasts
• Tooltips & Popovers
• Type Effect
• Typography
• Utilities
• Video Blocks
• Page Titles

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

• Active
• Link
• Link
• Disabled

Nav with links navigation

---

Alignment

You can use the flexbox utilities to align the alignment of navigation items.

Center .justify-content-center

• Active
• Link
• Link
• Disabled

Right .justify-content-end

• Active
• Link
• Link
• Disabled

---

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

• Active
• Link
• Link
• Disabled

Vertical Tabs

Add the class .flex-column to the wrapper to stack items vertically.

• Active
• Link
• Link
• Disabled

---

Underline

• Active
• Link
• Link
• Disabled

---

Pills

Default

• Active
• Link
• Link
• Disabled

Vertical Pills

Add the class .flex-column to the wrapper to stack items vertically.

• Active
• Link
• Link
• Disabled

---

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-bs-toggle="dropdown" attribute to your .nav-link element.
3. Include your structured .dropdown-menu after your .nav-link element.

Tabs

• Active
• Dropdown
  Action Another action Something else here

  Separated link
• Link
• Disabled

Pills

• Active
• Dropdown
  Action Another action Something else here

  Separated link
• Link
• Disabled

---

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

• Active
• Longer nav link
• Link
• Disabled

Nav Justified

• Active
• Longer nav link
• Link
• Disabled

---

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

1. Home

1. Home
2. Library

1. Home
2. Library
3. Data

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