A responsive navbar can be achieved with an ngbCollapse directive.

These steps were used to create this responsive navbar.

  1. Add a property to the component to track whether the menu is open. In this example, the property is called isMenuCollapsed.
  2. Add an ngbCollapse directive to the element with the navbar-collapse CSS class. Use the property in the component as the value for the directive.
  3. When the navbar toggler button is clicked, toggle the value of the property in the component.
  4. If you would like the menu to close when a link is clicked, add a (click) handler to each link and set the property on the component to true to hide the menu.

Resize your browser window to see it in action!