❮ Previous Next ❯

Navigation Components

  • Create responsive navigation menus using Bootstrap components.

  • Introduction to Navigation Components

    Navigation is one of the most critical parts of any website or web application.

    In Bootstrap, navigation components are designed to:

    • Help users move through content easily

    • Show structure and hierarchy

    • Improve usability and accessibility

    • Work smoothly across devices (responsive)

    Two of the most commonly used navigation components are:

    1. Navbar

    2. Breadcrumbs

  • Navbar

    What Is a Navbar ?

    A Navbar (Navigation Bar) is a horizontal section, usually placed at the top of a webpage, that contains:

    • Brand or logo

    • Navigation links

    • Menus

    • Buttons or forms (optional)

    The navbar is often the primary way users navigate a website.

    Purpose of a Navbar

    A navbar is used to:

    • Provide global navigation

    • Give quick access to important pages

    • Display branding

    • Maintain consistent navigation across pages

    In most projects, the navbar appears on every page.

    Basic Navbar Structure

    A Bootstrap navbar follows a clear structure:

    • <nav> element

    • .navbar class

    • Branding

    • Navigation links

Basic Bootstrap Navbar

Creates a simple horizontal navbar with a brand name and navigation links using Bootstrap classes. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basic Navbar</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <nav class="navbar navbar-light bg-light">
    <div class="container">
      <a class="navbar-brand" href="#">MyWebsite</a>

      <ul class="navbar-nav flex-row">
        <li class="nav-item me-3">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
      </ul>

    </div>
  </nav>

</body>
</html>

  • Explanation:

    • .navbar → enables navbar styling

    • .navbar-brand → site name or logo

    • .nav-link → navigation links

    Responsive Navbar (Collapse Feature)

    On smaller screens, navbars should collapse into a toggle menu.

Responsive Navbar with Collapse

The navbar expands on large screens and collapses into a toggle menu on smaller screens using Bootstrap’s collapse feature. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Navbar</title>

  <!-- Bootstrap CSS -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">

  <!-- Bootstrap JS Bundle (Required for collapse) -->
  <script 
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js">
  </script>
</head>
<body>

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
      
      <a class="navbar-brand" href="#">Brand</a>

      <!-- Toggle Button -->
      <button class="navbar-toggler" 
              type="button" 
              data-bs-toggle="collapse" 
              data-bs-target="#mainNavbar">
        <span class="navbar-toggler-icon"></span>
      </button>

      <!-- Collapsible Menu -->
      <div class="collapse navbar-collapse" id="mainNavbar">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a class="nav-link active" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>

    </div>
  </nav>

</body>
</html>

  • Explanation:

    • navbar-expand-lg → expands on large screens

    • navbar-toggler → toggle button for mobile

    • collapse navbar-collapse → collapsible menu

    • ms-auto → aligns links to the right

    This navbar:

    • Expands on desktop

    • Collapses on mobile

    • Is fully responsive

    Common Navbar Variations

    Navbars can include:

    • Dropdown menus

    • Search forms

    • Buttons

    • Icons

    Navbars are highly customizable but should remain simple and clear.

    Best Practices for Navbars

    • Keep links limited and meaningful

    • Ensure mobile usability

    • Use clear labels

    • Maintain consistent navbar across pages

    • Avoid overcrowding

    A good navbar improves user confidence and navigation speed.

  • Breadcrumbs

    What Are Breadcrumbs ?

    Breadcrumbs show the current page’s location within a site’s hierarchy.

    They act like a navigation trail, helping users understand:

    • Where they are

    • How they reached the current page

    • How to go back easily

    Purpose of Breadcrumbs

    Breadcrumbs are used to:

    • Show hierarchy

    • Improve navigation clarity

    • Reduce user confusion

    • Improve usability on content-heavy websites

    They are especially useful in:

    • E-commerce websites

    • Documentation sites

    • Dashboards

    • Blog platforms

    Basic Breadcrumb Structure

    Bootstrap breadcrumbs use:

    • <nav> element

    • .breadcrumb class

    • .breadcrumb-item

Basic Bootstrap Breadcrumb

Breadcrumbs show the user’s current location within a website hierarchy and provide easy navigation back to previous pages. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Breadcrumb Example</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container mt-5">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item">
          <a href="#">Home</a>
        </li>
        <li class="breadcrumb-item">
          <a href="#">Products</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
          Shoes
        </li>
      </ol>
    </nav>
  </div>

</body>
</html>

  • Explanation:

    • Ordered list (<ol>) represents hierarchy

    • .breadcrumb-item → each level

    • .active → current page

    Accessibility in Breadcrumbs

    Bootstrap breadcrumbs:

    • Use semantic HTML

    • Include ARIA attributes

    • Support screen readers

    Always mark the current page correctly using:

    aria-current="page"

    Styling and Placement of Breadcrumbs

    Breadcrumbs are usually placed:

    • Below the navbar

    • Above page content

    They should be:

    • Subtle

    • Non-distracting

    • Easy to scan

    Navbar vs Breadcrumbs

    FeatureNavbarBreadcrumbs
    PurposeGlobal navigationHierarchical navigation
    LocationTop of pageBelow navbar
    ScopeEntire siteCurrent page path
    InteractionClick-based navigationContextual navigation

    Both are often used together in professional layouts.

    Common Mistakes

    1. Overloading the navbar with too many links

    2. Ignoring mobile navbar behavior

    3. Using breadcrumbs as primary navigation

    4. Not marking active links correctly

    5. Skipping accessibility attributes

    Navigation should be simple, predictable, and accessible.

❮ Previous Next ❯