Navigation Documentation and examples for how to use Bootstrap’s included navigation components.
Enable Component
Enable the nav component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
    bundles: {
        main: {
            pages: ['**/*.html'],
            components: {
                nav: true // Enable nav component
            }
        }
    }
}
Basic Usage
Explore more examples from the previewer tab
<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" href="#">
            <span class="nav-link-content">Home</span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">
            <span class="nav-link-content">About</span>
        </a>
    </li>
</ul>
Tabs Usage
Explore more examples from the previewer tab
<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" data-bs-toggle="tab" href="#t1">
            <span class="nav-link-content">Tab 1</span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#t2">
            <span class="nav-link-content">Tab 2</span>
        </a>
    </li>
</ul>
<div class="tab-content mt-3">
    <div class="tab-pane fade show active" id="t1">
        Tab 1 ...
    </div>
    <div class="tab-pane fade" id="t2">
        Tab 2 ...
    </div>
</div>
NameDescription
.navBase class of the nav list
.nav.nav-tabsApplies tabs style to nav list items
.nav.nav-pillsApplies pills style to nav list items
.nav.nav-underlineApplies underline style to nav list items
.nav.nav-underline.dividerApplies underline style to nav list items with a divider
.nav.nav-fillFills the entire nav area with nav items
.nav.nav-justifiedFills the entire nav area with nav items with equal widths
.nav > .nav-itemApplies to the base element of a nav item
.nav > .nav-item > .nav-linkApplies to the clickable link within a nav item
.nav > .nav-item > .nav-link.activeMakes the clickable link within the nav item in an active state
.nav > .nav-item > .nav-link.disabledMakes the clickable link within the nav item in a disabled state
.nav > .nav-item > .nav-link > .nav-link-contentApplies to the actual text of the nav item within the clickable link
.tab-contentApplies to the wrapper of tab elements
.tab-content > .tab-paneApplies to the wrapper a singular tab within the tabs wrapper
.tab-content > .tab-pane.fadeApplies fade effect when switching between tabs
.tab-content > .tab-pane.showShows the current tab when applied to a single tap pane
.tab-content > .tab-pane.activeIndicates that the tap-pane is active
Customize variables at:/library/extend/components/_nav.scss
Component's defaults:/library/components/nav/_defaults.scss
NameDefault valueNote
$nav-link-padding-y.532rem
$nav-link-padding-x.75rem
$nav-link-font-size$font-size-base
$nav-link-font-weightnull
$nav-link-colornull
$nav-link-hover-colornull
$nav-link-transitioncolor .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out
$nav-link-disabled-colorproperty.get(ui-base-color-6)Requires @use "@library/sass/modules/property";
$nav-tabs-border-colorproperty.get(divider)Requires @use "@library/sass/modules/property";
$nav-tabs-border-width$border-width
$nav-tabs-border-radius$border-radius
$nav-tabs-link-hover-border-color$nav-tabs-border-color
$nav-tabs-link-active-colorproperty.get(main-text-color)Requires @use "@library/sass/modules/property";
$nav-tabs-link-active-bgproperty.get(card-background)Requires @use "@library/sass/modules/property";
$nav-tabs-link-active-border-colorproperty.get(divider) property.get(divider) $nav-tabs-link-active-bgRequires @use "@library/sass/modules/property";
$nav-pills-border-radius$border-radius
$nav-pills-link-active-colorproperty.get(primary-contrast)Requires @use "@library/sass/modules/property";
$nav-pills-link-active-bgproperty.get(primary)Requires @use "@library/sass/modules/property";
$nav-underline-content-margin5px 0
$nav-underline-border-radius4px
$nav-underline-font-weight500
$nav-underline-colorproperty.get(main-text-color)Requires @use "@library/sass/modules/property";
$nav-underline-active-colorproperty.get(primary)Requires @use "@library/sass/modules/property";
$nav-underline-active-box-shadowinset 0 -2px 0 0 $nav-underline-active-color
$nav-underline-hover-colornull
$nav-underline-hover-bgproperty.get(primary-t-08)Requires @use "@library/sass/modules/property";
$nav-underline-divider-colorproperty.get(divider)Requires @use "@library/sass/modules/property";

Make sure to read the Customize components and Understanding and using the design system guides.

{title}