« Previous Next »

What is Navs?

Navs, short for navigations, are essential UI components in web design that help users move between different sections or pages within a website or application. Bootstrap provides various navigation options like tabs, pills, and vertical menus to improve user navigation and engagement.

Why Use Navs?

  • Efficient Navigation: Navs make it easy for users to navigate to specific sections without scrolling through the entire page, enhancing their overall experience.
  • Organized Content: Nav components help in organizing content in a structured way, enabling a cleaner layout and helping users locate information quickly.
  • Customizable and Responsive: Bootstrap navs are versatile and responsive, allowing developers to customize layouts (e.g., tabs, pills, vertical) for better user experience on different devices.

Navs Code Examples

        
          <!DOCTYPE html>
            <html lang="en">
              <head>
                <title>Bootstrap Navs Examples</title>
                  <meta charset="UTF-8">
                  <meta name="viewport" content="width=device-width, initial-scale=1.0">
                  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
              </head>
              <body>
            
              <!-- Tabs Navigation Content -->
              <h3 class="mt-4">Tabs Navigation</h3>
              <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" type="button" role="tab" aria-controls="home" 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" type="button" role="tab" aria-controls="profile" 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" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
                  </li>
              </ul>
            
              <div class="tab-content my-3" id="myTabContent">
                <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                  <h4>Home Content</h4>
                  <p>This is the home section of the page.</p>
                </div>
                <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                  <h4>Profile Content</h4>
                  <p>This is the profile section of the page.</p>
                </div>
                <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                  <h4>Contact Content</h4>
                  <p>This is the contact section of the page.</p>
                </div>
              </div>
            
              <!-- Pills Navigation -->
              <h3>Pills Navigation</h3>
              <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                <li class="nav-item" role="presentation">
                  <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
                </li>
                <li class="nav-item" role="presentation">
                  <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
                </li>
                <li class="nav-item" role="presentation">
                  <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
                </li>
              </ul>
            
              <div class="tab-content" id="pills-tabContent">
                <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
                  <h4>Home Pills</h4>
                  <p>Content for home using pills navigation.</p>
                </div>
                <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
                  <h4>Profile Pills</h4>
                  <p>Content for profile using pills navigation.</p>
                </div>
                <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
                  <h4>Contact Pills</h4>
                  <p>Content for contact using pills navigation.</p>
                </div>
              </div>
            
              <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
            </body>
          </html>

Output Example

Tabs Navigation

Home Content

This is the home section of the page.

Profile Content

This is the profile section of the page.

Contact Content

This is the contact section of the page.

Pills Navigation

Home Pills

Content for home using pills navigation.

Profile Pills

Content for profile using pills navigation.

Contact Pills

Content for contact using pills navigation.

« Previous Next »