Material-components-web-components: Investigate arbitrary rows within an app bar

[aress31]

Is your feature request related to a problem? Please describe.
Could it be possible to add a new slot/prop to the mwc-top-app-bar to support tab bar navigation - maybe just below the app bar. At the minute the app bar has no option at all to add a navigation, therefore my work around is as follows:

1. First app bar for the brand name and action buttons - like languages and theme switch
2. Second app bar for the tab bar for the general navigation on the website

Describe the solution you'd like
A clear and concise description of what you want to happen.
Surely, there should be a more elegant way of achieving the above, my code looks like that at the minute:

  <mwc-top-app-bar class="top-app-bar">
            <h3 slot="title">Aegis Cyber</h3>
            <mwc-icon-button
              slot="actionItems"
              icon="languages"
            ></mwc-icon-button>
            <mwc-icon-button-toggle
              onIcon="nights_stay"
              offIcon="wb_sunny"
              slot="actionItems"
            ></mwc-icon-button-toggle>
          </mwc-top-app-bar>
          <!-- navigation bar -->
          <mwc-top-app-bar
            class="top-app-bar-secondary"
            dense
            @MDCTopAppBar:nav=${() => (this.drawer.open = !this.drawer.open)}
          >
            <mwc-icon-button
              slot="navigationIcon"
              icon="menu"
              id="hamburger"
            ></mwc-icon-button>
            <my-menu slot="actionItems" id="nav"></my-menu>
          </mwc-top-app-bar>

EDIT: Also I think that giving flexibility for the placement of the tab bar should be a must, either it would take the full width, be left/centred or right aligned.

[govis]

Would also be useful if a part (e.g. tabs section) of such header could be made "sticky" and remain visible during page scrolling while the rest scrolls away

[aress31]

See the following link for use cases where multiple headers or subheaders/tab-bars are required:
https://mui-treasury.com/layout/features/multiple-headers/

[dfreedm]

It seems like what you actually want is multiple rows in the Top App Bar, and have tabs in the second row.
We have an open issue about tabs in Top App Bar, #781, but it's not clear right now if the design of Top App Bar is intended to have multiple rows.
We'll have to talk with designers to check if that is permitted in the Material spec.

[sujato]

As I noted in my issue (#781), this is explicitly shown, with several examples, in the MD spec. Virtually all the examples illustrating usage of tabs show them in the top or (rarely) bottom app bar. It's a very basic and common pattern.

https://material.io/components/tabs#usage

The upstream issue is here; it has been open since Sep 2018, with no signs of progress.

https://github.com/material-components/material-components-web/issues/3633

[asyncLiz]

We're keeping this issue open to investigate adding arbitrary rows within an app bar. While the technical structure is available to support this, we are not sure if this is within spec and we need to check with design for guidance.

For example: styling an app bar with two different colored rows or having multiple rows with different content (including but not limited to tabs).

781 will remain the issue for the Material Design guidance for tab + app bar interaction.