The React documentation for this component can be read from Storybook (link here)
Header
Use to easily explore and switch between top-level pages in a single interaction.
Description
Header containing 3 levels of navigation and an overlay that holds additional navigation links.
1) .header__upper - contains the geo locator, contact number (and opening times in some regions), and sign in link on larger screens. On smaller screens this section contains the logo, call us icon and copy and a sign in link.
2) .header__primary - contains the logo on larger screen sizes (the logo is removed on smaller screens), a primary nav bar that has horizontal scrolling enabled and a menu icon, which opens the header overlay on click. The content in the overlay is contained within the header-overlay__window.
3) .header__secondary - contains the current page title, as well as a secondary nav bar that has horizontal scrolling enabled
Class modifiers
is-current- state class used to indicate the current page the user is on.header__nav-link--is-cta- use on links that are call to actions e.g. check your eligibility.header__border- optional class and is only needed when the secondary nav in it's default form (not required on the inverse version of the secondary nav).header-overlay__window--extended- allows more than 4 columns to be accommodated inside the main area of the overlay.
Dependencies
This component requires the transitionsSupported module to be included:
import transitionsSupported from radius/dist/m2dm/js/transitions-supported;
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;Import JS functionality
In order to have the JS functionality of this component available, you need to include it in your project. Assuming the project is using ES6:
import header from 'radius/dist/m2dm/js/header';
header();Link to Abstract/Sketch file
Download Sketch / Abstract fileSubcategories
Usage
Code 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-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>