Standard secondary navigation
Description
The secondary navigation is optional and contains the current page title, as well as a secondary navigation bar that has horizontal scrolling enabled, so ensure all navigation can be accessed on smaller screens
There are 2 variants of the secondary nav:
1) default/standard for use on neutral/light grey background (see example below) - which sits within the normal flow of the page (visible in default header example below)
2) an inverse state for use on a dark background or image see example.
Activate Sass component
In order to have the styling of this component available, you need to include it in your project. After including the
Radius library in your main
./index.scss file, add this snippet:
@include radius-component-header-overlay;Usage
Usage example
<header class="header" data-js-header role="banner">
<div class="header__upper">
<div class="header__inner">
<div class="header__navbar">
<a href="/" class="header__logo header__logo--compact">
<img src="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/logos/funding-circle.svg" alt="Funding Circle home page">
</a>
<ul class="header__nav header__nav--controls">
<li class="header__nav-item header__nav-item--comfortable">
<div class="dropdown dropdown--with-icons" data-js-toggle>
<div tabindex="0" class="dropdown__selected-option" data-js-toggle-switch>
<img class="dropdown__icon" src="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/flags/uk-flag.svg" alt="">
<span class="dropdown__selected-item">United Kingdom</span>
<svg class="icon icon--small" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>Arrow down</title><path d="M8 11.487L9.487 10 14 5.487 12.514 4 8 8.513 3.487 4 2 5.487 6.514 10" fill-rule="nonzero" /></svg>
</div>
<ul class="dropdown__menu">
<li>
<a class="dropdown__menu-item" href="/ca/">
<img class="dropdown__icon" src="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/flags/ca-flag.svg" alt="">
<span>Canada</span>
</a>
</li>
<li>
<a class="dropdown__menu-item" href="/de/">
<img class="dropdown__icon" src="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/flags/de-flag.svg" alt="">
<span>Germany</span>
</a>
</li>
<li>
<a class="dropdown__menu-item" href="/nl/">
<img class="dropdown__icon" src="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/flags/nl-flag.svg" alt="">
<span>The Netherlands</span>
</a>
</li>
<li>
<a class="dropdown__menu-item" href="/uk/">
<img class="dropdown__icon" src="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/flags/uk-flag.svg" alt="">
<span>United Kingdom</span>
</a>
</li>
<li>
<a class="dropdown__menu-item" href="/us/">
<img class="dropdown__icon" src="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/flags/us-flag.svg" alt="">
<span>United States</span>
</a>
</li>
</ul>
</div>
</li>
<li class="header__nav-item header__nav-item--comfortable">
<svg class="icon icon--small" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>phone icon</title><path d="M5.15 9.73C3.994 8.476 3.11 7.066 2.566 5.47c-.223-.652-.383-1.315-.44-1.992-.062-.708.153-1.31.57-1.833.397-.5.92-.836 1.504-1.09.18-.08.38-.09.58-.063.122.016.208.07.273.188.514.92 1.036 1.838 1.55 2.76.15.265.134.466-.077.656-.227.206-.478.384-.717.577-.207.166-.413.332-.613.505-.125.11-.162.252-.122.43.095.424.294.807.53 1.173.45.698 1.01 1.304 1.615 1.87.516.483 1.042.956 1.575 1.42.245.213.51.4.776.586.237.165.387.162.576-.025.235-.232.445-.49.67-.733.138-.148.274-.298.426-.43.233-.207.428-.21.71-.027.22.143.44.29.657.44.644.444 1.285.893 1.93 1.336.11.073.15.164.153.28.005.21-.054.4-.132.583-.63 1.464-2.307 2.075-3.793 1.62-.927-.284-1.782-.727-2.593-1.28-.927-.628-1.77-1.363-2.552-2.17-.163-.167-.315-.347-.472-.52" fill-rule="evenodd"/></svg>
<span>0800 048 2467</span>
</li>
<li class="header__nav-item header__nav-item--compact">
<a class="header__nav-link" href="tel:0800 048 2467">
<svg class="icon icon--small" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>phone icon</title><path d="M5.15 9.73C3.994 8.476 3.11 7.066 2.566 5.47c-.223-.652-.383-1.315-.44-1.992-.062-.708.153-1.31.57-1.833.397-.5.92-.836 1.504-1.09.18-.08.38-.09.58-.063.122.016.208.07.273.188.514.92 1.036 1.838 1.55 2.76.15.265.134.466-.077.656-.227.206-.478.384-.717.577-.207.166-.413.332-.613.505-.125.11-.162.252-.122.43.095.424.294.807.53 1.173.45.698 1.01 1.304 1.615 1.87.516.483 1.042.956 1.575 1.42.245.213.51.4.776.586.237.165.387.162.576-.025.235-.232.445-.49.67-.733.138-.148.274-.298.426-.43.233-.207.428-.21.71-.027.22.143.44.29.657.44.644.444 1.285.893 1.93 1.336.11.073.15.164.153.28.005.21-.054.4-.132.583-.63 1.464-2.307 2.075-3.793 1.62-.927-.284-1.782-.727-2.593-1.28-.927-.628-1.77-1.363-2.552-2.17-.163-.167-.315-.347-.472-.52" fill-rule="evenodd"/></svg>
<span>Call us</span>
</a>
</li>
<li class="header__nav-item">
<a class="header__nav-link" href="/login">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon--small" width="16" height="16" viewBox="0 0 16 16"><title>padlock icon</title><path d="M10.039212 7.71995276L10.039212 7.60792276C10.039212 6.94307395 10.0394223 6.27822513 10.03917 5.61337632 10.0387495 4.54966405 9.07553904 3.71222641 7.90492022 3.75751188 6.82524487 3.79928449 5.96121869 4.61591219 5.96088233 5.59523922 5.96067211 6.26963388 5.96084029 6.94406671 5.96084029 7.61846137L5.96084029 7.71995276 10.039212 7.71995276ZM4.14226489 7.72201466L4.14226489 7.5830272C4.14226489 6.92123306 4.14247512 6.25943892 4.1421808 5.59760659 4.14201262 5.11634342 4.21445628 4.64607705 4.42367254 4.20082079 4.96542326 3.04772125 5.90794759 2.31475331 7.26314427 2.07373989 8.5795754 1.83959947 9.74451815 2.16553271 10.7065514 3.01602905 11.4458719 3.66961377 11.8299116 4.4808958 11.8483273 5.4215049 11.8624544 6.14347603 11.8554329 6.86579081 11.8577874 7.58795285 11.8579136 7.62857996 11.8577874 7.66924525 11.8577874 7.72201466 12.0315597 7.72201466 12.195115 7.72201466 12.3587124 7.72205284 12.7649098 7.72212921 12.9998156 7.93370326 12.9998577 8.30072179 13.0000258 10.009313 13.0000679 11.7179423 12.9998577 13.4265335 12.9998156 13.7880919 12.7644473 13.9999714 12.3644726 13.9999714 9.45301968 14.0000095 6.54156679 14.0000095 3.6301139 13.9999714 3.23787544 13.9999714 3.00040489 13.7865263 3.0003208 13.4311155 2.9998583 11.719317 2.99994239 10.0075184 3.00027876 8.29571977 3.0003208 7.93481057 3.23703454 7.72216739 3.63621043 7.72205284 3.80010211 7.72197648 3.9639938 7.72201466 4.14226489 7.72201466L4.14226489 7.72201466Z"/></svg>
<span>Sign in</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="header__primary header__border">
<div class="header__inner">
<div class="header__navbar">
<a href="/" class="header__logo header__logo--comfortable">
<img src="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/logos/funding-circle.svg" alt="Funding Circle home page">
</a>
<div class="header__nav">
<nav class="header__nav--scrollable u-valign-center" role="navigation">
<a class="header__nav-link" href="">Get a business loan</a>
<a class="header__nav-link" href="">Invest your money</a>
<a class="header__nav-link" href="">About us</a>
<a class="header__nav-link is-current" href="">How it works</a>
</nav>
<div class="header__menu-icon">
<button type="button" class="header__nav-link u-valign-center" data-js-overlay-open>
<svg class="icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>menu icon</title><g fill-rule="nonzero"><path d="M13 3H3v2h10"/><path d="M13 7H3v2h10"/><path d="M13 11H3v2h10"/></g></svg>
<span>More</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="header__secondary ">
<div class="header__inner">
<div class="header__navbar header__navbar--secondary">
<span class="header__page-title">Businesses loans</span>
<nav class="header__nav header__nav--scrollable" role="navigation">
<a class="header__nav-link" href="">Loan calculator</a>
<a class="header__nav-link" href="">Rates and fees</a>
<a class="header__nav-link" href="">How borrowing works</a>
<a class="header__nav-link is-current" href="">Types of loans</a>
<a class="header__nav-link header__nav-link--is-cta" href="">Get a quote</a>
</nav>
</div>
</div>
</div>
<div class="header-overlay" data-js-header-overlay aria-hidden="true">
<div class="header-overlay__window">
<div class="header__inner">
<div class="header-overlay__top-row">
<div class="header-overlay__top-row-item header-overlay__top-row-item--logo">
<a href="/uk/" class="header__logo">
<img src="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/logos/funding-circle.svg" alt="Funding Circle home page">
</a>
</div>
<div class="header-overlay__top-row-item header-overlay__top-row-item--geo">
<div class="dropdown dropdown--with-icons" data-js-toggle>
<div tabindex="0" class="dropdown__selected-option" data-js-toggle-switch>
<img class="dropdown__icon" src="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/flags/uk-flag.svg" alt="">
<span class="dropdown__selected-item">United Kingdom</span>
<svg class="icon icon--small" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>Arrow down</title><path d="M8 11.487L9.487 10 14 5.487 12.514 4 8 8.513 3.487 4 2 5.487 6.514 10" fill-rule="nonzero" /></svg>
</div>
<ul class="dropdown__menu">
<li>
<a class="dropdown__menu-item" href="/ca/">
<img class="dropdown__icon" src="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/flags/ca-flag.svg" alt="">
<span>Canada</span>
</a>
</li>
<li>
<a class="dropdown__menu-item" href="/de/">
<img class="dropdown__icon" src="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/flags/de-flag.svg" alt="">
<span>Germany</span>
</a>
</li>
<li>
<a class="dropdown__menu-item" href="/nl/">
<img class="dropdown__icon" src="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/flags/nl-flag.svg" alt="">
<span>The Netherlands</span>
</a>
</li>
<li>
<a class="dropdown__menu-item" href="/uk/">
<img class="dropdown__icon" src="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/flags/uk-flag.svg" alt="">
<span>United Kingdom</span>
</a>
</li>
<li>
<a class="dropdown__menu-item" href="/us/">
<img class="dropdown__icon" src="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/flags/us-flag.svg" alt="">
<span>United States</span>
</a>
</li>
</ul>
</div>
</div>
<div class="header-overlay__top-row-item u-text-right">
<button class="header__close-btn" type="button" data-js-overlay-close data-js-header-btn aria-label="Close this window">Less</button>
</div>
</div>
<div class="header-overlay__row">
<nav class="header-overlay__lists header-overlay__lists--main" role="navigation">
<div>
<a class="cta-link header-overlay__context-link" href="/uk/businesses/">Get a business loan</a>
<p class="header-overlay__context-details">Take your next step with fast, affordable business finance.</p>
<a class="cta-secondary cta--minor header-overlay__context-cta" href="/borrower/loan/apply">Get your instant quote</a>
</div>
<div>
<a class="cta-link header-overlay__context-link" href="/uk/investors/">Invest your money</a>
<p class="header-overlay__context-details">Earn for your future by lending to British businesses.</p>
<a class="cta-secondary cta--minor header-overlay__context-cta" href="#">Open your account</a>
</div>
<div>
<a class="cta-link header-overlay__context-link" href="/uk/about-us/">About us</a>
<p class="header-overlay__context-details">Find out how we’re building a better financial world.</p>
<ul class="header-overlay__list">
<li>
<a class="cta-link" href="/uk/how-it-works/">How it works</a>
</li>
<li>
<a class="cta-link" href="https://careers.fundingcircle.com">Careers</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="header-overlay__row">
<nav class="header-overlay__lists header-overlay__footer-lists" role="navigation">
<div>
<ul class="header-overlay__list">
<li><a class="header-overlay__list-link header-overlay__list-link--bold" href="#">Funding Circle</a></li>
<li><a class="header-overlay__list-link" href="#">About us</a></li>
<li><a class="header-overlay__list-link" href="#">How it works</a></li>
<li><a class="header-overlay__list-link" href="#">Statistics</a></li>
<li><a class="header-overlay__list-link" href="#">Media</a></li>
</ul>
</div>
<div>
<ul class="header-overlay__list">
<li><a class="header-overlay__list-link header-overlay__list-link--bold" href="#">Discover more</a></li>
<li><a class="header-overlay__list-link" href="#">Institutional investors</a></li>
<li><a class="header-overlay__list-link" href="#">Introducers</a></li>
<li><a class="header-overlay__list-link" href="#">Blog</a></li>
<li><a class="header-overlay__list-link" href="#">Careers</a></li>
</ul>
</div>
<div>
<ul class="header-overlay__list">
<li><a class="header-overlay__list-link header-overlay__list-link--bold" href="#">Support</a></li>
<li><a class="header-overlay__list-link" href="#">Help</a></li>
<li><a class="header-overlay__list-link" href="#">Contact us</a></li>
<li><a class="header-overlay__list-link" href="#">Investor guide</a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
</header>