Navbar Responsive with Angular 5

Question

I am looking references or some way to make a responsive Navbar in Angular 5, if it's necessary to use Bootstrap and it's the best way or if there is any option not to use Bootstrap.

Attached example image:

Right now I'm using tabs, but it's something I'm willing to change if necessary:

<mat-toolbar role="heading" aria-label="navigation">

  <mat-toolbar-row>
    <h1 class="mat-display-1">{{ title }}</h1>
    <span class="fill-remaining-space"></span>
    <nav mat-tab-nav-bar>
        <a mat-tab-link
           *ngFor="let link of navLinks"
           [routerLink]="link.path"
           routerLinkActive #rla="routerLinkActive"
           [active]="rla.isActive">
            {{link.label}}
        </a>
    </nav>
    <!-- Mobile Button Nav -->
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="fa fa-bars fa-lg"></span>
    </button>

    <span class="fill-remaining-space"></span>
  </mat-toolbar-row>
</mat-toolbar>

Yakov Fain · Accepted Answer · 2017-12-14 03:35:33Z

1

You can use the toolbar from Angular Material, which has a toolbar component (https://material.angular.io/components/toolbar/overview)

To make your site (including toolbar) responsive, use the Flex Layout library https://github.com/angular/flex-layout/wiki

answered Dec 14, 2017 at 3:35

Yakov Fain

12.4k5 gold badges35 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

yorchp Over a year ago

Exact I use the toolbar component, but not working responsive like the image. Just update the code complete in the question.

yorchp Over a year ago

thanks with your response I found this: theinfogrid.com/tech/developers/angular/…

umutesen Over a year ago

@yorchp link seems to be dead

umutesen Over a year ago

@yorchp Managed to dig the github link from a cached version of that post: github.com/MainaWycliffe/…

Collectives™ on Stack Overflow

Navbar Responsive with Angular 5

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related