Get started   Components   Icons   What's New
  Get a License
⚡️New Release! Material X components for Angular⚡ view demo
Appearance
Color
Header Appearance
Size
Logo
Breadcrumbs
Change filter for code updates
HTML
TS
CSS
<!-- size: string = 'desktop' | 'dense' | 'mobile' | '' -->

<set-appbar size="mobile"
            appearance="raised"
            color="black">
    <set-appbar-logo>
        <div class="logo-default">M</div>
        Menushka
    </set-appbar-logo>
    <set-appbar-nav>
        <ng-container *ngFor="let navHeader of navHeaders">
            <a *ngIf="navHeader.type !== 'menu'"
               mat-button
               disableRipple="true"
               color="black"
               [routerLink]="navHeader.link"
               routerLinkActive="mat-button-active"
               [routerLinkActiveOptions]="navHeader.routerLinkActiveOptions">
                <set-icon [attr.shape]="navHeader.icon"></set-icon>
                  &nbsp;&nbsp;{{navHeader.text}}
            </a>
            <a *ngIf="navHeader.type === 'menu'"
               mat-button
               [matMenuTriggerFor]="menu"
               color="black"
               [class.mat-button-active]="activeMenuButtonText === navHeader.text">
                <set-icon [attr.shape]="navHeader.icon"></set-icon>
                  &nbsp;&nbsp;{{navHeader.text}}&nbsp;&nbsp;
                <set-icon class="is-solid"
                          shape="arrow_drop_down"
                          size="16">
                </set-icon>
            </a>
            <mat-menu #menu="matMenu">
                <a  mat-menu-item
                    *ngFor="let menuContent of navHeader.menuContent"
                    [routerLink]="navHeader.link + '/' + menuContent.link"
                    routerLinkActive="set-menu-item-active"
                    [routerLinkActiveOptions]="{exact: true}">
                      {{menuContent.name}}
                </a>
            </mat-menu>
        </ng-container>
    </set-appbar-nav>
    <set-appbar-actions>
        <mat-form-field set-search
                        mat-form-field-appearance-smooth
                        class="appbar-search">
            <set-icon matPrefix shape="search"></set-icon>
            <input matInput placeholder="Search" />
        </mat-form-field>
        <button mat-icon-button
                mat-smooth-icon-button
                color="black"
                [matBadge]="newNotifications"
                [matMenuTriggerFor]="menunotification"
                [matBadgeSize]="small"
                [matBadgeHidden]="newNotifications === 0"
                matBadgePosition="after">
            <set-icon shape="notifications"></set-icon>
        </button>
        <mat-menu #menunotification="matMenu">
            <div mat-menu-item mat-rich-menu-item
               [highlighted]="item.time"
               (click)="checkNotification(item)"
               *ngFor="let item of notificationMenu">
                <div mat-rich-menu-label-wrapper>
                  {{item.text}}
                  <div mat-rich-menu-subtext *ngIf="item.subtext && item.time">{{item.subtext}}
                  </div>
                </div>
                <set-icon *ngIf="item.icon" [attr.shape]="item.icon"></set-icon>
                <div mat-rich-menu-item-value *ngIf="item.time">{{item.time}}</div>
            </div>
        </mat-menu>
        <div class="set-appbar-avatar" [matMenuTriggerFor]="menuavatar"></div>
        <mat-menu #menuavatar="matMenu">
          <a mat-menu-item
            *ngFor="let item of avatarMenu">
            <set-icon [attr.shape]="item.icon"></set-icon>
            &nbsp;&nbsp;{{item.text}}
          </a>
        </mat-menu>
    </set-appbar-actions>
</set-appbar>