Skip navigation
Search
Search

Not sure what to do?

Browse subjects, locations and universities

Popular topics

Popular subjects

-

User menu

User avatar

Implementation

In order to ensure consistency across systems that may be on differing framework versions. This script is designed to be as self contained as possible and be included in an evergreen way. In other words, always ensure this script is included on the /latest/ framework version. 

            
              https://prod.df.ucascdn.com/evergreen/scripts/evergreen/user-menu.js

It can be included as a standalone script tag, or as part of the framework cutting the mustard loader, but it must be included before ready.js

The menu itself can be implemented using serverside user details (see example markup below) or manually updated via the public method updateUserMenu(). Passing the user details in as an object literal. 

            
            UCASDesignFramework.userMenu.updateUserMenu({
            UID: 'XXYYZZ1234',
            firstName: 'Jean-Luc',
            userType: 'student',
            avatar: '/path/to/avatar.jpg',
            digitalUrl: 'https://digital.ucas.com',
            accountsUrl: 'https://accounts.ucas.com',
            ucasComUrl: 'https://www.ucas.com'
            })

Logged out

<!-- START user-menu-logged-out component -->
<div class="meganav__users"
  data-ucas-content="UcasUserMenu"
  data-uid=""
  data-avatar=""
  data-first-name=""
  data-user-preference=""
  data-ucascom-domain="https://www.ucas.com"
  data-digital-domain="https://digital.ucas.com"
  data-accounts-domain="https://accounts.ucas.com"
>
  <a role="button" aria-controls="user-menu" aria-expanded="false" href="https://accounts.ucas.com/account/login?source=usermenu" class="meganav__user-menu-toggle meganav__user-menu-toggle--loading" id="user-menu-trigger">
    <span class="hide-element">User menu</span>
    <div class="meganav__user-menu-text" aria-hidden="false"></div>
    <div class="meganav__user-menu-icon"></div>
  </a>
  <div class="meganav__user-menu" id="user-menu">
    <div class="meganav__user-menu-wrapper"></div>
  </div>
</div>
<!-- END user-menu-logged-out component -->

Logged in

If a user has a long name it will be truncated 

<!-- START user_menu-logged-in component -->
<div class="meganav__users"
  data-ucas-content="UcasUserMenu"
  data-uid="XYZL87320498"
  data-avatar="https://gigya.com/somewhere.gif"
  data-first-name="Jim"
  data-user-preference="student"
  data-ucascom-domain="https://www.ucas.com"
  data-digital-domain="https://digital.ucas.com"
  data-accounts-domain="https://accounts.ucas.com"
>
  <a role="button" aria-controls="user-menu" aria-expanded="false" class="meganav__user-menu-toggle meganav__user-menu-toggle--loading" data-hj-suppress href="https://accounts.ucas.com/account/login?source=usermenu" id="user-menu-trigger">
    <span class="hide-element">User menu</span>
    <div class="meganav__user-menu-text" aria-hidden="true"></div>
    <div class="meganav__user-menu-icon"></div>
  </a>
  <div class="meganav__user-menu" id="user-menu">
    <div class="meganav__user-menu-wrapper"></div>
  </div>
</div>
<!-- END user_menu component-logged-in -->