Learn Bootstrap Navigation — Complete Guide to Navs, Navbar & Dropdowns

Q: What is the difference between navbar-expand-lg and other sizes?

navbar-expand-lg makes the navbar horizontal on large screens and collapsed (hamburger) on smaller screens. Replace lg with sm, md, xl, or xxl to change the breakpoint.

Q: How do I align items in the navbar?

Use me-auto (push right), ms-auto (push left), or mx-auto (center) on navbar-nav or other elements. Flexbox utilities also work.

Q: What is the difference between nav-fill and nav-justified?

nav-fill evenly distributes space based on each item’s natural width. nav-justified forces all items to the same width regardless of content.

Q: How do I make a list group clickable?

Use <a> or <button> elements with the list-group-item-action class. <div class="list-group"> with anchor children replaces <ul>.

Q: What does breadcrumb active mean?

The last breadcrumb item (with active class and aria-current="page") represents the current page. It’s not a link — just plain text.

Web Frameworks

Bootstrap

Bootstrap Navigation — Complete Guide to Navs, Navbar & Dropdowns

DodaTech Updated Jun 6, 2026 10 min read

Navigation components let users move between pages and sections — they’re the roadmap of your website, and Bootstrap provides pre-built, mobile-first patterns that work without custom CSS.

What You’ll Learn

Build navs with tabs and pills variants
Create responsive navbars with collapse toggles
Implement dropdown menus with directions and headers
Use list groups for content lists with badges
Add pagination and breadcrumbs for page navigation

Why Navigation Matters

Navigation is the most critical UI element — if users can’t find what they need, they leave. Responsive navigation is especially tricky because desktop horizontal menus must collapse into hamburger menus on mobile.

Security note: Understanding Bootstrap Components 2 helps build more secure applications — a core principle at DodaTech, where tools like Durga Antivirus Pro and Doda Browser rely on solid implementation practices.

At DodaTech, Doda Browser uses Bootstrap’s navbar for its settings interface, Durga Antivirus Pro uses list groups for scan result categories, and DodaZIP uses breadcrumbs to show file paths — all responsive and accessible.

Your Learning Path

    flowchart LR
  A[Components 1: Alerts, Cards] --> B[Components 2: Nav, Navbar, Dropdowns]
  B --> C[Components 3: Modals, Carousel, Tooltips]
  C --> D[Bootstrap Forms]
  B:::current

  classDef current fill:#0d6efd,color:#fff,stroke:#0a58ca,stroke-width:2px

Prerequisites: You need HTML basics and the Bootstrap Basics (CDN with JS bundle). Interactive components like dropdowns require bootstrap.bundle.min.js. CSS Flexbox knowledge helps with navbar alignment.

Navs & Tabs — In-Page Navigation

Navs create horizontal or vertical lists of links styled as tabs or pills:

<!-- Basic nav: removes list bullets, adds horizontal layout -->
<ul class="nav">
    <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
</ul>

<!-- Tabs: adds a tab-style border at the bottom -->
<ul class="nav nav-tabs">
    <li class="nav-item"><a class="nav-link active" href="#">Active Tab</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Another Tab</a></li>
</ul>

<!-- Pills: rounded button-like links -->
<ul class="nav nav-pills">
    <li class="nav-item"><a class="nav-link active" href="#">Active Pill</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Another Pill</a></li>
</ul>

<!-- Fill: forces items to equal width (nav-fill uses natural widths,
     nav-justified forces ALL items to the exact same width) -->
<ul class="nav nav-pills nav-fill">
<ul class="nav nav-pills nav-justified">

<!-- Vertical: stack items top-to-bottom -->
<ul class="nav flex-column">

<!-- Tabs with dynamic content (requires JS) -->
<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">Home</button>
    </li>
    <li class="nav-item">
        <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button">Profile</button>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade show active" id="home">Home content</div>
    <div class="tab-pane fade" id="profile">Profile content</div>
</div>

Navbar — The Main Site Navigation

The navbar is a responsive wrapper for branding, navigation links, forms, and dropdowns. It’s the most complex Bootstrap component.

