angular2-simple-ui/sui/sui.navigation/sui.navigation.component.html

Angular 2 Simple Material Design UI Components customisable with Simple 30 KB CSS with LESS support and full features support , just plugin up and run for clarity look at sample examples

<ul *ngIf="!showSideNav" [ngStyle]="nav.style" class="{{'sui-navbar sui-hide-mobile sui-hide-tablet ' + nav.cssClass}}">

    <li *ngIf="nav.showBothBrandAndLogo" class="sui-left">
        <img *ngIf="nav.brandLogoPath" src="{{nav.brandLogoPath}}" class={{nav.brandLogoClass}} [ngStyle]="nav.brandLogoStyle">
    </li>

    <li *ngIf="!nav.brandLogoPath|| nav.showBothBrandAndLogo" class="sui-left">
        <a href="/" class={{nav.brandCssClass}} [ngStyle]="nav.brandStyle">
            {{nav.brand}}
        </a>
    </li>

    <li *ngFor="let item of nav.links" class="sui-right">
        <a routerLink="{{item.routerLink}}" routerLinkActive="sui-active" title="{{item.displayName}}" class="{{item.cssClass}}"
            [ngStyle]="item.style">
            <i *ngIf="item.icon" class="{{item.icon}}"> </i>
            <span *ngIf="item.showBothIconText">  
                <i *ngIf="item.icon" class="{{item.icon}}"> </i> {{item.displayName}} 
            </span>
            <span *ngIf="!item.icon"> {{item.displayName}}  </span>
        </a>
    </li>
</ul>
<div *ngIf="!showSideNav" class="sui-hide-desktop-xl sui-hide-desktop">
    <ul class="sui-navbar">
        <li class="sui-opennav">
            <span *ngIf="!rightAllginMobileMenuBars" class="sui-pointer sui-text-white sui-margin-right" (click)="onBarsClicked()">☰</span>
            <img *ngIf="nav.brandLogoPath" src="{{nav.brandLogoPath}}" class={{nav.brandLogoClass}} [ngStyle]="nav.brandLogoStyle">
            <span class="sui-brand">{{nav.brand}} </span>
            <span *ngIf="rightAllginMobileMenuBars" class="sui-pointer sui-text-white" (click)="onBarsClicked()">☰</span>
        </li>
    </ul>
</div>
<ul *ngIf="showSmallMenu" [ngStyle]="nav.style" class="{{'sui-navbar ' + nav.cssClass}} ">
    <li *ngFor="let item of nav.links">
        <a routerLink="{{item.routerLink}}" routerLinkActive="sui-active" title="{{item.displayName}}" class="{{item.cssClass}}"
            [ngStyle]="item.style">
            <i *ngIf="item.icon" class="{{item.icon}}"> </i>
            <span *ngIf="item.showBothIconText">  
                <i *ngIf="item.icon" class="{{item.icon}}"> </i> {{item.displayName}} 
            </span>
            <span *ngIf="!item.icon"> {{item.displayName}}  </span>
        </a>
    </li>
</ul>

<ul class="{{' sui-sidenav '+ nav.cssClass}}" *ngIf="showSideMenu" [ngStyle]="nav.sideNavStyle" >
    <li> <a (click)="onSideMenuClick()" class="sui-closenav sui-large">Close &times;</a> </li>
    <li *ngFor="let item of nav.links">
        <a routerLink="{{item.routerLink}}" routerLinkActive="sui-active" title="{{item.displayName}}" class="{{item.cssClass}}"
            [ngStyle]="item.style">
            <i *ngIf="item.icon" class="{{item.icon}}"> </i>
            <span *ngIf="item.showBothIconText">  
                <i *ngIf="item.icon" class="{{item.icon}}"> </i> {{item.displayName}} 
            </span>
            <span *ngIf="!item.icon"> {{item.displayName}}  </span>
        </a>
    </li>
</ul>


<header *ngIf="showSideNav" class="{{'sui-navbar  ' + nav.cssClass}}" [ngStyle]="nav.style">
    <ul class="sui-navbar">
        <li class="sui-opennav">
            <span *ngIf="!rightAllginMobileMenuBars" class="sui-pointer sui-text-white sui-margin-right" (click)="onSideMenuClick()">☰</span>
            <img *ngIf="nav.brandLogoPath" src="{{nav.brandLogoPath}}" class={{nav.brandLogoClass}} [ngStyle]="nav.brandLogoStyle">
            <span class="sui-brand">{{nav.brand}} </span>
            <span *ngIf="rightAllginMobileMenuBars" class="sui-pointer sui-text-white" (click)="onSideMenuClick()">☰</span>
        </li>
    </ul>
</header>