Navs & tabs

Render base navs, tabs, pills, underline navs, alignment utilities, fill and justified layouts, vertical orientation, dropdown gaps, and JavaScript tab behavior.

Base nav

Use bs-nav with bs-nav-item links for a lightweight navigation list. Active items set aria-current automatically for page navigation; disabled items receive disabled styling and accessibility attributes.

aspnet 

<bs-nav aria-label="Base nav example">
    <bs-nav-item href="#" is-active="true">Active</bs-nav-item>
    <bs-nav-item href="#">Link</bs-nav-item>
    <bs-nav-item href="#">Link</bs-nav-item>
    <bs-nav-item href="#" disabled="true">Disabled</bs-nav-item>
</bs-nav>

Available styles

Change the visual style of a nav with nav-style. Visual navs keep navigation semantics; add an explicit tablist role only when links control local tab panels.

Tabs

Set nav-style="Tabs" to render tab-styled navigation links.

aspnet 

<bs-nav nav-style="Tabs" aria-label="Tab nav example">
    <bs-nav-item href="#" is-active="true">Active</bs-nav-item>
    <bs-nav-item href="#">Link</bs-nav-item>
    <bs-nav-item href="#">Link</bs-nav-item>
    <bs-nav-item href="#" disabled="true">Disabled</bs-nav-item>
</bs-nav>

Pills

Use nav-style="Pills" for pill-styled navigation.

aspnet 

<bs-nav nav-style="Pills" aria-label="Pills nav example">
    <bs-nav-item href="#" is-active="true">Active</bs-nav-item>
    <bs-nav-item href="#">Link</bs-nav-item>
    <bs-nav-item href="#">Link</bs-nav-item>
    <bs-nav-item href="#" disabled="true">Disabled</bs-nav-item>
</bs-nav>

Underline

Use nav-style="Underline" when the active link should render with Bootstrap's underline nav style.

aspnet 

<bs-nav nav-style="Underline" aria-label="Underline nav example">
    <bs-nav-item href="#" is-active="true">Active</bs-nav-item>
    <bs-nav-item href="#">Link</bs-nav-item>
    <bs-nav-item href="#">Link</bs-nav-item>
    <bs-nav-item href="#" disabled="true">Disabled</bs-nav-item>
</bs-nav>

Horizontal alignment

Use BCL flex alignment attributes on the nav for centered or end-aligned navigation.

aspnet 

<bs-nav justify-content="Center" aria-label="Centered nav example" bottom-margin="Default3">
    <bs-nav-item href="#" is-active="true">Active</bs-nav-item>
    <bs-nav-item href="#">Link</bs-nav-item>
    <bs-nav-item href="#">Link</bs-nav-item>
    <bs-nav-item href="#" disabled="true">Disabled</bs-nav-item>
</bs-nav>
<bs-nav justify-content="End" aria-label="End aligned nav example">
    <bs-nav-item href="#" is-active="true">Active</bs-nav-item>
    <bs-nav-item href="#">Link</bs-nav-item>
    <bs-nav-item href="#">Link</bs-nav-item>
    <bs-nav-item href="#" disabled="true">Disabled</bs-nav-item>
</bs-nav>

Vertical

Set nav-orientation="Vertical" to stack links and emit a matching ARIA orientation.

aspnet 

<bs-nav nav-orientation="Vertical" align-items="Start" aria-label="Vertical nav example">
    <bs-nav-item href="#" is-active="true">Active</bs-nav-item>
    <bs-nav-item href="#">Link</bs-nav-item>
    <bs-nav-item href="#">Link</bs-nav-item>
    <bs-nav-item href="#" disabled="true">Disabled</bs-nav-item>
</bs-nav>

Fill and justify

Use nav-fill to distribute available space, or nav-justify for equal-width links. Both work with base navs, pills, and tabs.

aspnet 

<bs-nav nav-style="Pills" nav-fill="true" aria-label="Filled nav example" bottom-margin="Default3">
    <bs-nav-item href="#" is-active="true">Active</bs-nav-item>
    <bs-nav-item href="#">Much longer nav link</bs-nav-item>
    <bs-nav-item href="#">Link</bs-nav-item>
    <bs-nav-item href="#" disabled="true">Disabled</bs-nav-item>
</bs-nav>
<bs-nav nav-style="Pills" nav-justify="true" aria-label="Justified nav example">
    <bs-nav-item href="#" is-active="true">Active</bs-nav-item>
    <bs-nav-item href="#">Much longer nav link</bs-nav-item>
    <bs-nav-item href="#">Link</bs-nav-item>
    <bs-nav-item href="#" disabled="true">Disabled</bs-nav-item>
</bs-nav>

Responsive flex utilities

Responsive flex, fill, and text-alignment helpers can make a nav stack on smaller screens and switch to a row at a breakpoint.

aspnet 

<bs-nav nav-style="Pills" flex-direction="Column" flex-direction-sm="Row" aria-label="Responsive nav example">
    <bs-nav-item text-alignment-sm="Center" flex-fill-sm="true" href="#" is-active="true">Active</bs-nav-item>
    <bs-nav-item text-alignment-sm="Center" flex-fill-sm="true" href="#">Longer nav link</bs-nav-item>
    <bs-nav-item text-alignment-sm="Center" flex-fill-sm="true" href="#">Link</bs-nav-item>
    <bs-nav-item text-alignment-sm="Center" flex-fill-sm="true" href="#" disabled="true">Disabled</bs-nav-item>
