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

How to add bootstrap 5 in the angular application?

Sajal Mia

How to add chart js in angular?

Sajal Mia

Angular code (JSON, YAML, TypeScript) editor example

Sajal Mia

Create forms using angular FormBulder

Sajal Mia

Implement angular (product) details page with reactive service

Sajal Mia

Angular Production-Ready Project Setup

Sajal Mia