Tabs vertical
Bootstrap 5 Tabs vertical component
Responsive Tabs vertical built with Bootstrap 5. An example of bootstrap tabs vertical. Easy to implement and customize.
Basic example
Pills are divided into 2 main sections -
Pills navs (containing nav-links) and
Pills content (containing tab-panes).
Use id and href attribute to connect pills navs with pills content.
In the example below Link 1 uses href="#v-pills-link1" in the first
nav-link element to connect it with the first tab-pane which has an
ID v-pills-link1.
Stack your navigation by changing the flex item direction with the
.flex-column utility. Need to stack them on some viewports but not others? Use
the responsive versions (e.g., .flex-sm-column).
For proper layout, you may also need to use a grid to adjust navs and content.
To learn more read Pills Docs.
<div class="row">
<div class="col-3">
<!-- Tab navs -->
<div
class="nav flex-column nav-pills text-center"
id="v-pills-tab"
role="tablist"
aria-orientation="vertical"
>
<a
class="nav-link active"
id="v-pills-link1-tab"
data-mdb-pill-init
href="#v-pills-link1"
role="tab"
aria-controls="v-pills-link1"
aria-selected="true"
>Link 1</a
>
<a
class="nav-link"
id="v-pills-link2-tab"
data-mdb-pill-init
href="#v-pills-link2"
role="tab"
aria-controls="v-pills-link2"
aria-selected="false"
>Link 2</a
>
<a
class="nav-link"
id="v-pills-link3-tab"
data-mdb-pill-init
href="#v-pills-link3"
role="tab"
aria-controls="v-pills-link3"
aria-selected="false"
>Link 3</a
>
<a
class="nav-link"
id="v-pills-link4-tab"
data-mdb-pill-init
href="#v-pills-link4"
role="tab"
aria-controls="v-pills-link4"
aria-selected="false"
>Link 4</a
>
</div>
<!-- Tab navs -->
</div>
<div class="col-9">
<!-- Tab content -->
<div class="tab-content" id="v-pills-tabContent">
<div
class="tab-pane fade show active"
id="v-pills-link1"
role="tabpanel"
aria-labelledby="v-pills-link1-tab"
>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Corporis molestias porro, eius magnam provident eos!
</div>
<div
class="tab-pane fade"
id="v-pills-link2"
role="tabpanel"
aria-labelledby="v-pills-link2-tab"
>
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Est, excepturi illo neque eaque error corrupti laborum alias
veniam natus molestias in cupiditate magnam ratione voluptatem!
</div>
<div
class="tab-pane fade"
id="v-pills-link3"
role="tabpanel"
aria-labelledby="v-pills-link3-tab"
>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Aspernatur, illum.
</div>
<div
class="tab-pane fade"
id="v-pills-link4"
role="tabpanel"
aria-labelledby="v-pills-link4-tab"
>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Sequi quasi dicta qui porro eligendi nam doloribus vel minus ullam quam!
</div>
</div>
<!-- Tab content -->
</div>
</div>