# Tab

### [Interactive demo](https://vision.crimsonlogic.studio/jds/v2.1/components.html#tab-wrapper)

### Horizontal tabs - Left aligned

By default tabs are aligned to left. If it needs to be centered or right aligned, change "<`ul class="nav nav-tabs left` to `ul class="nav nav-tabs center` **or** `ul class="nav nav-tabs right`

<div align="left"><img src="/files/fPUquAYs8mSk4KFrsgby" alt=""></div>

```html
<div class="horizontal-tab accordion-tab">
        <ul class="nav nav-tabs" role="tablist">
          <li class="nav-item"> <a class="nav-link active" href="#ht-1" role="tab" data-bs-toggle="tab" aria-selected="true">Horizontal Tab 1</a> </li>
          <li class="nav-item"> <a class="nav-link" href="#ht-2" role="tab" data-bs-toggle="tab" aria-selected="false">Horizontal Tab 2</a> </li>
          <li class="nav-item"> <a class="nav-link" href="#ht-3" role="tab" data-bs-toggle="tab" aria-selected="false">Horizontal Tab 3</a> </li>
        </ul>
        <div id="tab-content-1" class="accordion tab-content">
          <div id="ht-1" class="accordion-item tab-pane fade show active">
            <div class="accordion-header" role="tab">
              <h2 class="mb-0">
                <button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#h-tab-1" aria-expanded="true">Horizontal Tab 1</button>
              </h2>
            </div>
            <div id="h-tab-1" class="collapse show" data-parent="#tab-content-1">
              <div class="accordion-body">
                <h3 class="tab-title">Tab 1 Content</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
                  it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
                  sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
              </div>
            </div>
          </div>
          <div id="ht-2" class="accordion-item tab-pane fade" role="tabpanel">
            <div class="accordion-header" role="tab">
              <h2 class="mb-0">
                <button class="btn btn-link collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#h-tab-2" aria-expanded="true">Horizontal Tab 2</button>
              </h2>
            </div>
            <div id="h-tab-2" class="collapse" data-parent="#tab-content-1">
              <div class="accordion-body">
                <h3 class="tab-title">Tab 2 Content</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
                  it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
                  sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
              </div>
            </div>
          </div>
          <div id="ht-3" class="accordion-item tab-pane fade" role="tabpanel">
            <div class="accordion-header" role="tab">
              <h2 class="mb-0">
                <button class="btn btn-link collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#h-tab-3" aria-expanded="true">Horizontal Tab 3</button>
              </h2>
            </div>
            <div id="h-tab-3" class="collapse" data-parent="#tab-content-1">
              <div class="accordion-body">
                <h3 class="tab-title">Tab 3 Content</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
                  it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
                  sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
```

### Horizontal boxed tabs with icon

<div align="left"><img src="/files/Q3a6gfqGihrYUuRxyIIc" alt=""></div>

```html
<div class="horizontal-boxed-tab accordion-tab has-icon">
        <ul class="nav nav-tabs" role="tablist">
          <li class="nav-item"> <a class="nav-link active" href="#hbt-1" role="tab" data-bs-toggle="tab" aria-selected="true"><span><i class="fal fa-briefcase"></i></span>Horizontal Boxed Tab 1</a> </li>
          <li class="nav-item"> <a class="nav-link" href="#hbt-2" role="tab" data-bs-toggle="tab" aria-selected="false"><span><i class="fal fa-briefcase"></i></span>Horizontal Boxed Tab 2</a> </li>
          <li class="nav-item"> <a class="nav-link" href="#hbt-3" role="tab" data-bs-toggle="tab" aria-selected="false"><span><i class="fal fa-briefcase"></i></span>Horizontal Boxed Tab 3</a> </li>
        </ul>
        <div id="tab-content-2" class="accordion tab-content">
          <div id="hbt-1" class="accordion-item tab-pane fade show active" role="tabpanel">
            <div class="accordion-header" role="tab">
              <h2 class="mb-0">
                <button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#hb-tab-1" aria-expanded="true"><span><i class="fal fa-briefcase"></i></span> Horizontal Boxed Tab 1</button>
              </h2>
            </div>
            <div id="hb-tab-1" class="collapse show" data-parent="#tab-content-2">
              <div class="accordion-body">
                <h3 class="tab-title">Tab 1 Content</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
                  it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
                  sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
              </div>
            </div>
          </div>
          <div id="hbt-2" class="accordion-item tab-pane fade" role="tabpanel">
            <div class="accordion-header" role="tab">
              <h2 class="mb-0">
                <button class="btn btn-link  collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#hb-tab-2" aria-expanded="true"><span><i class="fal fa-briefcase"></i></span> Horizontal Boxed Tab 2</button>
              </h2>
            </div>
            <div id="hb-tab-2" class="collapse" data-parent="#tab-content-2">
              <div class="accordion-body">
                <h3 class="tab-title">Tab 2 Content</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
                  it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
                  sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
              </div>
            </div>
          </div>
          <div id="hbt-3" class="accordion-item tab-pane fade" role="tabpanel">
            <div class="accordion-header" role="tab">
              <h2 class="mb-0">
                <button class="btn btn-link collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#hb-tab-3" aria-expanded="true"><span><i class="fal fa-briefcase"></i></span> Horizontal Boxed Tab 3</button>
              </h2>
            </div>
            <div id="hb-tab-3" class="collapse" data-parent="#tab-content-2">
              <div class="accordion-body">
                <h3 class="tab-title">Tab 3 Content</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
                  it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
                  sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
