Skip to content

headerPosition="below" does not effect nav mat-tab-nav-bar #14191

Closed
@jebbench

Description

@jebbench

Bug, feature request, or proposal:

Bug/Feature - Adding headerPosition="below" does not effect nav mat-tab-nav-bar; I would like it to cause the divider to appear above the labels.

What is the expected behavior?

The divider line should appear above the tab labels as it does for mat-tab-group.

What is the current behavior?

headerPosition="below" has no effect on nav mat-tab-nav-bar.

What are the steps to reproduce?

Add headerPosition="below" to a working mat-tab-nav-bar.

https://stackblitz.com/edit/angular-8lxwwf?file=app/tab-nav-bar-basic-example.html

What is the use-case or motivation for changing an existing behavior?

I'm trying to use the mat-tab-nav-bar as a bottom nav within my app and as such I'd like the tabs to appear below the divider line.

<router-outlet></router-outlet>
<div class="spacer"></div>
<nav mat-tab-nav-bar mat-stretch-tabs headerPosition="below" >
  <a mat-tab-link
     *ngFor="let link of navLinks"
     [routerLink]="link.path"
     routerLinkActive #rla="routerLinkActive"
     [active]="rla.isActive">
    {{link.label}}
  </a>
</nav>
nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

.spacer {
  padding-bottom: 50px;
}

The headerPosition attribute may not be the way to achieve this as it refers to placing the tab headers below the content; which is being done "manually" in this case; it would be useful to have a way to move the divider above the labels though.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

N/A

Is there anything else we should know?

N/A

Metadata

Metadata

Assignees

No one assigned

    Labels

    P4A relatively minor issue that is not relevant to core functionsarea: material/tabs

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions