Tabs are quasi-navigation components which can highly improve website clarity and increase user experience.
UsageNg Tabs
Basic tabs are divided into 2 main sections - Tabs navs (containing Nav-item
s) and Tabs content (containing Tab-pane
s).
<!-- Pills navs -->
<ul class="Nav Nav-tabs MB-3" id="tabBasic" role="tablist">
<li class="Nav-item" role="presentation">
<a class="Nav-link Active" id="tabBasic-tab-1" href="#tabBasic-tabs-1" role="tab" aria-controls="tabBasic-tabs-1"
(click)="$event.preventDefault()" aria-selected="true">Tab 1</a>
</li>
<li class="Nav-item" role="presentation">
<a class="Nav-link" id="tabBasic-tab-2" href="#tabBasic-tabs-2" role="tab" aria-controls="tabBasic-tabs-2"
(click)="$event.preventDefault()" aria-selected="false">Tab 2</a>
</li>
<li class="Nav-item" role="presentation">
<a class="Nav-link" id="tabBasic-tab-3" href="#tabBasic-tabs-3" role="tab" aria-controls="tabBasic-tabs-3"
(click)="$event.preventDefault()" aria-selected="false">Tab 3</a>
</li>
<li class="Nav-item" role="presentation">
<a class="Nav-link Disabled" href="#">Disabled</a>
</li>
</ul>
<!-- Pills navs -->
<!-- Pills content -->
<div class="Tab-content" id="tabBasic-content">
<div class="Tab-pane Fade Active Show" id="tabBasic-tabs-1" role="tabpanel" aria-labelledby="tabBasic-tab-1">
Tab 1 content
</div>
<div class="Tab-pane Fade" id="tabBasic-tabs-2" role="tabpanel" aria-labelledby="tabBasic-tab-2">
Tab 2 content
</div>
<div class="Tab-pane Fade" id="tabBasic-tabs-3" role="tabpanel" aria-labelledby="tabBasic-tab-3">
Tab 3 content
</div>
</div>
<!-- Pills content -->
<!-- Pills navs -->
<ul class="Nav Nav-tabs-classic MB-3" id="tabClassic" role="tablist">
<li class="Nav-item" role="presentation">
<a class="Nav-link Active" id="tabClassic-tab-1" href="#tabClassic-tabs-1" role="tab" aria-controls="tabClassic-tabs-1"
(click)="$event.preventDefault()" aria-selected="true">Tab 1</a>
</li>
<li class="Nav-item" role="presentation">
<a class="Nav-link" id="tabClassic-tab-2" href="#tabClassic-tabs-2" role="tab" aria-controls="tabClassic-tabs-2"
(click)="$event.preventDefault()" aria-selected="false">Tab 2</a>
</li>
<li class="Nav-item" role="presentation">
<a class="Nav-link" id="tabClassic-tab-3" href="#tabClassic-tabs-3" role="tab" aria-controls="tabClassic-tabs-3"
(click)="$event.preventDefault()" aria-selected="false">Tab 3</a>
</li>
<li class="Nav-item" role="presentation">
<a class="Nav-link Disabled" href="#">Disabled</a>
</li>
</ul>
<!-- Pills navs -->
<!-- Pills content -->
<div class="Tab-content" id="tabClassic-content">
<div class="Tab-pane Fade Active Show" id="tabClassic-tabs-1" role="tabpanel" aria-labelledby="tabClassic-tab-1">
Tab 1 content
</div>
<div class="Tab-pane Fade" id="tabClassic-tabs-2" role="tabpanel" aria-labelledby="tabClassic-tab-2">
Tab 2 content
</div>
<div class="Tab-pane Fade" id="tabClassic-tabs-3" role="tabpanel" aria-labelledby="tabClassic-tab-3">
Tab 3 content
</div>
</div>
<!-- Pills content -->
Force your .Nav
's contents to extend the full available width one of two modifier classes.
To proportionately fill all available space with your .Nav-item
s, use .Nav-fill
. Notice that all horizontal space is occupied, but not every nav item has the same width.
<!-- Pills navs -->
<ul class="Nav Nav-tabs Nav-fill MB-3" id="tabFill" role="tablist">
<li class="Nav-item" role="presentation">
<a class="Nav-link" id="tabFill-tab-1" href="#tabFill-tabs-1" role="tab" aria-controls="tabFill-tabs-1"
(click)="$event.preventDefault()" aria-selected="true">Tab 1</a>
</li>
<li class="Nav-item" role="presentation">
<a class="Nav-link Active" id="tabFill-tab-2" href="#tabFill-tabs-2" role="tab" aria-controls="tabFill-tabs-2"
(click)="$event.preventDefault()" aria-selected="false">Very very very very long Tab 2</a>
</li>
<li class="Nav-item" role="presentation">
<a class="Nav-link" id="tabFill-tab-3" href="#tabFill-tabs-3" role="tab" aria-controls="tabFill-tabs-3"
(click)="$event.preventDefault()" aria-selected="false">Tab 3</a>
</li>
</ul>
<!-- Pills navs -->
<!-- Pills content -->
<div class="Tab-content" id="tabFill-content">
<div class="Tab-pane Fade" id="tabFill-tabs-1" role="tabpanel" aria-labelledby="tabFill-tab-1">
Tab 1 content
</div>
<div class="Tab-pane Fade Active Show" id="tabFill-tabs-2" role="tabpanel" aria-labelledby="tabFill-tab-2">
Tab 2 content
</div>
<div class="Tab-pane Fade" id="tabFill-tabs-3" role="tabpanel" aria-labelledby="tabFill-tab-3">
Tab 3 content
</div>
</div>
<!-- Pills content -->
For equal-width elements, use .Nav-justified
. All horizontal space will be occupied by nav links, but unlike the .Nav-fill
above, every nav item will be the same width.
<!-- Pills navs -->
<ul class="Nav Nav-tabs Nav-justified MB-3" id="tabJustify" role="tablist">
<li class="Nav-item" role="presentation">
<a class="Nav-link Active" id="tabJustify-tab-1" href="#tabJustify-tabs-1" role="tab"
aria-controls="tabJustify-tabs-1" (click)="$event.preventDefault()" aria-selected="true">Tab 1</a>
</li>
<li class="Nav-item" role="presentation">
<a class="Nav-link" id="tabJustify-tab-2" href="#tabJustify-tabs-2" role="tab"
aria-controls="tabJustify-tabs-2" (click)="$event.preventDefault()" aria-selected="false">Very very very very long Tab 2</a>
</li>
<li class="Nav-item" role="presentation">
<a class="Nav-link" id="tabJustify-tab-3" href="#tabJustify-tabs-3" role="tab"
aria-controls="tabJustify-tabs-3" (click)="$event.preventDefault()" aria-selected="false">Tab 3</a>
</li>
</ul>
<!-- Pills navs -->
<!-- Pills content -->
<div class="Tab-content" id="tabJustify-content">
<div class="Tab-pane Fade Active Show" id="tabJustify-tabs-1" role="tabpanel" aria-labelledby="tabJustify-tab-1">
Tab 1 content
</div>
<div class="Tab-pane Fade" id="tabJustify-tabs-2" role="tabpanel" aria-labelledby="tabJustify-tab-2">
Tab 2 content
</div>
<div class="Tab-pane Fade" id="tabJustify-tabs-3" role="tabpanel" aria-labelledby="tabJustify-tab-3">
Tab 3 content
</div>
</div>
<!-- Pills content -->
Stack your navigation by changing the flex item direction with the .Flex-column
utility.
<div class="Row">
<div class="Col-3">
<!-- Tab navs -->
<div class="Nav Flex-column Nav-tabs Text-center" id="v-tabs-tab" role="tablist" aria-orientation="vertical">
<a class="Nav-link" id="v-tabs-home-tab" href="#v-tabs-home" role="tab"
(click)="$event.preventDefault()" aria-controls="v-tabs-home" aria-selected="false">Home</a>
<a class="Nav-link Active" id="v-tabs-profile-tab" href="#v-tabs-profile" role="tab"
(click)="$event.preventDefault()" aria-controls="v-tabs-profile" aria-selected="true">Profile</a>
<a class="Nav-link" id="v-tabs-messages-tab" href="#v-tabs-messages" role="tab"
(click)="$event.preventDefault()" aria-controls="v-tabs-messages" aria-selected="false">Messages</a>
</div>
<!-- Tab navs -->
</div>
<div class="Col-9">
<!-- Tab content -->
<div class="Tab-content" id="v-tabs-tabContent">
<div class="Tab-pane Fade" id="v-tabs-home" role="tabpanel" aria-labelledby="v-tabs-home-tab">
Home content
</div>
<div class="Tab-pane Fade Active Show" id="v-tabs-profile" role="tabpanel"
aria-labelledby="v-tabs-profile-tab">
Profile content
</div>
<div class="Tab-pane Fade" id="v-tabs-messages" role="tabpanel" aria-labelledby="v-tabs-messages-tab">
Messages content
</div>
</div>
<!-- Tab content -->
</div>
</div>
Testing with FontAwesome Icons.
<!-- Pills navs -->
<ul class="Nav Nav-tabs MB-3" id="tabWithIcons" role="tablist">
<li class="Nav-item" role="presentation">
<a class="Nav-link Active" id="tabWithIcons-tab-1" href="#tabWithIcons-tabs-1" role="tab"
aria-controls="tabWithIcons-tabs-1" (click)="$event.preventDefault()" aria-selected="true">
<i class="fa-solid fa-home ME-2"></i> Home
</a>
</li>
<li class="Nav-item" role="presentation">
<a class="Nav-link" id="tabWithIcons-tab-2" href="#tabWithIcons-tabs-2" role="tab"
aria-controls="tabWithIcons-tabs-2" (click)="$event.preventDefault()" aria-selected="false">
<i class="fa-solid fa-user ME-2"></i> Profile
</a>
</li>
<li class="Nav-item" role="presentation">
<a class="Nav-link" id="tabWithIcons-tab-3" href="#tabWithIcons-tabs-3" role="tab"
aria-controls="tabWithIcons-tabs-3" (click)="$event.preventDefault()" aria-selected="false">
<i class="fa-solid fa-message ME-2"></i> Messages
</a>
</li>
</ul>
<!-- Pills navs -->
<!-- Pills content -->
<div class="Tab-content" id="tabWithIcons-content">
<div class="Tab-pane Fade Active Show" id="tabWithIcons-tabs-1" role="tabpanel"
aria-labelledby="tabWithIcons-tab-1">
Tab 1 Home
</div>
<div class="Tab-pane Fade" id="tabWithIcons-tabs-2" role="tabpanel" aria-labelledby="tabWithIcons-tab-2">
Tab 2 Profile
</div>
<div class="Tab-pane Fade" id="tabWithIcons-tabs-3" role="tabpanel" aria-labelledby="tabWithIcons-tab-3">
Tab 3 Messages
</div>
</div>
<!-- Pills content -->
Dynamic tabbed interfaces, as described in the WAI ARIA Authoring Practices, require role="tablist", role="tab", role="tabpanel"
, and additional aria-
attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).
<!-- Pills navs -->
<ul class="Nav Nav-tabs MB-3" id="tabs-tab" role="tablist">
<li class="Nav-item" role="presentation">
<button class="Nav-link Active" id="tabs-home-tab"
type="button" role="tab" aria-controls="tabs-home" aria-selected="true">
Home
</button>
</li>
<li class="Nav-item" role="presentation">
<button class="Nav-link" id="tabs-profile-tab"
type="button" role="tab" aria-controls="tabs-profile" aria-selected="false">
Profile
</button>
</li>
<li class="Nav-item" role="presentation">
<button class="Nav-link" id="tabs-contact-tab"
type="button" role="tab" aria-controls="tabs-contact" aria-selected="false">
Contact
</button>
</li>
</ul>
<!-- Pills navs -->
<!-- Pills content -->
<div class="Tab-content" id="tabs-tabContent">
<div class="Tab-pane Fade Show Active" id="tabs-home2" role="tabpanel" aria-labelledby="tabs-home-tab">
Tab 1 content
</div>
<div class="Tab-pane Fade" id="tabs-profile2" role="tabpanel" aria-labelledby="tabs-profile-tab">
Tab 2 content
</div>
<div class="Tab-pane Fade" id="tabs-contact2" role="tabpanel" aria-labelledby="tabs-contact-tab">
Tab 3 content
</div>
</div>
<!-- Pills content -->