ui/lib/shared/addon/components/page-header/template.hbs

<nav class="clearfix responsive-nav" role="navigation" id="js-responsive-nav">
  <a class="nav-logo logo-{{app.mode}} btn bg-transparent"><span class="sr-only">{{settings.appName}}</span></a>

  <ul class="nav-main nav-list no-inline-space">
    {{page-header-environment
      pageScope=pageScope
      isOwner=isOwner
    }}

    {{#each navTree as |item|}}
      {{#if item.submenu.length}}
        {{! Has a submenu }}
        <li class="dropdown nav-item">
          {{#if (or (not item.resource) (rbac-allows resource=item.resource scope=item.resourceScope))}}
            {{#if item.route}}
              {{#link-to-as-attrs
                  item.route
                  models=item.ctx
                  qp=item.qp
                  moreCurrentWhen=item.moreCurrentWhen
                  activeParent=true
                  class="dropdown-toggle"
                  role="button"
                  aria-haspopup="true"
                  aria-expanded="false"
              }}
                {{maybe-t item.localizedLabel item.label}}
                <span class="icon icon-chevron-down"/>
              {{/link-to-as-attrs}}
            {{else}}
              <a class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false" aria-label={{maybe-t item.localizedLabel item.label}}>
                {{maybe-t item.localizedLabel item.label}}
                <span class="icon icon-chevron-down"/>
              </a>
            {{/if}}
          {{/if}}

          <ul class="dropdown-menu" data-dropdown-id={{item.id}}>
            {{#each item.submenu as |subitem|}}
              {{#if subitem.route}}
                {{#if (or (not subitem.resource) (rbac-allows resource=subitem.resource scope=subitem.resourceScope))}}
                  <li>
                    {{#link-to-as-attrs
                      subitem.route
                      models=subitem.ctx
                      qp=subitem.qp
                      activeParent=true
                      moreCurrentWhen=subitem.moreCurrentWhen
                      submenuItem=true
                    }}
                      <i class="{{subitem.icon}}"/> {{maybe-t subitem.localizedLabel subitem.label}}
                    {{/link-to-as-attrs}}
                  </li>
                {{/if}}
              {{else if subitem.divider}}
                <li class="divider"></li>
              {{else}}
                {{! Just a label }}
                <li class="dropdown-header">
                  <i class="{{subitem.icon}}"/> {{maybe-t subitem.localizedLabel subitem.label}}
                </li>
              {{/if}}
            {{/each}}
          </ul>
        </li>
      {{else if item.route}}
        {{#if (or (not item.resource) (rbac-allows resource=item.resource scope=item.resourceScope))}}
          {{! No submenu }}
          <li class="nav-item">
            {{#link-to-as-attrs
              item.route
              models=item.ctx
              qp=item.qp
              activeParent=true
              moreCurrentWhen=item.moreCurrentWhen
              class="nav-link"
            }}
              {{maybe-t item.localizedLabel item.label}}
            {{/link-to-as-attrs}}
          </li>
        {{/if}}
      {{else}}
        {{! Just a label }}
        <li class="dropdown-header">
          {{maybe-t item.localizedLabel item.label}}
        </li>
      {{/if}}
    {{/each}}
  </ul>

  <ul class="nav-user dropdown">
    <li>
      <a class="btn dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false" aria-label="{{t 'nav.user.label' username=session.user}}"  data-toggle="header-user-menu">
        {{#if accessEnabled}}
          {{identity-avatar link=false identity=access.me}}
        {{else}}
          <div class="gh-avatar">
            <div class="gh-placeholder">
              <i class="icon icon-user"></i>
            </div>
          </div>
        {{/if}}
        <span class="sr-only">{{t 'nav.srToggleDropdown'}}</span>
        <i class="icon icon-chevron-down"></i>
      </a>

      <ul class="dropdown-menu dropdown-menu-right text-right" data-dropdown-id="header-user-menu">
        {{#if accessEnabled}}
          <li role="presentation" class="user-auth">
            {{identity-block avatar=false identity=access.me}}
          </li>
        {{/if}}

        {{#if isCaas}}
          <li>{{#link-to "global-admin.clusters"}}{{t 'nav.environment.manage'}}{{/link-to}}</li>
        {{/if}}

        <li role="separator" class="divider"></li>
        <li>{{#link-to "authenticated.apikeys"}}{{t 'nav.api.link'}} <i class="icon icon-key icon-fw"/>{{/link-to}}</li>
        <li>{{#link-to "authenticated.node-templates"}}{{t 'nav.nodeTemplates.link'}} <i class="icon icon-host icon-fw"/>{{/link-to}}</li>
        <li role="separator" class="divider"></li>
        <li>{{#link-to "authenticated.prefs"}}{{t 'nav.userPreferences.link'}} <i class="icon icon-gear icon-fw"/>{{/link-to}}</li>
        <li role="separator" class="divider"></li>
        <li>{{#link-to "logout" class="user-logout"}}{{t 'nav.user.logout'}} <i class="icon icon-logout icon-fw"/>{{/link-to}}</li>
      </ul>
    </li>
  </ul>
</nav>