Search code examples
angularvmware-clarity

How to create a dynamic subnav


I am using Angular 4 and am learning about the clarity design system. Was wondering if anyone has managed to create subnav with dynamic links? https://vmware.github.io/clarity/documentation/header#subnav

I am not sure how to go about this properly.


Solution

  • <nav class="subnav">
        <ul class="nav">
            <li class="nav-item" *ngFor="nav of navs">
                <a class="nav-link" routerLinkActive="active"
    [routerLink]="nav.link">{{nav.title}}</a>
            </li>
        </ul>
    </nav>
    

    and in your class :

      nav = [
           {link:'somewhere/dashboard',title:'Dashboard'},
           {link:'somewhere/management',title:'Management'},
           {link:'somewhere/cloud',title:'Cloud'}
    
        ]