<!-- Anatomy of a navbar:
     navbar: the outer container
     navbar-expand-lg: horizontal on large screens, collapse on smaller
     navbar-light bg-light: light theme (use navbar-dark bg-dark for dark) -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <!-- Brand: usually a logo or site name -->
        <a class="navbar-brand" href="#">Brand</a>

        <!-- Toggler: the hamburger button that shows/hides nav links
             on mobile. data-bs-target must match the collapse id. -->
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- Collapsible wrapper: everything inside here is hidden
             on small screens and shown when toggler is clicked -->
        <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="#">About</a></li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- Theme variants -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">  <!-- Dark theme -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">  <!-- Colored -->

<!-- Position -->
<nav class="navbar fixed-top">     <!-- Stays at top, covers content -->
<nav class="navbar fixed-bottom">  <!-- Stays at bottom -->
<nav class="navbar sticky-top">    <!-- Sticks to top when scrolling down -->

Navbar with Search

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">
            <img src="logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
            Brand
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <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>
            </ul>
            <!-- Search form: d-flex keeps it horizontal in the navbar -->
            <form class="d-flex">
                <input class="form-control me-2" type="search" placeholder="Search">
                <button class="btn btn-outline-light" type="submit">Search</button>
            </form>
            <!-- Text content in navbar -->
            <span class="navbar-text ms-3">Hello, User</span>
        </div>
    </div>
</nav>

Dropdowns — Contextual Menus

Dropdowns reveal hidden options when clicked. They can appear in four directions:

<!-- Basic dropdown: dropdown container + toggle button + menu -->
<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">
        Dropdown button
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <!-- dropdown-divider creates a horizontal separator line -->
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated action</a></li>
    </ul>
</div>

<!-- Dropdown directions -->
<div class="dropup">     <!-- Opens upward -->
<div class="dropend">    <!-- Opens to the right -->
<div class="dropstart">  <!-- Opens to the left -->

<!-- Dropdown with headers: groups items into sections -->
<ul class="dropdown-menu">
    <li><h6 class="dropdown-header">Section 1</h6></li>
    <li><a class="dropdown-item" href="#">Item 1</a></li>
    <li><h6 class="dropdown-header">Section 2</h6></li>
    <li><a class="dropdown-item" href="#">Item 2</a></li>
</ul>

<!-- Dropdown items can be buttons -->
<div class="dropdown-menu">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
</div>

<!-- Active and disabled items -->
<ul class="dropdown-menu">
    <li><a class="dropdown-item active" href="#">Active (highlighted)</a></li>
    <li><a class="dropdown-item disabled" href="#">Disabled (grayed, no click)</a></li>
</ul>

List Groups — Content Lists

List groups displays a series of content items. They’re more flexible than basic HTML lists:

<!-- Basic list group -->
<ul class="list-group">
    <li class="list-group-item">Item 1</li>
    <li class="list-group-item">Item 2</li>
    <li class="list-group-item">Item 3</li>
</ul>

<!-- Active and disabled items -->
<ul class="list-group">
    <li class="list-group-item active">Active (highlighted)</li>
    <li class="list-group-item">Normal</li>
    <li class="list-group-item disabled">Disabled</li>
</ul>

<!-- Flush: removes borders for a cleaner look -->
<ul class="list-group list-group-flush">

<!-- Numbered: adds auto-incrementing numbers -->
<ol class="list-group list-group-numbered">
    <li class="list-group-item">First</li>
    <li class="list-group-item">Second</li>
</ol>

<!-- Horizontal: items side by side -->
<ul class="list-group list-group-horizontal">
    <li class="list-group-item">Item</li>
    <li class="list-group-item">Item</li>
</ul>

<!-- With badges: use flex utilities to position the badge -->
<ul class="list-group">
    <li class="list-group-item d-flex justify-content-between align-items-center">
        Inbox <span class="badge bg-primary rounded-pill">12</span>
    </li>
</ul>

<!-- Actionable list group: clickable items using <a> or <button>.
     list-group-item-action adds hover styling. -->
<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action active">Active link</a>
    <a href="#" class="list-group-item list-group-item-action">Normal link</a>
    <button class="list-group-item list-group-item-action">Button item</button>
</div>

