# Tabs

Tabs serve as an effective navigation and organization tool within the Sunbird-Ed portal. They allow users to switch between different sections or views with ease, enhancing the user experience and facilitating content exploration. For more information please refer to this link <https://sunbird-ed.github.io/sunbird-style-guide/dist/#/tabs>

<figure><img src="https://3233010154-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgPDmvKwE_DgYJbvPS%2Fuploads%2FNEMmKknYr2RJdRAKRRES%2Fimage.png?alt=media&#x26;token=b854e4d9-d6c1-4f3e-9f12-a4a3a0c2d1a3" alt=""><figcaption></figcaption></figure>

```
<sui-tabset>
  <div class="ui top attached tabular menu">
    <a class="item" suiTabHeader="1">First</a>
    <a class="item" suiTabHeader="2">Second</a>
    <a class="item" suiTabHeader="3">Third</a>
  </div>
  <div class="ui bottom attached segment" suiTabContent="1">First tab!</div>
  <div class="ui bottom attached segment" suiTabContent="2">Second tab!</div>
  <div class="ui bottom attached segment" suiTabContent="3">Third tab!</div>
</sui-tabset>
```

<figure><img src="https://3233010154-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgPDmvKwE_DgYJbvPS%2Fuploads%2FS3OwMGQYn7AzcrYfWgsR%2Fimage.png?alt=media&#x26;token=445539fd-8f4d-45d5-8d15-efb78e8d778b" alt=""><figcaption></figcaption></figure>

```html
<sui-tabset>
  <div class="ui pointing secondary menu">
      <a class="item" suiTabHeader="1">Nested 1</a>
      <a class="item" suiTabHeader="2">Nested 2</a>
  </div>
  <div class="ui segment" suiTabContent="1">First nested tab!</div>
  <div class="ui segment" suiTabContent="2">Second nested tab!</div>
</sui-tabset>
```