Search code examples
htmlangularangular-materialmenu

How can I place the search, login and registration buttons in the header on the right side of menu?

So this is the menu, but I want the circled three buttons to be on the right side...How can I do this? I am using Angular material.

menu

Solution

  • If you use the Angular Material toolbar, follow the official documentation

    From the doc:

    The toolbar does not perform any positioning of its content. This gives the user full power to position the content as it suits their application.

    <mat-toolbar-row>
  <span>Second Line</span>
  <span class="example-spacer"></span>
  <mat-icon class="example-icon" aria-hidden="false" aria-label="Example user verified icon">verified_user</mat-icon>
</mat-toolbar-row>

    A common pattern is to position a title on the left with some actions on the right. This can be easily accomplished with display: flex:

    .example-spacer {
  flex: 1 1 auto;
}

    Follow the documentation and you'll have the three buttons on the right side