Tech Incent
Angular

Angular Pure Bootstrap 5 Sidenav

Generate new angular project

ng new bootstrap-sidebar

cd bootstrap-sidebar

Integrate bootstrap and bootstrap icon in this project

Install bootstrap and bootstrap-icons package

npm i bootstrap bootstrap-icons

Add bootstrap and bootstrap icons files

Bootstrap “node_modules/bootstrap/scss/bootstrap.scss” and “node_modules/bootstrap/dist/js/bootstrap.min.js” files add in styles and scripts section of src/angular.json file.

Add also bootstrap icon “node_modules/bootstrap-icons/font/bootstrap-icons.css”

      "architect": {
        "build": {
          ...
          "options": {
            ...
            "styles": [
              "node_modules/bootstrap/scss/bootstrap.scss",
              "node_modules/bootstrap-icons/font/bootstrap-icons.css",
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          },
        ...
      }

Render bootstrap offcanvas and simple bootstrap header in app.component.ts file

<nav class="navbar navbar-expand-lg navbar-light bg-light py-4">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
    <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="navbar-nav me-auto ps-5 mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
            aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li>
              <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <div class="d-flex">
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-secondary px-3" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample">
          <i class="bi bi-text-left"></i> Toggle sidebar
        </button>
      </div>
    </div>
  </div>
</nav>

<!-- Sidebar -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <ul class="nav nav-pills flex-column mb-auto">
      <li class="nav-item">
        <a href="#" class="nav-link active" aria-current="page">
          Home
        </a>
      </li>
      <li>
        <a href="#" class="nav-link link-dark">
          Dashboard
        </a>
      </li>
      <li>
        <a href="#" class="nav-link link-dark">
          Orders
        </a>
      </li>
      <li>
        <a href="#" class="nav-link link-dark">
          Products
        </a>
      </li>
      <li>
        <a href="#" class="nav-link link-dark">
          Customers
        </a>
      </li>
    </ul>
  </div>
</div>

Thank you for supporting me.

Related posts

Angular bootstrap date picker example

Sajal Mia

How to add bootstrap 5 in the angular application?

Sajal Mia

Understanding Webpack Tree Shaking in Angular: Optimizing Your Application

Md Sifat MIa

How to implement angular router resolver?

Sajal Mia

Dockerize angular app with example

Sajal Mia

Implement angular (product) details page with reactive service

Sajal Mia