EXTERNAL - Documentation

Navigation Bar

full screen new window example HTML markup

The Navigation Bar should be used on all non-secure Standard Life websites as the top-most element.

Usage

The Navigation Bar is comprised of 3 sections - the brand logo on the left side, the main nav items, and a 'sticky' button on the right side.

The logo will resize to fit into reduced space when viewed on small screens below 400px width. When working with the source Sass files, this breakpoint can be customised by setting the Sass variable $navbar-logo-size-breakpoint.

Each nav link functions in one of two ways - either as a basic page link, or a button for a 'mega menu' style dropdown.

On small screens, the main nav items collapse into the nav toggle button, while the right-most button (usually the Login button) remains visible. Dropdowns become accordion-style link lists on smaller screens. The Navigation Bar will collapse at 996px, to accommodate the example nav items provided in the styleguide. When working with the source Sass files, the breakpoint at which the Navigation Bar collapses can be customised by setting the Sass variable $navbar-breakpoint.

TODO: The following statement regarding Bootstrap JS will likely move or be removed

The Navigation Bar utilities Bootstrap's Collapse JavaScript plugin to enable the dynamic functionality of the toggle and dropdowns / accordions. To enable the functionality in your project, include the JavaScript dependencies for Bootstrap 4.1.x in the page (as with other components that require JavaScript in the framework). jQuery and the Bootstrap JavaScript library are enabled in the Framework by default.

Accessible Attributes

Accessible attribute Description
aria-label="Standard Life Home" Gives a description to the brand logo image as well action of the surrounding link
Accessible attribute Description
aria-label="Main Navigation" Labels the Navigation Bar component as the main navigation on the page, to differentiate it from other potential <nav> landmarks
Accessible attribute Description
aria-expanded="true" Boolean value that indicates the expanded state of the Navigation Bar menu when collapsed on small screens. False when closed, true when opened
aria-haspopup-"true" Indicates that the toggle button opens a menu
aria-controls="slb-navbar-collapse" Indicates that the toggle button controls the state of the Navbar collapse element
aria-label="Toggle navigation" Provides a label for the button that can be read by assistive technology

Modifier selectors

Class Description
slb-navbar-word-wrap allows any item with a longer title to wrap before triggering the mobile navigation.

Bootstrap Classes

Bootstrap Navbar Toggle

