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'
})
<!-- 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 href="/students" class="meganav__user-menu-toggle meganav__user-menu-toggle--loading" id="user-menu-toggle">
<div class="meganav__user-menu-text"></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 -->
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 href="/students" class="meganav__user-menu-toggle meganav__user-menu-toggle--loading" id="user-menu-toggle">
<div class="meganav__user-menu-text"></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 -->