```

### Vertical tabs with icon - Default

<div align="left"><img src="/files/-MZSbCMQ5QxmEHotaIni" alt=""></div>

```html
<div class="vertical-tab accordion-tab d-flex">
        <div class="nav-left">
          <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item"> <a class="nav-link active" href="#vt-1" role="tab" data-bs-toggle="tab" aria-selected="true">Vertical Tab 1</a> </li>
            <li class="nav-item"> <a class="nav-link" href="#vt-2" role="tab" data-bs-toggle="tab" aria-selected="false">Vertical Tab 2</a> </li>
            <li class="nav-item"> <a class="nav-link" href="#vt-3" role="tab" data-bs-toggle="tab" aria-selected="false">Vertical Tab 3</a> </li>
          </ul>
        </div>
        <!-- Tab panes -->
        <div id="tab-content-3" class="accordion tab-content">
          <div id="vt-1" class="accordion-item tab-pane fade show active" role="tabpanel">
            <div class="accordion-header" role="tab">
              <h2 class="mb-0">
                <button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#v-tab-1" aria-expanded="true">Vertical Tab 1</button>
              </h2>
            </div>
            <div id="v-tab-1" class="collapse show" data-parent="#tab-content-3">
              <div class="accordion-body">
                <h3 class="tab-title">Tab 1 Content</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
                  it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
                  sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
              </div>
            </div>
          </div>
          <div id="vt-2" class="accordion-item tab-pane fade" role="tabpanel" aria-labelledby="hbt-2">
            <div class="accordion-header" role="tab">
              <h2 class="mb-0">
                <button class="btn btn-link collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#v-tab-2" aria-expanded="true">Vertical Tab 2</button>
              </h2>
            </div>
            <div id="v-tab-2" class="collapse" data-parent="#tab-content-3">
              <div class="accordion-body">
                <h3 class="tab-title">Tab 2 Content</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
                  it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
                  sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
              </div>
            </div>
          </div>
          <div id="vt-3" class="accordion-item tab-pane fade" role="tabpanel">
            <div class="accordion-header" role="tab">
              <h2 class="mb-0">
                <button class="btn btn-link collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#v-tab-3" aria-expanded="true">Vertical Tab 3</button>
              </h2>
            </div>
            <div id="v-tab-3" class="collapse" data-parent="#tab-content-3">
              <div class="accordion-body">
                <h3 class="tab-title">Tab 3 Content</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
                  it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
                  sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
```

### Vertical tabs with icon - Boxed

<div align="left"><img src="/files/-MZSbWga7X6Tuu6I2uUt" alt=""></div>

```html
<div class="vertical-boxed-tab accordion-tab has-icon d-flex">
        <div class="nav-left">
          <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item"> <a class="nav-link active" href="#vbt-1" role="tab" data-bs-toggle="tab" aria-selected="true"><span><i class="fal fa-briefcase"></i></span>Vertical Boxed Tab 1</a> </li>
            <li class="nav-item"> <a class="nav-link" href="#vbt-2" role="tab" data-bs-toggle="tab" aria-selected="false"><span><i class="fal fa-briefcase"></i></span>Vertical Boxed Tab 2</a> </li>
            <li class="nav-item"> <a class="nav-link" href="#vbt-3" role="tab" data-bs-toggle="tab" aria-selected="false"><span><i class="fal fa-briefcase"></i></span>Vertical Boxed Tab 3</a> </li>
          </ul>
        </div>
        <!-- Tab panes -->
        <div id="tab-content-4" class="accordion tab-content">
          <div id="vbt-1" class="accordion-item tab-pane fade show active" role="tabpanel">
            <div class="accordion-header" role="tab">
              <h2 class="mb-0">
                <button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#vb-tab-1" aria-expanded="true"><span><i class="fal fa-briefcase"></i></span> Vertical Boxed Tab 1</button>
              </h2>
            </div>
            <div id="vb-tab-1" class="collapse show" data-parent="#tab-content-4">
              <div class="accordion-body">
                <h3 class="tab-title">Tab 1 Content</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
                  it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
                  sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
              </div>
            </div>
          </div>
          <div id="vbt-2" class="accordion-item tab-pane fade" role="tabpanel">
            <div class="accordion-header" role="tab">
              <h2 class="mb-0">
                <button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#vb-tab-2" aria-expanded="true"><span><i class="fal fa-briefcase"></i></span> Vertical Boxed Tab 2</button>
              </h2>
            </div>
            <div id="vb-tab-2" class="collapse collapsed" data-parent="#tab-content-4">
              <div class="accordion-body">
                <h3 class="tab-title">Tab 2 Content</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
                  it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
                  sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
              </div>
            </div>
          </div>
          <div id="vbt-3" class="accordion-item tab-pane fade" role="tabpanel">
            <div class="accordion-header" role="tab">
              <h2 class="mb-0">
                <button class="btn btn-link collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#vb-tab-3" aria-expanded="true"><span><i class="fal fa-briefcase"></i></span> Vertical Boxed Tab 3</button>
              </h2>
            </div>
            <div id="vb-tab-3" class="collapse" data-parent="#tab-content-4">
              <div class="accordion-body">
                <h3 class="tab-title">Tab 3 Content</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
                  it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
                  sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
```

{% hint style="info" %}
Tabs will be displayed as collapsible accordions in <mark style="background-color:blue;">**mobile view**</mark>
{% endhint %}

### When to use

**Tabs should be used for:**

* Exposing related but separate content.
* For example, subpages or different content under the same category.

**Tabs should not be used for:**

* Containing excessive information; You should consider reducing the content. Alternatively, you can consider splitting your content into different sections using properly formatted text.
* Making comparisons or presenting tabular data; Using the table component may be more appropriate.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sg-jds.gitbook.io/judiciary-design-system-beta-bs-5/components/tab.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.