<!-- Contextual colors for individual items -->
<ul class="list-group">
    <li class="list-group-item list-group-item-success">Success item</li>
    <li class="list-group-item list-group-item-danger">Danger item</li>
    <li class="list-group-item list-group-item-warning">Warning item</li>
</ul>

Pagination — Page Navigation

<!-- Pagination: nav wrapper + page-item list -->
<nav>
    <ul class="pagination">
        <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
        <li class="page-item active"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">Next</a></li>
    </ul>
</nav>

<!-- Sizes -->
<ul class="pagination pagination-lg">  <!-- Large -->
<ul class="pagination pagination-sm">  <!-- Small -->

<!-- Alignment using flex utilities -->
<ul class="pagination justify-content-center">  <!-- Centered -->
<ul class="pagination justify-content-end">     <!-- Right-aligned -->

Breadcrumb — Showing the Path

Breadcrumbs show the user’s current location in the site hierarchy:

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <!-- Each item is a step in the path. The last item
             gets active + aria-current="page" indicating current page. -->
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
        <li class="breadcrumb-item active" aria-current="page">Data</li>
    </ol>
</nav>

Comparison: Bootstrap Nav vs Plain HTML Nav

Feature	Plain HTML	Bootstrap
List bullets	Must remove manually	Removed by .nav
Horizontal layout	CSS flex/float needed	Built-in
Mobile responsive	Custom media queries	Built-in collapse
Active state styling	Custom CSS	Built-in .active
Dropdowns	JavaScript required	data-bs-toggle
Dark theme	Custom colors	navbar-dark class

Common Mistakes

1. Forgetting the navbar-toggler button

Without the toggler button (with data-bs-toggle="collapse"), the nav links are always visible and overflow on mobile screens.

2. Not wrapping nav links in `collapse navbar-collapse`

The collapse wrapper is required for the toggle to work. Without it, the toggler button does nothing.

3. Missing `data-bs-toggle="dropdown"` on dropdown triggers

Dropdowns need this data attribute to initialize. CSS alone won’t open the dropdown menu.

4. Using Bootstrap nav styles for simple link lists

Bootstrap’s .nav class is for navigation patterns (tabs, pills). For a simple list of links, just use <a> tags without nav classes.

5. Forgetting `aria-current` for accessibility

Add aria-current="page" to the active breadcrumb or nav item. Bootstrap’s active class handles visual styling, but aria-current is required by screen readers.

Practice Questions

What breakpoint does navbar-expand-lg use to switch from horizontal to hamburger? Answer: It switches at the lg breakpoint (992px). Below 992px, the navbar shows the hamburger toggler. Above 992px, nav links are horizontal.
How do you push navigation links to the right side of the navbar? Answer: Add ms-auto (margin-start: auto) to the <ul class="navbar-nav ms-auto">. This pushes the entire nav to the right.
What’s the difference between nav-fill and nav-justified? Answer: nav-fill distributes space based on each item’s natural width. nav-justified forces ALL items to the same width regardless of content length.
How do you make a list group clickable? Answer: Use <a> or <button> elements with the list-group-item-action class inside a <div class="list-group">.
What does aria-current="page" do on a breadcrumb? Answer: It tells screen readers that this item represents the current page. It’s an accessibility requirement, not a visual styling.

Challenge: Build a blog layout with a sticky dark navbar containing brand, nav links (Home, Articles, About), a dropdown (Categories), and a search form. Add breadcrumbs and pagination below the main content.

FAQ

What is the difference between navbar-expand-lg and other sizes?

navbar-expand-lg makes the navbar horizontal on large screens and collapsed (hamburger) on smaller screens. Replace lg with sm, md, xl, or xxl to change the breakpoint.

How do I align items in the navbar?

Use me-auto (push right), ms-auto (push left), or mx-auto (center) on navbar-nav or other elements. Flexbox utilities also work.

Can I use dropdowns without JavaScript?

No. Dropdowns require Bootstrap’s JavaScript for open/close behavior. The CSS alone doesn’t handle interaction.

What is the difference between nav-fill and nav-justified?

nav-fill evenly distributes space based on each item’s natural width. nav-justified forces all items to the same width regardless of content.

How do I make a list group clickable?

Use <a> or <button> elements with the list-group-item-action class. <div class="list-group"> with anchor children replaces <ul>.

