Displays the current application name, links to the user's profile, My Turas, and other applications.
The header (global) is a standard component of all Turas page templates. Always include this component on the page unless there is a very strong use case to deviate from the standard templates. Changes to the standard templates must be discussed with the experience team.
Before signing in the user should see:
If the user is signed into My Turas it includes:
If the user has signed into an application it includes:
This should also include the Skip to main content component which can be accessed by pressing the tab key on your keyboard when loading the page to make the component.
Do:
Use the global header code exactly as supplied.
Avoid:
Adding or removing any elements to the global header.
The header (global), footer and helpdesk are added by installing the NES.Turas.UiComponents nuget package. A README file and assistance to set this up will be supplied at time.
<turas-universal-navigation turas-application-name="Design System">
</turas-universal-navigation>
<nav id="universal-nav" class="">
<div class="container">
<a class="navbar-brand" href="/">
<img src="/lib/turas-design-system/dist/img/TurasLogoBlue.png" alt="" class="img-fluid" />
<p>Design System</p>
</a>
<ul class="list-unstyled m-0">
</ul>
</div></nav>
<turas-universal-navigation turas-application-name="Design System" is-sign-in sign-in-url="/">
</turas-universal-navigation>
<nav id="universal-nav" class="">
<div class="container">
<a class="navbar-brand" href="/">
<img src="/lib/turas-design-system/dist/img/TurasLogoBlue.png" alt="" class="img-fluid" />
<p>Design System</p>
</a>
<ul class="list-unstyled m-0">
<ul class="list-unstyled m-0">
<li class="nav-item dropdown" id="universal-is-signed-out">
<a href="/" class="nav-link">Sign in</a>
</li>
</ul>
</ul>
</div></nav>
<turas-universal-navigation turas-application-name="Design System">
<turas-universal-navigation-application-links>
<a class="dropdown-item" href="/">Additional Cost of Teaching</a>
<a class="dropdown-item" href="/">Portfolio</a>
</turas-universal-navigation-application-links>
<turas-universal-navigation-application-user-dropdown user-initials="EU" user-name="Example User" user-email="Example.User@nhs.scot">
</turas-universal-navigation-application-user-dropdown>
</turas-universal-navigation>
<nav id="universal-nav" class="">
<div class="container">
<a class="navbar-brand" href="/">
<img src="/lib/turas-design-system/dist/img/TurasLogoBlue.png" alt="" class="img-fluid" />
<p>Design System</p>
</a>
<ul class="list-unstyled m-0">
<li class="nav-item dropdown">
<a href="https://turasdashboard.nes.nhs.scot" class="nav-link pr-0">My Turas</a>
</li>
<!-- Application dropdown -->
<li class="nav-item dropdown" id="app_dropdown">
<a class="nav-link dropdown-toggle" href="#" id="universalNavbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Applications
</a>
<div class="dropdown-menu" aria-labelledby="universalNavbarDropdown">
<a class="dropdown-item" href="/">Additional Cost of Teaching</a>
<a class="dropdown-item" href="/">Portfolio</a>
</div>
</li>
<li id="user-dropdown" class="dropdown">
<a href="#" class="dropdown-toggle header-text" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<div class="userInitial">
<p>EU</p>
</div> <!-- /.userInital -->
</a>
<div class="dropdown-menu dropdown-content dropdown-menu-right">
<div class="dropdown-content">
<!-- Initial Inner -->
<div class="userInitial">
<p>EU</p>
</div> <!-- /.userInital -->
<div class="user-info">
<p class="user-info-name">Example User</p>
<p>Example.User@nhs.scot</p>
<p><a href="https://turasdashboard.nes.nhs.scot//User/PersonalDetails" class="p-0">View or edit profile</a></p>
</div> <!-- /.user-info -->
<hr class="mt-10" />
<a href="https://turasdashboard.nes.nhs.scot/home/SignedOut/" class="btn btn-primary btn-block" role="button">Sign out</a>
</div> <!-- /.dropdown-content -->
</div> <!-- /.dropdown-menu -->
</li>
</ul>
</div></nav>
This component is fully compliant with the WCAG 2.2 standard.
