Mat-Nav-List horizontal instead of vertical?

Question

How do I make the following horizontal instead of the (apparent default) of vertical? It is located within navigation.component.html within my Angular 5.2.7 application that wa

Answer 1

I wound up using mat-tab-nav-bar, since nothing else in Angular Material seems to support horizontal, left-justified, Angular 6-compatible navigation bars, at least as of mid-August 2018.

A full Angular 6.x example can be found in the Angular Material Horizontal Navigation Bar Example I put together using Angular-CLI 6.x, Angular 6.x and Angular Material 6.x.

Answer 2

Set mat-nav-list to flex container then adjust mat-list-item height and padding

I am using angular/flex-layout but you can achieve the same with css/scss

<mat-nav-list fxLayout>
<mat-list-item fxFlex>
    <a [routerLink]="['/home']">Home</a>
</mat-list-item>
<mat-list-item fxFlex>
    <a [routerLink]="['/about']">About</a>
</mat-list-item>
<mat-list-item fxFlex>
    <a [routerLink]="['/contact']">Contact Us</a>
</mat-list-item> </mat-nav-list>

Answer 3

Setting the container's display to flex and the it's flex-direction to row did the trick for me.

<mat-nav-list class="list-horizontal">
     <a mat-list-item href="#">Home</a>
     <a mat-list-item href="#">About</a>
</mat-nav-list>

And the SCSS file:

mat-nav-list.list-horizontal {
 display: flex;
 flex-direction: row;
}

Answer 4

I was able to create a horizontal mat-nav-list by using some custom scss. I attach it using the class list-horizontal.

<mat-nav-list class="list-horizontal">
  ...
</mat-nav-list>

Here's the scss I used for list-horizontal:

mat-nav-list.list-horizontal {
  padding: 0;
  .mat-list-item {
    display: inline-block;
    height: auto;
    width: auto;
  }
}

Here's a Stackblitz to show it working with Angular Material 7.

Answer 5

I used FlexBox setting fxLayout="row" (or just put in fxLayout as default is row)

<mat-nav-list fxLayout="row">
     <a mat-list-item href="#">One</a>
     <a mat-list-item href="#">Two</a>
</mat-nav-list>

However, this is using Angular Flex-Layout so an extra package

Answer 6

you have to float each list item

in css file put:

.mat-list-item {
  float: right;
}

in html file put your code:

<mat-nav-list>
    <!--https://material.angular.io/components/list/overview-->
    <mat-list-item>
        <a [routerLink]="['/home']">Home</a>
    </mat-list-item>
    <mat-list-item>
        <a [routerLink]="['/about']">About</a>
    </mat-list-item>
    <mat-list-item>
        <a [routerLink]="['/contact']">Contact Us</a>
    </mat-list-item>
</mat-nav-list>