Class Description
collapsed The framework makes use of the .collapsed class to apply a different style to the toggle icon, depending on the opened or closed state of the Navigation Bar
Markup: navigation-bar\navbar.hbs Copy 
<header id="site-header" class="slb-header" aria-label="Site Header">
    <nav id="navigation" class="slb-navbar" aria-label="Main Navigation">
        <button class="slb-navbar__toggle collapsed" aria-expanded="false" aria-haspopup="true" aria-controls="slb-navbar-collapse" aria-label="Toggle navigation" data-toggle="collapse" data-target="#slb-navbar-collapse">
            <span class="slb-navbar__toggle-icon">
                <span class="slb-navbar__toggle-icon-bar"></span>
                <span class="slb-navbar__toggle-icon-bar"></span>
                <span class="slb-navbar__toggle-icon-bar"></span>
                <span class="slb-navbar__toggle-icon-bar"></span>
            </span>
        </button>
        <a class="slb-navbar__brand" href="#" aria-label="Homepage">
            <svg class="slb-navbar__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>
        </a>

        <div id="slb-navbar-collapse" class="slb-navbar__collapse collapse ml-auto">
            <ul id="slb-navbar-nav" class="slb-navbar__nav">
                <li class="slb-navbar__nav-item">
                    <a class="slb-navbar__dropdown-button collapsed" href="#" role="button" aria-haspopup="true" aria-expanded="false" data-toggle="collapse" data-target="#nav-dropdown-1"><span class="slb-navbar-word-wrap"><span>Pensions &&#8239;</span><span>Retirement</span></span>
                        <svg viewBox="0 0 448 512" class="slb-navbar__dropdown-button-icon">
                            <path d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z" /></svg>
                    </a>
                    <div id="nav-dropdown-1" class="slb-navbar__dropdown collapse" data-parent="#slb-navbar-nav">
                        <div class="slb-navbar__dropdown-section">
                            <a class="slb-navbar__dropdown-link slb-text-decoration-underline-hover" href="#">Pensions &amp; Retirement<span class="slb-colour-blue-alt">&nbsp;&gt;</span></a>
                            <a class="slb-navbar__dropdown-link slb-text-decoration-underline-hover" href="#">Pension Basics</a>
                            <a class="slb-navbar__dropdown-link slb-text-decoration-underline-hover" href="#">Saving for retirement</a>
                            <a class="slb-navbar__dropdown-link slb-text-decoration-underline-hover" href="#">Ways to take your money</a>
                            <a class="slb-navbar__dropdown-link slb-text-decoration-underline-hover" href="#">Managing your money in retirement</a>
                            <a class="slb-navbar__dropdown-link slb-text-decoration-underline-hover" href="#">Financial advice</a>
                        </div>
                    </div>
                </li>
                <li class="slb-navbar__nav-item">
                    <a class="slb-navbar__dropdown-button collapsed" href="#" role="button" aria-haspopup="true" aria-expanded="false" data-toggle="collapse" data-target="#nav-dropdown-2">ISAs
                        <svg viewBox="0 0 448 512" class="slb-navbar__dropdown-button-icon">
                            <path d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z" /></svg>
                    </a>
                    <div id="nav-dropdown-2" class="slb-navbar__dropdown collapse" data-parent="#slb-navbar-nav">
                        <div class="slb-navbar__dropdown-section">
                            <a class="slb-navbar__dropdown-link slb-text-decoration-underline-hover" href="#">ISA products<span class="slb-colour-blue-alt">&nbsp;&gt;</span></a>
                            <a class="slb-navbar__dropdown-link slb-text-decoration-underline-hover" href="#">Easy ISA</a>
                            <a class="slb-navbar__dropdown-link slb-text-decoration-underline-hover" href="#">DIY ISA</a>
                            <a class="slb-navbar__dropdown-link slb-text-decoration-underline-hover" href="#">Junior ISA</a>
                            <a class="slb-navbar__dropdown-link slb-navbar__dropdown-link--promo d-inline-flex align-items-center" href="#">
                            <svg viewBox="0 0 448 512" class="slb-navbar__promo-icon" id="calculatorHomepageOne"><title>calculator</title><path d="M0 464V48C0 21.49 21.49 0 48 0h352c26.51 0 48 21.49 48 48v416c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48zm384-284V76c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v104c0 6.627 5.373 12 12 12h296c6.627 0 12-5.373 12-12zM128 308v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm256 128V268c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v168c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-256 0v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm128-128v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm0 128v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12z"/></svg>ISA calculator</a>
                        </div>
                    </div>
                </li>
                <li class="slb-navbar__nav-item">
                    <a class="slb-navbar__dropdown-button collapsed" href="#" role="button" aria-haspopup="true" aria-expanded="false" data-toggle="collapse" data-target="#nav-dropdown-3">Investments
                        <svg viewBox="0 0 448 512" class="slb-navbar__dropdown-button-icon">
                            <path d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z" /></svg>
                    </a>
                    <div id="nav-dropdown-3" class="slb-navbar__dropdown collapse" data-parent="#slb-navbar-nav">
                        <div class="slb-navbar__dropdown-section">
                            <a class="slb-navbar__dropdown-link slb-text-decoration-underline-hover" href="#">Getting started with investments<span class="slb-colour-blue-alt">&nbsp;&gt;</span></a>
                            <a class="slb-navbar__dropdown-link slb-text-decoration-underline-hover" href="#">MyFolio managed funds</a>
                            <a class="slb-navbar__dropdown-link slb-text-decoration-underline-hover" href="#">Standard Life Active Retirement</a>
                            <a class="slb-navbar__dropdown-link slb-text-decoration-underline-hover" href="#">Do-it-yourself investments</a>
                            <a class="slb-navbar__dropdown-link slb-navbar__dropdown-link--promo d-inline-flex align-items-center" href="#">
                            <svg viewBox="0 0 448 512" class="slb-navbar__promo-icon" id="calculatorHomepageTwo"><title>calculator</title><path d="M0 464V48C0 21.49 21.49 0 48 0h352c26.51 0 48 21.49 48 48v416c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48zm384-284V76c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v104c0 6.627 5.373 12 12 12h296c6.627 0 12-5.373 12-12zM128 308v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm256 128V268c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v168c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-256 0v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm128-128v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm0 128v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12z"/></svg>Check specific funds</a>
                        </div>
                    </div>
                </li>
                <li class="slb-navbar__nav-item">
                    <a class="slb-navbar__dropdown-button collapsed" href="#" role="button" aria-haspopup="true" aria-expanded="false" data-toggle="collapse" data-target="#nav-dropdown-equity-release"><span class="slb-navbar-word-wrap"><span>Equity&#8239;</span><span>Release</span></span>
                        <svg viewBox="0 0 448 512" class="slb-navbar__dropdown-button-icon"><path d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z" /></svg></a>
                    <div id="nav-dropdown-equity-release" class="slb-navbar__dropdown collapse" data-parent="#slb-navbar-nav">
                        <div class="slb-navbar__dropdown-section">
                            <a class="slb-navbar__dropdown-link slb-text-decoration-underline-hover" href="#">Equity Release<span class="slb-colour-blue-alt">&nbsp;&gt;</span></a>
                            <a class="slb-navbar__dropdown-link slb-text-decoration-underline-hover" href="#">What is Equity Release?</a>
                            <a class="slb-navbar__dropdown-link slb-text-decoration-underline-hover" href="#">How does Equity Release work?</a>
                            <a class="slb-navbar__dropdown-link slb-text-decoration-underline-hover" href="#">Home Reversion plan</a>
                            <a class="slb-navbar__dropdown-link slb-text-decoration-underline-hover" href="#">Lifetime mortgages</a>
                            <a class="slb-navbar__dropdown-link slb-navbar__dropdown-link--promo d-inline-flex align-items-center" href="#">
                            <svg viewBox="0 0 448 512" class="slb-navbar__promo-icon" id="calculatorHomepageThree"><title>calculator</title><path d="M0 464V48C0 21.49 21.49 0 48 0h352c26.51 0 48 21.49 48 48v416c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48zm384-284V76c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v104c0 6.627 5.373 12 12 12h296c6.627 0 12-5.373 12-12zM128 308v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm256 128V268c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v168c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-256 0v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm128-128v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm0 128v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12z"/></svg>Equity release calculator</a>
                        </div>
                    </div>
                </li>
                <li class="slb-navbar__nav-item slb-navbar__nav-item--search">
                    <span class="sr-only">Search</span>
                    <a id="modal-one-button" class="slb-navbar__nav-link slb-navbar__nav-link--icon-only" data-toggle="modal" data-target="#modal-one" href="#" aria-label="Search Standard Life">
                        <svg class="slb-navbar__nav-icon slb-navbar__nav-icon--search" viewBox="0 0 512 512">
                            <path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z" />
                        </svg>
                    </a>
                </li>
                <li class="slb-navbar__nav-item slb-navbar__nav-item--register slb-navbar__nav-item--pale">
                    <a class="slb-navbar__nav-link" href="#" target="_self">Register
                    </a>
                </li>
            </ul>
        </div>
        <div class="slb-navbar__nav-item slb-navbar__nav-item--sticky slb-navbar__nav-item--dark">
            <a class="slb-navbar__nav-link" href="#" target="_self">Login
                <svg class="slb-navbar__nav-icon slb-navbar__nav-icon--inline slb-navbar__nav-icon--lg-only" viewBox="0 0 512 512">
                    <path d="M416 448h-84c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h84c17.7 0 32-14.3 32-32V160c0-17.7-14.3-32-32-32h-84c-6.6 0-12-5.4-12-12V76c0-6.6 5.4-12 12-12h84c53 0 96 43 96 96v192c0 53-43 96-96 96zm-47-201L201 79c-15-15-41-4.5-41 17v96H24c-13.3 0-24 10.7-24 24v96c0 13.3 10.7 24 24 24h136v96c0 21.5 26 32 41 17l168-168c9.3-9.4 9.3-24.6 0-34z" />
                </svg>
            </a>
        </div>
    </nav>
</header>
Source: components/_navigation-bar.scss