The tab list serves as a navigational element within the portfolio website, allowing users to easily access and explore different sections or categories of content. It enhances the user experience by organizing information into distinct tabs, facilitating intuitive navigation and reducing clutter on the page.
Tab 1
Tab 2
Tab 3
<ul class="nav nav-pills " id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active mx-3" id="tab-1-tab" data-bs-toggle="pill" data-bs-target="#tab-1" type="button" role="tab" aria-controls="tab-1" aria-selected="true">Tab 1</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link mx-3" id="tab-2-tab" data-bs-toggle="pill" data-bs-target="#tab-2" type="button" role="tab" aria-controls="tab-2" aria-selected="false">Tab 2</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link mx-3" id="tab-3-tab" data-bs-toggle="pill" data-bs-target="#tab-3" type="button" role="tab" aria-controls="tab-3" aria-selected="false">Table</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="tab-1" role="tabpanel" aria-labelledby="tab-1-tab" tabindex="0">...</div>
<div class="tab-pane fade" id="tab-2" role="tabpanel" aria-labelledby="tab-2-tab" tabindex="0">...</div>
<div class="tab-pane fade" id="tab-3" role="tabpanel" aria-labelledby="tab-3-tab" tabindex="0">...</div>
Our tablist prioritizes accessibility. We've implemented ARIA roles to assist screen readers and keyboard navigation. Clear focus indicators and intuitive labeling enhance usability.