Standard Life Digital Framework

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

Place the navigation bar at the top of the page outide any fixed width container.

Use the default example below with Bootstrap's Collapse plugin to dynamically open and close the drodpowns.

Alternatively, replace the following classes with the JavaScript support classes to apply your own JavaScript solution.

collapsed - slb-collapsed
collapse - slb-collapse
show - slb-show

NOTE: when using your own JavaScript, make sure to dynamically set the height when applying the slb-show class to transition smoothly up and down. By default the class will display without transition.

Accessible Attributes

Brand Logo

Accessible attribute	Description
`aria-label="Standard Life Home"`	Gives a description to the brand logo image as well action of the surrounding link
`aria-label="Main Navigation"`	Labels the Navigation Bar component as the main navigation on the page, to differentiate it from other potential `<nav>` landmarks
`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.

JavaScript Support

JavaScript Support class name	Description
`slb-collapsed`	Placed on the hamburger button, this class with display the active and inactive effect when adding and removing this class
`slb-collapse`	Placed on the collapsed navigation menu, this class will set the default collapse properties
`slb-show`	Placed on the collapsed navigation menu, this class will show and hide the collapse effect

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 &#038; <!-- &amp; --> Retirement<span class="slb-colour-blue-alt">&#160; <!-- &nbsp; -->&#062; <!-- &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">&#160; <!-- &nbsp; -->&#062; <!-- &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">&#160; <!-- &nbsp; -->&#062; <!-- &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">&#160; <!-- &nbsp; -->&#062; <!-- &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