material_base-8.x-2.x-dev/themes/material_base_mdc/templates/layout/region--navbar--example.html.twig

{% set classes = [
    'region',
    'region-' ~ region|clean_class,
    'page-navbar',
    'navbar',
    'mdc-top-app-bar',
    navbar_fixed ? 'mdc-top-app-bar--fixed' : 'mdc-top-app-bar--not-fixed',
    navbar_style ? 'mdc-top-app-bar--' ~ navbar_style,
] %}

<header{{ attributes.addClass(classes).setAttribute('data-mdc-auto-init', 'MDCTopAppBar') }}>
  <div class="navbar__container mdc-top-app-bar__row">
    <section class="navbar__section mdc-top-app-bar__section">

      {% include "@material_base_mdc/components/02_molecules/icon-button.twig" with {
        data: {
          icon: {
            data: {
              value: 'menu',
            },
            settings: {
              type: 'svg-sprite',
            },
          },
        },
        settings: {
          classes: ['mdc-top-app-bar__navigation-icon', 'overlay-open__button', 'hidden-lg'],
        },
      } %}

      {{ content }}

      {% include "@material_base_mdc/components/02_molecules/icon-button.twig" with {
        data: {
          url: '/user',
          icon: {
            data: {
              value: 'account_circle',
            },
            settings: {
              type: 'svg-sprite',
            },
          },
        },
        settings: {
          classes: ['mdc-top-app-bar__action-item', 'navbar-item--right'],
          tag: 'a',
        },
      } %}

      {% include "@material_base_mdc/components/02_molecules/button.twig" with {
        data: {
          label: 'Contact',
          url: '/contact',
        },
        settings: {
          classes: ['mdc-button--unelevated', 'button--light', 'navbar-item', 'visible-sm-flex'],
          tag: 'a',
        },
      } %}
    </section>
  </div>
</header>