Mobile responsive top menu

I m using Clarity Design System with angular and the top menu is not mobile response

 <header class="header-2">
  <div class="branding">
      <a class="nav-link">
          <clr-icon shape="home"  size="24"></clr-icon>
          <span class="title">title</span>
      </a>
     </div>
    <div class="header-nav">
      <a class="nav-link nav-text" routerLink="/home">Home</a>
      <a class="active nav-link nav-text" 
    routerLink="/login">Login</a>
   </div>
  </header>

I m expecting the top menu to turn into few lines (button) when the width is reduce

Or should I use different tags ?

Solution

To use responsive navigation, see the documentation on it at https://v2.clarity.design/navigation. You need to use the clr-main-container and clr-header elements to enable this behavior.

Given your markup, it should be something like the following.

<clr-main-container>
    <clr-header class="header-2">
       <div class="branding">
         <a class="nav-link">
          <clr-icon shape="home"  size="24"></clr-icon>
          <span class="title">title</span>
        </a>
      </div>
      <div class="header-nav" [clr-nav-level]="1">
        <a class="nav-link nav-text" routerLink="/home">Home</a>
        <a class="active nav-link nav-text" routerLink="/login">Login</a>
      </div>
    </clr-header>
    <div class="content-container">
        <main class="content-area">
            ... the main body content goes here, probably a router-outlet
        </main>
        <nav class="sidenav" [clr-nav-level]="2">
            ... if you want a sidenav that is, or omit this
        </nav>
    </div>
</clr-main-container>