Overview
This component is to be deprecated and merged with the header component
This is the navigation integrated in the payment micro-site header (myobpayby.com).
Examples
Default variation
<header class="header-payments wrapper p0--x" data-swiftype-index="false" data-myob-navigation-payments>
<div class="full--h p2--x relative flex items--center justify--space-b">
<a href="#" title="MYOB Home" class="brand brand--site block">
<svg id="logo" class="brand__logo brand__logo--site block overflow-i--visible" preserveAspectRatio="xMidYMin slice" data-name="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 283.5 116.4" aria-label="MYOB Home">
<title>MYOB</title>
<defs>
<linearGradient id="logo-gradient" gradientUnits="userSpaceOnUse" x1="0" y1="58.2083" x2="283.4646" y2="58.2083">
<stop offset="0.36" stop-color="#6100A5"></stop>
<stop offset="0.4557" stop-color="#7001A0"></stop>
<stop offset="0.6409" stop-color="#980293"></stop>
<stop offset="0.8947" stop-color="#D9057E"></stop>
<stop offset="0.97" stop-color="#ED0677"></stop>
</linearGradient>
</defs>
<g fill="url(#logo-gradient)">
<path d="M46.8,34.2 c-4.4-5.3-11.1-8.6-19.4-8.6C10.8,25.5,0,37.3,0,52.7V88h5.1c3.5-0.2,10.3-1.9,10.5-12V52.4c0-6.9,4.8-11.6,11.8-11.6 c10.3,0,11.4,8.2,11.4,11.6V88h5.1c3.4-0.2,10.2-1.9,10.5-11.9V52.4c0-6.9,5-11.6,11.8-11.6c10.3,0,11.5,8.2,11.5,11.6V88h5.1 c3.5-0.2,10.4-1.9,10.5-12.2V52.7c0-16-10.1-27.2-27.1-27.2C58.3,25.5,51.4,28.9,46.8,34.2"></path>
<path d="M138.3,33.8l-13.1,36.4l-14.3-37.7c-2.2-6-7.8-5.6-7.8-5.6H90.9l24.2,59.2c0-0.1,0-0.1-0.1-0.2 c0,0,0,0.1,0.1,0.2c0,0.1,0.1,0.2,0.1,0.2l-0.1-0.3c0.8,2.4,0.6,3.7-0.2,6.1l-0.5,1.5c-2.8,7-6.8,8.9-15.2,8.4v0.1l5.8,14.3 c10.8-0.2,19-3.8,24.4-17.3l29.1-72.2l0,0l-10.9,0c0,0,0,0,0,0C147.1,26.9,140.9,27.1,138.3,33.8"></path>
<path d="M170.1,57.7 c0-10.5,6.7-17.9,15-17.9c8.3,0,15,7.3,15,17.9c0,10.3-6.7,17.4-15,17.4C176.8,75.1,170.1,68,170.1,57.7 M154.5,57.6 c0,18.2,13.7,31.8,30.6,31.8c16.9,0,30.7-13.6,30.7-31.8c0-18.2-13.8-32-30.7-32C168.2,25.5,154.5,39.4,154.5,57.6"></path>
<path d="M236.6,57.7c0-9.7,7-17.5,15.6-17.5 c8.6,0,15.6,7.6,15.6,17.5c0,9.7-7,17.1-15.6,17.1C243.6,74.9,236.6,67.2,236.6,57.7 M233.4,0L233.4,0 c-10.6,0-12.3,7.2-12.5,10.6V88l7.5,0c6,0.1,7.4-3.7,7.5-5.9v-0.3v-0.3c4.7,5,11.2,7.8,18.6,7.8c16,0,29-13.7,29-31.7 c0-18.1-13-31.8-29-31.8c-7,0-13.2,2.6-17.9,7.1V0H233.4z"></path>
</g>
</svg>
</a>
<div class="full--h">
<button type="button" class="trigger" data-hamburger-trigger="menu">
<span class="trigger__line"></span>
</button>
</div>
<div class="navigation-payments" data-hamburger-content="menu" id="menu">
<nav class="navigation-payments__primary" role="navigation">
<button class="navigation-payments__link navigation-payments__link--primary" data-navigation-trigger="why-payby" aria-haspopup="true" aria-controls="why-payby" aria-expanded="false">
<div class="navigation-payments__title">Why MYOB PayBy?</div>
<svg role="img" class="icon icon-chevron-r icon--xs hide-for-xlarge">
<title>Toggle Menu</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#chevron-r" />
</svg>
</button>
<div class="navigation-payments__dropdown">
<div class="navigation-payments__panel" data-navigation-content="why-payby" id="why-payby" role="menuitem">
<div class="navigation-payments__right-pane">
<div class="navigation-payments__link-group">
<nav class="navigation-payments__secondary">
<a href="/content/payment-microsite/why-payby/our-story.html" class="navigation-payments__link navigation-payments__link--secondary" role="menuitem">
<div class="icon icon--sm">
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>1-circle-fill</title>
<path d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12zm-.648-7.15h1.536V6h-1.142C11.535 7.032 10.18 7.522 9 7.522v1.2h2.352v8.127z"
fill="#000" fill-rule="evenodd" />
</svg>
</div>
<div>
<div class="navigation-payments__title">Our story</div>
</div>
</a>
<a href="/content/payment-microsite/why-payby/customer-stories.html" class="navigation-payments__link navigation-payments__link--secondary" role="menuitem">
<div class="icon icon--sm">
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>2-circle-line</title>
<path d="M0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12zm23 0c0-6.075-4.925-11-11-11S1 5.925 1 12s4.925 11 11 11 11-4.925 11-11zm-7.9 3.577h-5.098c.85-2.247 4.925-3.13 4.925-6.365C14.927 7.219 13.381 6 11.4 6c-1.464 0-2.645.662-3.332 1.623l.941.878c.528-.638 1.383-1.094 2.357-1.094 1.248 0 2.03.744 2.03 1.814 0 2.477-4.214 3.442-5.395 6.658v1.076h7.1v-1.378z"
fill="#000" fill-rule="evenodd" />
</svg>
</div>
<div>
<div class="navigation-payments__title">Customer stories</div>
</div>
</a>
</nav>
</div>
</div>
</div>
</div>
<button class="navigation-payments__link navigation-payments__link--primary" data-navigation-trigger="solutions" aria-haspopup="true" aria-controls="solutions" aria-expanded="false">
<div class="navigation-payments__title">Solutions</div>
<svg role="img" class="icon icon-chevron-r icon--xs hide-for-xlarge">
<title>Toggle Menu</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#chevron-r" />
</svg>
</button>
<div class="navigation-payments__dropdown">
<div class="navigation-payments__panel" data-navigation-content="solutions" id="solutions">
<div class="navigation-payments__left-pane">
<h6 class="navigation-payments__heading">All-in-one</h6>
<div class="navigation-payments__special">
<h3 class="fg-light">Invoice Bundle</h3>
<p>Multiple payment solutions in one place</p>
<p>Includes:</p>
<ul class="navigation-payments__special-list">
<li>
<div class="icon icon--xs fg-light m1--r">
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>1-circle-fill</title>
<path d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12zm-.648-7.15h1.536V6h-1.142C11.535 7.032 10.18 7.522 9 7.522v1.2h2.352v8.127z"
fill="#000" fill-rule="evenodd" />
</svg>
</div>
Gateway Services
</li>
<li>
<div class="icon icon--xs fg-light m1--r">
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>2-circle-line</title>
<path d="M0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12zm23 0c0-6.075-4.925-11-11-11S1 5.925 1 12s4.925 11 11 11 11-4.925 11-11zm-7.9 3.577h-5.098c.85-2.247 4.925-3.13 4.925-6.365C14.927 7.219 13.381 6 11.4 6c-1.464 0-2.645.662-3.332 1.623l.941.878c.528-.638 1.383-1.094 2.357-1.094 1.248 0 2.03.744 2.03 1.814 0 2.477-4.214 3.442-5.395 6.658v1.076h7.1v-1.378z"
fill="#000" fill-rule="evenodd" />
</svg>
</div>
Merchant Services
</li>
<li>
<div class="icon icon--xs fg-light m1--r">
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>3-circle-fill</title>
<path d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12zm-4-8.308c.931.965 2.131 1.421 3.37 1.421 1.959 0 3.85-1.147 3.85-3.183 0-1.373-.864-2.357-2.079-2.726 1.032-.442 1.685-1.244 1.685-2.386C14.826 7.085 13.314 6 11.404 6c-1.301 0-2.324.504-3.015 1.128L9.17 8.17c.653-.47 1.239-.75 2.079-.75 1.042 0 2.007.428 2.007 1.551 0 .917-.639 1.378-1.431 1.532-.523.1-1.229.105-1.608.105v1.277c.835.01 1.22.015 1.608.087 1.013.187 1.853.797 1.853 1.838 0 1.273-1.243 1.901-2.352 1.901-.927 0-1.81-.441-2.434-.993L8 15.692z"
fill="#000" fill-rule="evenodd" />
</svg>
</div>
Fraud Management
</li>
</ul>
<a href="/content/payment-microsite/contact-us.html" class="navigation-payments__special-link link--light" aria-label="Contact Sales">Contact Sales </a>
</div>
</div>
<div class="navigation-payments__right-pane">
<div class="navigation-payments__link-group">
<h6 class="navigation-payments__heading">Individual</h6>
<nav class="navigation-payments__secondary">
<a href="/content/payment-microsite/solutions/gateway-services.html" class="navigation-payments__link navigation-payments__link--secondary" role="menuitem">
<div class="icon icon--sm icon--fg-regal">
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>1-circle-fill</title>
<path d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12zm-.648-7.15h1.536V6h-1.142C11.535 7.032 10.18 7.522 9 7.522v1.2h2.352v8.127z"
fill="#000" fill-rule="evenodd" />
</svg>
</div>
<div>
<div class="navigation-payments__title">Gateway Services</div>
<div class="navigation-payments__description">Customised online payment experiences</div>
</div>
</a>
<a href="/content/payment-microsite/solutions/merchant-services.html" class="navigation-payments__link navigation-payments__link--secondary" role="menuitem">
<div class="icon icon--sm icon--fg-dusk">
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>2-circle-line</title>
<path d="M0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12zm23 0c0-6.075-4.925-11-11-11S1 5.925 1 12s4.925 11 11 11 11-4.925 11-11zm-7.9 3.577h-5.098c.85-2.247 4.925-3.13 4.925-6.365C14.927 7.219 13.381 6 11.4 6c-1.464 0-2.645.662-3.332 1.623l.941.878c.528-.638 1.383-1.094 2.357-1.094 1.248 0 2.03.744 2.03 1.814 0 2.477-4.214 3.442-5.395 6.658v1.076h7.1v-1.378z"
fill="#000" fill-rule="evenodd" />
</svg>
</div>
<div>
<div class="navigation-payments__title">Merchant Services</div>
<div class="navigation-payments__description">Accept every way your customers want to pay</div>
</div>
</a>
<a href="/content/payment-microsite/solutions/fraud-management.html" class="navigation-payments__link navigation-payments__link--secondary" role="menuitem">
<div class="icon icon--sm icon--fg-rouge">
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>3-circle-fill</title>
<path d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12zm-4-8.308c.931.965 2.131 1.421 3.37 1.421 1.959 0 3.85-1.147 3.85-3.183 0-1.373-.864-2.357-2.079-2.726 1.032-.442 1.685-1.244 1.685-2.386C14.826 7.085 13.314 6 11.404 6c-1.301 0-2.324.504-3.015 1.128L9.17 8.17c.653-.47 1.239-.75 2.079-.75 1.042 0 2.007.428 2.007 1.551 0 .917-.639 1.378-1.431 1.532-.523.1-1.229.105-1.608.105v1.277c.835.01 1.22.015 1.608.087 1.013.187 1.853.797 1.853 1.838 0 1.273-1.243 1.901-2.352 1.901-.927 0-1.81-.441-2.434-.993L8 15.692z"
fill="#000" fill-rule="evenodd" />
</svg>
</div>
<div>
<div class="navigation-payments__title">Fraud management</div>
<div class="navigation-payments__description">Keeping you and your customer data safe</div>
</div>
</a>
<a href="/content/payment-microsite/solutions/phone-payments.html" class="navigation-payments__link navigation-payments__link--secondary" role="menuitem">
<div class="icon icon--sm icon--fg-candy">
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>4-circle-line</title>
<path d="M14.644 16.85v-2.43h1.598v-1.3h-1.589V6h-1.305L8 13.287v1.133h5.165v2.43h1.479zM0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12zm23 0c0-6.075-4.925-11-11-11S1 5.925 1 12s4.925 11 11 11 11-4.925 11-11zM9.67 13.12l3.495-4.705v4.704H9.671z"
fill="#000" fill-rule="evenodd" />
</svg>
</div>
<div>
<div class="navigation-payments__title">Phone payments</div>
<div class="navigation-payments__description">Accept payments over the phone</div>
</div>
</a>
</nav>
</div>
</div>
</div>
</div>
<a href="/content/payment-microsite/pricing.html" class="navigation-payments__link navigation-payments__link--primary" role="menuitem">
<div class="navigation-payments__title">Pricing</div>
</a>
<button class="navigation-payments__link navigation-payments__link--primary" data-navigation-trigger="resources" aria-haspopup="true" aria-controls="resources" aria-expanded="false">
<div class="navigation-payments__title">Resources</div>
<svg role="img" class="icon icon-chevron-r icon--xs hide-for-xlarge">
<title>Toggle Menu</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#chevron-r" />
</svg>
</button>
<div class="navigation-payments__dropdown">
<div class="navigation-payments__panel" data-navigation-content="resources" id="resources">
<div class="navigation-payments__right-pane">
<div class="navigation-payments__link-group">
<h6 class="navigation-payments__heading">Set-up</h6>
<nav class="navigation-payments__secondary">
<a href="/content/payment-microsite/resources/developer-documentation.html" class="navigation-payments__link navigation-payments__link--secondary" role="menuitem">
<div class="icon icon--sm">
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>1-circle-fill</title>
<path d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12zm-.648-7.15h1.536V6h-1.142C11.535 7.032 10.18 7.522 9 7.522v1.2h2.352v8.127z"
fill="#000" fill-rule="evenodd" />
</svg>
</div>
<div class="navigation-payments__title">Developer Documentation</div>
</a>
<a href="/content/payment-microsite/resources/blog.html" class="navigation-payments__link navigation-payments__link--secondary" role="menuitem">
<div class="icon icon--sm">
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>2-circle-line</title>
<path d="M0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12zm23 0c0-6.075-4.925-11-11-11S1 5.925 1 12s4.925 11 11 11 11-4.925 11-11zm-7.9 3.577h-5.098c.85-2.247 4.925-3.13 4.925-6.365C14.927 7.219 13.381 6 11.4 6c-1.464 0-2.645.662-3.332 1.623l.941.878c.528-.638 1.383-1.094 2.357-1.094 1.248 0 2.03.744 2.03 1.814 0 2.477-4.214 3.442-5.395 6.658v1.076h7.1v-1.378z"
fill="#000" fill-rule="evenodd" />
</svg>
</div>
<div>
<div class="navigation-payments__title">Full API Reference</div>
</div>
</a>
</nav>
</div>
<div class="navigation-payments__link-group">
<h6 class="navigation-payments__heading">Learn</h6>
<nav class="navigation-payments__secondary">
<a href="/content/payment-microsite/resources/knowledge-base.html" class="navigation-payments__link navigation-payments__link--secondary" role="menuitem">
<div class="icon icon--sm">
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>1-circle-fill</title>
<path d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12zm-.648-7.15h1.536V6h-1.142C11.535 7.032 10.18 7.522 9 7.522v1.2h2.352v8.127z"
fill="#000" fill-rule="evenodd" />
</svg>
</div>
<div>
<div class="navigation-payments__title">Knowledge Base (Digital Guides)</div>
</div>
</a>
<a href="/content/payment-microsite/resources/blog.html" class="navigation-payments__link navigation-payments__link--secondary" role="menuitem">
<div class="icon icon--sm">
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>2-circle-line</title>
<path d="M0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12zm23 0c0-6.075-4.925-11-11-11S1 5.925 1 12s4.925 11 11 11 11-4.925 11-11zm-7.9 3.577h-5.098c.85-2.247 4.925-3.13 4.925-6.365C14.927 7.219 13.381 6 11.4 6c-1.464 0-2.645.662-3.332 1.623l.941.878c.528-.638 1.383-1.094 2.357-1.094 1.248 0 2.03.744 2.03 1.814 0 2.477-4.214 3.442-5.395 6.658v1.076h7.1v-1.378z"
fill="#000" fill-rule="evenodd" />
</svg>
</div>
<div class="navigation-payments__title">Blog</div>
</a>
</nav>
</div>
</div>
</div>
</div>
<a href="/content/payment-microsite/support.html" class="navigation-payments__link navigation-payments__link--primary" role="menuitem">
<div class="navigation-payments__title">Support</div>
</a>
</nav>
<nav class="navigation-payments__primary navigation-payments__primary--right" role="navigation">
<a href="https://merchants.paycorp.com.au/generic/merchants/" class="navigation-payments__link navigation-payments__link--primary">
<div class="navigation-payments__title">Sign in</div>
</a>
<a href="/content/payment-microsite/contact-us.html" aria-label="Contact Sales" class="btn btn--primary btn--xs show-for-xlarge">Contact Sales </a>
<hr class="m1--x hide-for-xlarge"/>
<a href="/content/payment-microsite/contact-us.html" class="navigation-payments__link navigation-payments__link--primary navigation-payments__link--cta-mobile hide-for-xlarge">Contact Sales </a>
</nav>
</div>
</div>
</header>
Usage guidelines
We're so sorry, there are currently no usage guidelines for this component 😥
If you feel you can help out your fellow designers by creating usage guidelines for this component, please reach out to #cr-marquee on Slack.
Implementation guidelines
We're so sorry, there are currently no implementation guidelines for this component 😥
If you feel you can help out your fellow designers by creating usage guidelines for this component, please reach out to #cr-marquee on Slack.