→ sharp.jkm
→ test nav tabs

test nav tabs

This bootstrap css example is contributed by sharp.jkm, on 10-Aug-2026. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Header

Author sharp.jkm

v.5.3

Fork Fullscreen

<ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item" role="presentation">
          <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
        </li>
      </ul>
      <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
          <div class="p-3">
            <p>This is content on the home tab.</p>
          </div>  
        </div>
        <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
          <div class="p-3">
            <p>This is content on the profile tab.</p>
          </div> 
        </div>
        <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">
          <div class="p-3">
              <p>This is content on the contact tab.</p>
          </div> 
        </div>
        <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">
          <div class="p-3">
              <p>This is content on the disabled tab.</p>
          </div> 
        </div>
      </div>

<p>Navigation using anchor elements to link to other pages</p>
    <ul class="nav nav-tabs" id="myTab2">
        <li class="nav-item">
          <a class="nav-link active" id="home-tab2" href="home.html">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="profile-tab2" href="profile.html">Profile</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="contact-tab2" href="contact.html">Contact</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" id="disabled-tab2" aria-disabled="true" tabindex="-1">Disabled</a>
        </li>
      </ul>

More Examples

contact

Author:
lamiajahan

2 weeks ago

68

v.4.6
Header and Footer Section

Author:
Shahriar Noyon

2 months ago

424

v.4.6
NewsPortal Full Website

Author:
Zahid Hasan Riyad

1 week ago

64

v.5.3
Elon Musk
nav and footer

Author:
RAHAT RAHMAN OFICIAL

2 months ago

344

v.4.6
asdad
asdad

Author:
Anonymous

3 months ago

754

v.5.3
E-Commerce Product Detail Page

Author:
Creative Araf

1 month ago

218

v.5.3
Restaurant Menu Page

Author:
Creative Araf

3 weeks ago

72

v.5.3
E-com Home Page

Author:
Creative Araf

3 weeks ago

49

v.5.3
Sticky Table Headings Example

Author:
Anonymous

1 year ago

3.7k

v.5.3
HTML, CSS, and JavaScript for Multi-layer Dropdown Header
HTML: Added dropdown-submenu class to handle nested dropdowns. CSS: Dropdown Submenu: Positioned to the right of the parent dropdown. JavaScript: Event Listeners: Added to show and hide nested dropdowns on mouse enter and leave. How to Use: Create an header.html file and paste the updated code into it. Include Bootstrap and Font Awesome if needed for styling and icons.

Author:
zobaidul kaziex

1 year ago

3.5k

v.4.6
head section
do not copy please

Author:
Fitar Ahmed

2 months ago

760

v.4.6
E- Commarce full website

Author:
Zahid Hasan Riyad

1 week ago

57

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent