Angular Navbar

About this module

An Angular navbar with a responsive hamburger menu, `*ngIf` mobile drawer and ARIA attributes.

Installation

1. 1

   Install Angular

   Create or open an Angular project (Angular 16+ for standalone components).

   npx @angular/cli@latest new my-app --standalone

2. 2

   Create the component files

   Create NavbarComponent.component.ts, .html and .scss and paste the matching sources below.

3. 3

   Declare it

   Import the component into your standalone component or NgModule.

   import { NavbarComponentComponent } from "./navbar-component/NavbarComponent.component";
   
   @Component({
     imports: [NavbarComponentComponent],
     // ...
   })

4. 4

   Use it

   Render the component in a template.

   <app-navbar-component></app-navbar-component>

Usage

1. 1

   Import

   Import NavbarComponentComponent where needed.

   import { NavbarComponentComponent } from "./navbar-component.component";

2. 2

   Render

   Add the selector to your template.

   <app-navbar-component></app-navbar-component>