Secure Side Navigation
The secure side navigation is a secondary navigation that is displayed on the left hand side on the page.
Usage
The secure side navigation is used when a secondary navigation for a page is required.
The side navigation supports the use of any SVG within the framework as well as a default state with no SVGs, this includes notification indicators that can highlight items that need attention. Alternatively, use the sidebar specific class for the Mailbox notification.
Accessible attributes
| Accessible attribute | Description |
|---|---|
aria-label |
Use the aria label for the notification indicator and navigation links to give more descriptive information. |
JavaScript Support
| JavaScript Support class name | Description |
|---|---|
slb-active |
This class will change the look of the active navigation link |
side-navigation\side-nav-secure.hbs
<div class="slb-sidebar-secure">
<header>
<svg class="slb-sidebar-secure__logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 211.166 46.75" aria-label="Standard Life Home">
<path fill="#0A2F73" d="M.357 27.99c0-4.782 2.612-6.817 8.65-6.817 2.068 0 4.58.374 6.173.78-.034.814 0 4.48 0 4.48-1.73-.374-4.172-.647-6.004-.714-1.526-.035-2.476.065-2.985.642-.37.373-.405.812-.405 1.29.068 1.017.78 1.354 2.103 2.136 1.153.678 4.104 2.204 5.495 3.153 2.612 1.765 3.12 3.563 3.12 6.038 0 4.886-2.916 7.123-8.717 7.293-2.646.068-5.19-.337-7.123-.915v-4.272c1.594.237 3.494.476 5.394.61 2.238.102 3.154.033 4.002-.477.576-.373.915-1.22.78-2.068-.17-.813-.51-1.256-1.765-2.068a92.4 92.4 0 0 0-4.138-2.51c-3.63-2.07-4.58-3.46-4.58-6.58zm25.03-4.68v4.444h3.696v3.527h-3.697v9.363c0 .646-.034 1.153.136 1.392.17.237.238.34.712.407.61.034 2.103.034 3.053-.067v3.494c-1.018.27-2.713.405-3.8.372-3.56 0-5.19-1.22-5.19-4.816V31.28h-2.61v-3.526h2.61v-3.562l5.09-.88zm15.53 11.635V33.86c0-.95-.236-1.493-.745-1.866-.577-.407-1.594-.44-2.748-.407-1.56.034-3.596.237-4.783.373v-3.663c1.766-.51 4.41-.814 6.243-.78 4.206.033 7.157 1.798 7.157 6.343v12.145h-4.987V44.92c-1.187.95-2.544 1.322-4.308 1.322-3.596 0-5.36-2.408-5.36-5.394v-.646c.103-4.036 2.68-5.29 7.972-5.29l1.56.033zm0 6.82v-3.9c-1.73-.104-3.02.032-3.662.372-.577.305-.95.78-.95 1.967v.238c.034 1.287.916 1.933 2.272 1.898 1.087-.033 1.73-.306 2.34-.576zM54.79 27.788v1.356c1.525-1.053 2.916-1.63 5.053-1.63 4.104 0 5.63 2.884 5.63 5.972v12.517h-5.12V34.707c0-1.12-.035-1.898-.442-2.374-.54-.61-1.083-.746-2.135-.646-.95.068-2.103.543-2.815.916V46h-5.123V27.79h4.952zm29.776 18.215H79.58v-1.086c-1.187.916-2.375 1.323-4.24 1.323-4.14 0-6.547-2.307-6.547-7.463v-2.61c.034-3.73.95-5.53 2.442-6.955 1.22-1.12 3.053-1.694 5.292-1.73.984 0 2.272.138 2.917.272v-6.072h5.122v24.32zm-5.088-14.45c-.68-.136-2.103-.34-3.053-.136-2 .44-2.544 1.832-2.544 4.952v1.254c.036 2.44.24 3.223.95 3.97.51.54 1.223.745 2.173.745s1.797-.205 2.442-.61l.034-10.178zm17.668 3.392V33.86c0-.95-.237-1.493-.746-1.866-.577-.407-1.594-.44-2.748-.407-1.56.034-3.596.237-4.783.373v-3.663c1.762-.51 4.41-.814 6.24-.78 4.205.033 7.156 1.798 7.156 6.343v12.145H97.28V44.92c-1.187.95-2.543 1.322-4.307 1.322-3.596 0-5.36-2.408-5.36-5.394v-.646c.103-4.036 2.68-5.29 7.972-5.29l1.56.033zm0 6.82v-3.9c-1.73-.104-3.02.032-3.663.372-.577.305-.95.78-.95 1.967v.238c.034 1.287.916 1.933 2.272 1.898 1.086-.033 1.73-.306 2.34-.576zm13.938-14.01v1.322c1.153-1.052 3.188-1.765 5.325-1.527v4.173c-2.14-.136-4.106.407-5.227 1.086V46h-5.122V27.75h5.023zm22.894 18.248h-4.985v-1.086c-1.188.916-2.375 1.323-4.24 1.323-4.14 0-6.547-2.307-6.547-7.463v-2.61c.034-3.73.948-5.53 2.442-6.955 1.222-1.12 3.053-1.694 5.29-1.73.984 0 2.272.138 2.917.272v-6.072h5.123v24.32zm-5.088-14.45c-.68-.136-2.104-.34-3.053-.136-2.002.44-2.545 1.832-2.545 4.952v1.254c.034 2.44.238 3.223.95 3.97.51.54 1.22.745 2.17.745s1.798-.205 2.442-.61l.036-10.178zm17.97 9.937V21.514h5.324V40.88c0 .272.034.374.137.476.138.137.34.17.613.205h7.868v4.31c-2.476.373-7.26.44-9.7.17-1.255-.103-2.374-.407-3.12-1.12s-1.12-1.562-1.12-3.43zm22.078-15.636h-5.12v-4.172h5.12v4.172zm0 20.15h-5.12v-18.25h5.12v18.25zm10.277-19.572v1.322h4.07v3.562h-4.07v14.688h-5.122V31.316h-2.814v-3.562h2.812v-1.086c0-4.51 2.035-5.63 5.53-5.63 1.288 0 2.916.203 3.696.373v3.46c-1.697-.102-3.427-.17-3.835.238-.304.273-.27.68-.27 1.325zm19.535 3.73c1.425 1.898 1.696 3.357 1.696 7.19 0 .237 0 .78-.034 1.053h-10.888c.066 1.967.848 3.392 3.356 3.663 2.138.236 5.056-.34 6.92-.78v3.765c-2.034.78-4.308 1.188-7.056 1.188-5.02 0-8.208-2.542-8.208-8.716v-1.56c.032-5.94 3.595-8.48 8.208-8.48 2.886 0 4.955 1.253 6.006 2.68zm-3.053 4.952c-.034-2.646-1.29-3.765-3.087-3.765-1.73 0-3.053 1.082-3.086 3.763h6.173z" />
<path fill="#fb0" d="M193.25 14l5.5 10L211 0z" />
</svg>
</header>
<nav>
<ul class="slb-sidebar-secure__nav-list">
<li class="slb-sidebar-secure__nav-item"><a href="#" class="slb-sidebar-secure__nav-link slb-active">Home ></a></li>
<li class="slb-sidebar-secure__nav-item"><a href="#" class="slb-sidebar-secure__nav-link">Your pensions ></a></li>
<li class="slb-sidebar-secure__nav-item"><a href="#" class="slb-sidebar-secure__nav-link">Your savings ></a></li>
<li class="slb-sidebar-secure__nav-item"><a href="#" class="slb-sidebar-secure__nav-link">Plan your retirement ></a></li>
</ul>
<ul class="slb-sidebar-secure__nav-list">
<li class="slb-sidebar-secure__nav-item"><a href="#" class="slb-sidebar-secure__nav-link">Your details ></a></li>
<li class="slb-sidebar-secure__nav-item"><a href="#" class="slb-sidebar-secure__nav-link">Mailbox ><span class="slb-sidebar-secure__nav-icon" aria-label="3 unread messages">3</span></a></li>
<li class="slb-sidebar-secure__nav-item"><a href="#" class="slb-sidebar-secure__nav-link">Guides ></a></li>
<li class="slb-sidebar-secure__nav-item"><a href="#" class="slb-sidebar-secure__nav-link">Help ></a></li>
</ul>
<ul class="slb-sidebar-secure__nav-list">
<li class="slb-sidebar-secure__nav-item"><a href="#" class="slb-sidebar-secure__nav-link">Logout ></a></li>
</ul>
</nav>
</div>
Source:
components/_side-navigation-secure.scss