ui/app/components/page-header/template.hbs

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

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

    {{#each navTree as |item|}}
      {{#if item.submenu.length}}
        {{! Has a submenu }}
        {{#hover-dropdown
           tagName="li"
           class="nav-item"
           as |dd|
        }}
          {{#dd.trigger}}
            {{#if (or (not item.resource) (rbac-allows resource=item.resource scope=item.resourceScope))}}
              {{#if item.route}}
                {{#link-to-as-attrs
                   ourRoute=item.route
                   ctx=item.ctx
                   qp=item.qp
                   currentWhen=item.currentWhen
                   activeParent="LI"
                   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="nav-link" role="button" aria-haspopup="true" aria-label={{maybe-t item.localizedLabel item.label}}>
                  {{maybe-t item.localizedLabel item.label}}
                  <span class="icon icon-chevron-down"/>
                </a>
              {{/if}}
            {{/if}}
          {{/dd.trigger}}

          {{#dd.content}}
            {{#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
                       ourRoute=subitem.route
                       ctx=subitem.ctx
                       qp=subitem.qp
                       activeParent="LI"
                       currentWhen=subitem.currentWhen
                    }}
                      <span>
                        {{maybe-t subitem.localizedLabel subitem.label}}
                      </span>
                      <i class="{{subitem.icon}}"/>
                    {{/link-to-as-attrs}}
                  </li>
                {{/if}}
              {{else if subitem.divider}}
                <li class="divider"></li>
              {{else}}
                {{! Just a label }}
                <li class="dropdown-header">
                  <span>
                    {{maybe-t subitem.localizedLabel subitem.label}}
                  </span>
                  <i class="{{subitem.icon}}"/>
                </li>
              {{/if}}
            {{/each}}
          {{/dd.content}}
        {{/hover-dropdown}}

      {{else if item.route}}

        {{#if (or (not item.resource) (rbac-allows resource=item.resource scope=item.resourceScope))}}
          {{! No submenu }}
          <li class="nav-item {{if (and item.disableIfClusterNotReady (not cluster.isReady)) "pointer-events-none"}}">
            {{#link-to-as-attrs
               ourRoute=item.route
               ctx=item.ctx
               qp=item.qp
               activeParent="LI"
               currentWhen=item.currentWhen
               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>

  {{#hover-dropdown
     tagName="ul"
     class="nav-user list-unstyled"
     horizontalPosition="right"
     delay=250
     as |dd|
  }}
    <li class="nav-item">
      {{#dd.trigger
         class="btn"
         ariaLabel=(t "nav.user.label" username=session.user)
      }}
        <a role="button" aria-haspopup="true" class="nav-link">
          {{#if accessEnabled}}
            {{identity-avatar
              link=false
              identity=access.principal
            }}
          {{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 text-muted"></i>
        </a>
      {{/dd.trigger}}
    </li>

    {{#dd.content class="text-right"}}
      {{#if accessEnabled}}
        <li role="presentation" class="user-auth">
          {{identity-block principal=access.principal}}
        </li>
      {{/if}}

      <li role="separator" class="divider"></li>
      <li>
        {{#link-to "authenticated.apikeys"}}
          <span>{{t "nav.api.link"}}</span>
        {{/link-to}}
      </li>
      <li>
        {{#link-to "global-admin.security.cloud-credentials"}}
          <span>{{t "nav.admin.security.cloudCredentials"}}</span>
        {{/link-to}}
      </li>
      <li>
        {{#link-to "nodes.node-templates"}}
          <span>{{t "nav.nodeTemplates.link"}}</span>
        {{/link-to}}
      </li>
      <li>
        {{#link-to "authenticated.prefs"}}
          <span>{{t "nav.userPreferences.link"}}</span>
        {{/link-to}}
      </li>
      <li role="separator" class="divider"></li>
      <li>
        {{#link-to "logout" class="user-logout"}}
          <span>{{t "nav.user.logout"}}</span>
        {{/link-to}}
      </li>
    {{/dd.content}}
  {{/hover-dropdown}}
</nav>