Chapter 7: Navigation Components

Navigation Components in Bootstrap are ready-to-use building blocks that allow people to navigate around your website. It builds on top of links and buttons, and takes care of the style, the layout and the responsiveness for you with ‘classes’.

They are generally categorized as three heirarchies, Navs (simple links), Navbars (main top menu) and Pagination (page numbers).

1. The Basic Nav (`.nav`)

This is the easiest one. A list of links that you can place anywhere – sidebar, footer.

How it works: Make use of a <ul> having class .nav and <li> having class .nav-item.
Styles:
- Tabs (.nav-tabs): Changes the links to appear as folder tabs.
- Pills (.nav-pills): Applies a color to the links to make them visually look like rounded buttons.
- Fill & Justify: Use .nav-fill to make the links stretch to fill the whole width of the container.

2. The Navbar (`.navbar`)

This is the “King” of navigation. It’s the responsive header you see at the top of almost every website.

Key Features:

Responsive Collapsing: the one that made Splash even more popular. On a computer it displays the links. On a mobile phone, it automatically hides them into a “Hamburger” icon (the three vertical lines).
Branding: Use the .navbar-brand class for your logo or site name.
Color Themes: Change the appearance with .navbar-dark bg-dark (black) or .navbar-light bg-light (grey/white).
Fixed Positions: The navigation can be “fixed” into a position on the top of the screen using if you want to keep it there when scrolling.

3. Breadcrumbs (`.breadcrumb`)

Imagine for a moment “Hansel and Gretel”. Breadcrumbs will let the user know precisely where they are placed within the structure of the site.

Example: Home > Products > Electronics > Phones Intended for: E-Commerce sites or blogs with lots of categories.
Purpose: Great for blogs or e-commerce sites with many categories.

4. Pagination (`.pagination`)

When you have a long list of things such as search results you paginate them.

How it looks: A row of boxes with numbers: [Previous] [1] [2] [3] [Next].
Sizes: You can make them bigger (.pagination-lg) or smaller (.pagination-sm).

Simple Code Example (A Basic Navbar)

HTML

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <!-- The Logo -->
    <a class="navbar-brand" href="#">MyBrand</a>
    
    <!-- The Mobile Toggle Button -->
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    
    <!-- The Links -->
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
      </ul>
    </div>
  </div>
</nav>

Summary Table

Component	Class Name	Best Use Case
Navbar	`.navbar`	Main top-level site navigation.
Tabs	`.nav-tabs`	Switching between views on a single page.
Pills	`.nav-pills`	Highlighting active links in a list or sidebar.
Breadcrumbs	`.breadcrumb`	Showing the path to the current page.
Pagination	`.pagination`	Navigating through multiple pages of content.