ng-bootstrap: Ejemplo navbar responsive

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Fines 2</a>

  <button class="navbar-toggler navbar-toggler-right" type="button" aria-controls="appNavigation" aria-expanded="!isCollapsed" aria-label="Toggle navigation" (click)="toggleMenu()">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="appNavigation" [ngbCollapse]="isCollapsed">
    <div class="navbar-nav mr-auto">
      <a (click)="toggleMenu()" class="nav-item nav-link" routerLink="" routerLinkActive="active">Inicio</a>

      <div class="nav-item dropdown" ngbDropdown >
        <a class="nav-link dropdown-toggle" id="dropdownSede" ngbDropdownToggle>Sede</a>
        <div class="dropdown-menu" ngbDropdownMenu aria-labelledby="dropdownSede">
          <a class="dropdown-item" routerLink="/sede-show" routerLinkActive="active" (click)="toggleMenu()">Lista</a>
          <a class="dropdown-item" routerLink="/sede-admin" routerLinkActive="active" (click)="toggleMenu()">Agregar</a>
        </div>
      </div>
    </div>
  </div>
</nav>
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css']
})
export class MenuComponent {

  public isCollapsed = true;

 toggleMenu() {
    this.isCollapsed = !this.isCollapsed;
  }

}

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *