navbar not appear in the result?

Question

I'm learning on angular 15.0.0 and I have faced an issue

the navbar doesn't appear why does nothing appear except the Recipe Book

the code

<nav class = "navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a href="#" class ="navbar-brand">Racipe Book!</a>
    </div>

    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Recipes</a></li>
        <li><a href="#">Shopping list</a></li>
      </ul>
      <ul class = "nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" role = "button"> Manage <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">saving data</a></li>
            <li><a href="#">fetch data</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

this is how it looks:

I tried to downgrade the Bootstrap but isn't working, and tried to use the ng-bootstrap package to include Angular-based Bootstrap components. also did not work both gave errors in the terminal

it should be like this:

Answer 1

You are missing the .navbar-expand class.

Navbar - How it works | Bootstrap 5

Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl|-xxl} for responsive collapsing and color scheme classes.

Also, you should need a button toggle to show/hide the collapsible section. Ensure that you have imported either:

1. popper.min.js and bootstrap.min.js files

2. bootstrap.bundle.min.js

in order to make the collapse function work.

Reference: Bootstrap 5 dropdown is not working on Angular 12

Complete code:

<nav class="navbar navbar-default navbar-expand-lg">
  <div class="container-fluid">
    <div class="navbar-header">
      <a href="#" class="navbar-brand">Racipe Book!</a>
    </div>

    <button
      class="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="nav navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item"><a class="nav-link" href="#">Recipes</a></li>
        <li class="nav-item">
          <a class="nav-link" href="#">Shopping list</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a
            href="#"
            class="dropdown-toggle"
            role="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarManageContent"
          >
            Manage <span class="caret"></span
          ></a>
          <ul class="dropdown-menu" id="navbarManageContent">
            <li class="nav-item">
              <a class="nav-link" href="#">saving data</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">fetch data</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Demo @ StackBlitz