What does breadcrumb active mean?

The last breadcrumb item (with active class and aria-current="page") represents the current page. It’s not a link — just plain text.

Try It Yourself

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Blog</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!-- Sticky dark navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
        <div class="container">
            <a class="navbar-brand" href="#">My Blog</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#blogNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="blogNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Articles</a></li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Categories</a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Technology</a></li>
                            <li><a class="dropdown-item" href="#">Design</a></li>
                            <li><a class="dropdown-item" href="#">Business</a></li>
                        </ul>
                    </li>
                    <li class="nav-item"><a class="nav-link" href="#">About</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
                </ul>
                <form class="d-flex">
                    <input class="form-control me-2" type="search" placeholder="Search posts...">
                    <button class="btn btn-outline-light" type="submit">Search</button>
                </form>
            </div>
        </div>
    </nav>

    <!-- Breadcrumb -->
    <div class="container mt-3">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item"><a href="#">Articles</a></li>
                <li class="breadcrumb-item active">Getting Started with Bootstrap</li>
            </ol>
        </nav>
    </div>

    <!-- Main content -->
    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <h1>Getting Started with Bootstrap</h1>
                <p class="text-muted">Posted on June 5, 2026 by Admin</p>
                <p>Bootstrap is the most popular CSS framework...</p>

                <nav class="mt-5">
                    <ul class="pagination justify-content-center">
                        <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
                        <li class="page-item active"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item"><a class="page-link" href="#">Next</a></li>
                    </ul>
                </nav>
            </div>

            <!-- Sidebar -->
            <div class="col-lg-4">
                <div class="list-group mb-4">
                    <a href="#" class="list-group-item list-group-item-action active">All Categories</a>
                    <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between">
                        Technology <span class="badge bg-primary rounded-pill">14</span>
                    </a>
                    <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between">
                        Design <span class="badge bg-primary rounded-pill">8</span>
                    </a>
                    <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between">
                        Business <span class="badge bg-primary rounded-pill">6</span>
                    </a>
                </div>

                <ul class="nav nav-pills flex-column">
                    <li class="nav-item"><a class="nav-link active" href="#">Popular</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Recent</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Comments</a></li>
                </ul>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

This sandbox demonstrates: navbar with dropdown and search, breadcrumbs, list groups with badges, nav pills, and pagination — all combined into a real blog layout.

What’s Next

Topic	Description
Bootstrap Interactive Components	Modals, carousel, tooltips, toasts
Bootstrap Forms	Form inputs, validation, and layout
HTML Semantic Elements	Semantic HTML for navigation
CSS Flexbox	The layout engine behind Bootstrap components

What’s Next

Congratulations on completing this Bootstrap Components 2 tutorial! Here’s where to go from here:

Practice daily — Consistency is more important than long study sessions
Build a project — Apply what you learned by building something real
Explore related topics — Check out other tutorials in the same category
Join the community — Discuss with other learners and share your progress

Remember: every expert was once a beginner. Keep coding!

Previous Bootstrap Components Explained — Alerts, Buttons, Cards & Accordion Next Bootstrap Interactive Components — Modals, Carousel & Tooltips Step-by-Step

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Bootstrap

Bootstrap Navigation — Complete Guide to Navs, Navbar & Dropdowns

What You’ll Learn

Why Navigation Matters

Your Learning Path

Navs & Tabs — In-Page Navigation

Navbar — The Main Site Navigation

Navbar with Search

Dropdowns — Contextual Menus

List Groups — Content Lists

Pagination — Page Navigation

Breadcrumb — Showing the Path

Comparison: Bootstrap Nav vs Plain HTML Nav

Common Mistakes

1. Forgetting the navbar-toggler button

2. Not wrapping nav links in collapse navbar-collapse

3. Missing data-bs-toggle="dropdown" on dropdown triggers

4. Using Bootstrap nav styles for simple link lists

5. Forgetting aria-current for accessibility

Practice Questions

FAQ

Try It Yourself

What’s Next

What’s Next

2. Not wrapping nav links in `collapse navbar-collapse`

3. Missing `data-bs-toggle="dropdown"` on dropdown triggers

5. Forgetting `aria-current` for accessibility