Page Navigation

Navigation component used within the body of a template

Navigation Properties


Navigation Style [NAV_STYLE]

Changes the visual style of the tab list.

none
No style applied
.nav-tabs
Traditional tab style
.nav-pills
Pill style tabs
.nav-underline
Underline style tabs

Navigation container justification [NAV_JUSTIFY]

Allows for justification of the primary and secondary navigation containers

.justify-content-start
Align navigation items to the left
.justify-content-end
Align navigation items to the right
.justify-content-center
Align navigation items to the center

Navigation Item Space [NAV_GAP]

Provides optional spacing between navigation items

none
No spacing applied
.gap-1
.gap-2
.gap-3
.gap-4
.gap-5
Spacing sizes. Follows global spacing scale.

Navigation Link Type [NAV_LINK_TYPE]

Use the standard navigation link styling or add any available button classes.

.nav-link
Standard navigation link
.btn [BUTTON_CLASSES]
Taks standard button classes

Component Modifier [MODIFIER]

Optionally add a modifier class to the component.

Template
    
      <nav class="nav [NAV_TYPE] [NAV_JUSTIFY] [NAV_GAP] [MODIFIER]" aria-lable="[NAV_LABEL]">
        <a class="[NAV_LINK_TYPE] active" href="#" aria-current="page">...</a>
        <a class="[NAV_LINK_TYPE]" href="#">...</a>
      </nav>

Page Navigation Example

View in new window
View in new window for full preview
      
        <nav class="nav justify-content-start" aria-label="Page">
    <a href="#" class="nav-link active" aria-current="page">Nav Item 1</a>
    <a href="#" class="nav-link">Nav Item 2</a>
    <a href="#" class="nav-link">Nav Item 3</a>
  </nav>

Pill Style Example

View in new window
View in new window for full preview
      
        <nav class="nav nav-pills justify-content-center" aria-label="Page">
    <a href="#" class="nav-link active" aria-current="page">Nav Item 1</a>
    <a href="#" class="nav-link">Nav Item 2</a>
    <a href="#" class="nav-link">Nav Item 3</a>
  </nav>

Underline Style Example

View in new window
View in new window for full preview
      
        <nav class="nav nav-underline justify-content-center gap-3" aria-label="Page">
    <a href="#" class="nav-link active" aria-current="page">Nav Item 1</a>
    <a href="#" class="nav-link">Nav Item 2</a>
    <a href="#" class="nav-link">Nav Item 3</a>
    <a href="#" class="nav-link">Nav Item 4</a>
    <a href="#" class="nav-link">Nav Item 5</a>
  </nav>

Tab Style Example

View in new window
View in new window for full preview
      
        <nav class="nav nav-tabs justify-content-center gap-1" aria-label="Page">
    <a href="#" class="nav-link active" aria-current="page">Nav Item 1</a>
    <a href="#" class="nav-link">Nav Item 2</a>
    <a href="#" class="nav-link">Nav Item 3</a>
    <a href="#" class="nav-link">Nav Item 4</a>
  </nav>