  <div class="navbar navbar-toggleable-sm flex-row align-items-center">
        <a data-toggle="collapse" data-target="#navbar-0" class="navbar-item hidden-md-up mr-3">
          <i class="material-icons">&#xe5d2;</i>
        </a>

        <div class="pull-center">
          <div ui-include="'../views/blocks/navbar.brand.icon.html'"></div>
        </div>

        <!-- navbar collapse -->
        <div class="collapse navbar-collapse" id="navbar-0">
          <!-- link and dropdown -->
          <ul class="nav navbar-nav text-{{app.setting.theme.primary}}-hover">
            <li class="nav-item">
              <a class="nav-link" href>
                <span class="nav-label"><b class="label label-xs accent">N</b></span>
                <span class="nav-text">Video</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href>
                <span class="nav-text">Music</span> 
              </a>
            </li>
            <li class="nav-item active">
              <a class="nav-link" href>
                <span class="nav-text">Photo</span> 
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href>
                <span class="nav-text">Blog</span>
                <span class="caret"></span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href>
                <span class="nav-text">Shop</span>
              </a>
            </li>
          </ul>
          <!-- / link and dropdown -->
        </div>
        <!-- / navbar collapse -->

        <!-- nabar -->
        <ul class="nav navbar-nav align-items-center flex-row ml-auto">
          <li class="nav-item hidden-sm-down">
            <a class="nav-link" href>
              <span>About</span> 
            </a>
          </li>
          <li class="nav-item hidden-sm-down">
            <a class="nav-link" href>
              <span>Contact</span> 
            </a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link" href data-toggle="dropdown">
              <i class="material-icons">&#xe8cb;</i>
              <b class="label label-sm up warn">5</b>
            </a>
            <div ui-include="'../views/blocks/dropdown.cart.html'"></div>
          </li>
          <li class="nav-item dropdown hidden-xs-down">
            <a class="nav-link" href data-toggle="dropdown">
              <span>Login</span>
            </a>
            <div ui-include="'../views/blocks/dropdown.form.html'"></div>
          </li>
          <li class="nav-item">
            <a class="nav-link" href>
              <span class="hidden-xs-down btn btn-sm rounded {{app.setting.theme.primary}} text-u-c _600">
                Sign Up
              </span>
              <span class="hidden-sm-up btn btn-sm btn-icon rounded {{app.setting.theme.primary}}">
                <i class="material-icons">&#xe7fd;</i>
              </span>
            </a>
          </li>
        </ul>
        <!-- / navbar -->
  </div>