</bs-nav>

Tabs with JavaScript behavior

Use bs-tab-nav when each tab should own its pane in Razor while still rendering Bootstrap's split tab trigger and content DOM.

Home tab content.
Profile tab content.
Contact tab content.
Disabled tab content.

Last shown tab: home-tab

aspnet 

<bs-tab-nav id="docsTab" aria-label="JavaScript tabs example" content-id="docsTabContent" content-borders="All" removed-borders="Top" padding="Default3" on-shown="document.getElementById('docsTabEventLog').textContent = 'Last shown tab: ' + event.target.id">
    <bs-tab-item id="home-tab" is-active="true">
        Home
        <bs-tab-content id="home-tab-pane">Home tab content.</bs-tab-content>
    </bs-tab-item>
    <bs-tab-item id="profile-tab">
        Profile
        <bs-tab-content id="profile-tab-pane">Profile tab content.</bs-tab-content>
    </bs-tab-item>
    <bs-tab-item id="contact-tab">
        Contact
        <bs-tab-content id="contact-tab-pane">Contact tab content.</bs-tab-content>
    </bs-tab-item>
    <bs-tab-item id="disabled-tab" disabled="true">
        Disabled
        <bs-tab-content id="disabled-tab-pane">Disabled tab content.</bs-tab-content>
    </bs-tab-item>
</bs-tab-nav>
<bs-p id="docsTabEventLog" top-margin="Default2" bottom-margin="None" body-text-color="Secondary">Last shown tab: home-tab</bs-p>

Pills with JavaScript behavior

The same tab plugin works with pill styling. Use bs-tab-nav with pill styling when the trigger and pane should remain colocated in Razor.

Home pill content.
Profile pill content.
Contact pill content.
aspnet 

<bs-tab-nav tab-style="Pills" id="docsPillTab" aria-label="JavaScript pills example" bottom-margin="Default3">
    <bs-tab-item id="pill-home-tab" is-active="true" toggle="pill">
        Home
        <bs-tab-content id="pill-home">Home pill content.</bs-tab-content>
    </bs-tab-item>
    <bs-tab-item id="pill-profile-tab" toggle="pill">
        Profile
        <bs-tab-content id="pill-profile">Profile pill content.</bs-tab-content>
    </bs-tab-item>
    <bs-tab-item id="pill-contact-tab" toggle="pill">
        Contact
        <bs-tab-content id="pill-contact">Contact pill content.</bs-tab-content>
    </bs-tab-item>
</bs-tab-nav>

Using dropdowns

Bootstrap supports dropdowns inside tabs and pills. Use bs-nav-dropdown-item with standard bs-dropdown-menu content.

aspnet 

<bs-nav nav-style="Tabs" aria-label="Tabs with dropdowns example" bottom-margin="Default3">
    <bs-nav-item href="#" is-active="true">Active</bs-nav-item>
    <bs-nav-dropdown-item>
        More
        <bs-dropdown-menu>
            <bs-dropdown-menu-item href="#">Action</bs-dropdown-menu-item>
            <bs-dropdown-menu-item href="#">Another action</bs-dropdown-menu-item>
            <bs-dropdown-menu-divider />
            <bs-dropdown-menu-item href="#">Separated link</bs-dropdown-menu-item>
        </bs-dropdown-menu>
    </bs-nav-dropdown-item>
    <bs-nav-item href="#" disabled="true">Disabled</bs-nav-item>
</bs-nav>
<bs-nav nav-style="Pills" aria-label="Pills with dropdowns example">
    <bs-nav-item href="#" is-active="true">Active</bs-nav-item>
    <bs-nav-dropdown-item>
        More
        <bs-dropdown-menu>
            <bs-dropdown-menu-item href="#">Action</bs-dropdown-menu-item>
            <bs-dropdown-menu-item href="#">Another action</bs-dropdown-menu-item>
        </bs-dropdown-menu>
    </bs-nav-dropdown-item>
    <bs-nav-item href="#" disabled="true">Disabled</bs-nav-item>
</bs-nav>

JavaScript API

Bootstrap's tab plugin can be controlled through data attributes or JavaScript. Methods are asynchronous and return when the transition starts; calls on a transitioning tab can be ignored. Common methods are show, dispose, getInstance, and getOrCreateInstance. Tab changes raise hide.bs.tab, hidden.bs.tab, show.bs.tab, and shown.bs.tab.

Use on-show, on-shown, on-hide, and on-hidden on bs-tab-nav when the tab composition needs lifecycle callbacks. The helper maps those callbacks onto the generated tab triggers where Bootstrap raises the native events.

aspnet 

<bs-tab-nav on-shown="console.log('shown tab', event.target.id)">
<bs-tab-item is-active="true">
    Home
    <bs-tab-content>Home tab content.</bs-tab-content>
</bs-tab-item>
<bs-tab-item>
    Profile
    <bs-tab-content>Profile tab content.</bs-tab-content>
</bs-tab-item>
</bs-tab-nav>

Accessibility

CSS variables

Bootstrap exposes nav CSS variables for link spacing, colors, hover states, disabled states, tabs, pills, and underline variants. BCL emits the supported nav structures while site styles own theme-level customization.

Sass variables

Bootstrap's Sass variables define nav link padding, colors, tab borders, pill radius, and underline spacing before runtime styles are generated.