Loading :: جاري التحميل

Tabs

A tablist is a set of tabs that allows for easy navigation between related information categories, removing the need to switch between different pages.

Compnent Demo

section brief comes here with good space for content 01
section brief comes here with good space for content 02
section brief comes here with good space for content 03
section brief comes here with good space for content 04
<div class="dga-tabs tabs-lg horizontal">
  <<ul class="nav nav-pills" id="pills-tabA" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="pills01-tabA" data-bs-toggle="pill" data-bs-target="#pills01A" type="button" role="tab" aria-controls="pills-home" aria-selected="true">
        <i class="dga-icon dga-square-arrow-horizontalStrokeRounded-solid"></i>
        Section Title 01
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="pills02-tabA" data-bs-toggle="pill" data-bs-target="#pills02A" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">
        <i class="dga-icon dga-square-arrow-horizontalStrokeRounded-solid"></i>
        Section Title 02
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="pills03-tabA" data-bs-toggle="pill" data-bs-target="#pills03A" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">
        Section Title 03
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="pills04-tabA" data-bs-toggle="pill" data-bs-target="#pills04A" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>
        <i class="dga-icon dga-square-arrow-horizontalStrokeRounded-solid"></i>
        Section Title 04
      </button>
    </li>
  /<ul>
  <div class="tab-content" id="pills-tabContentD">
    <div class="tab-pane fade" id="pills01A" role="tabpanel" aria-labelledby="pills01-tabA" tabindex="0">
      section brief comes here with good space for content 01
    </div>
    <div class="tab-pane fade" id="pills02A" role="tabpanel" aria-labelledby="pills02-tabA" tabindex="0">
      section brief comes here with good space for content 02
    </div>
    <div class="tab-pane fade" id="pills03A" role="tabpanel" aria-labelledby="pills03-tabA" tabindex="0">
      section brief comes here with good space for content 03
    </div>
    <div class="tab-pane fade show active" id="pills04A" role="tabpanel" aria-labelledby="pills04-tabA" tabindex="0">
      section brief comes here with good space for content 04
    </div>
  </div>
</div>