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.

Link 1 Link 2 Link 3 Link 4
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corporis molestias porro, eius magnam provident eos!
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!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aspernatur, illum.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sequi quasi dicta qui porro eligendi nam doloribus vel minus ullam quam!
Edit in sandbox 
<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>