Default variation
<header class="header-legacy" data-swiftype-index="false" data-myob-navigation-legacy>
<div class="navbar-container">
<nav class="navbar">
<div class="navbar--head">
<button type="button" data-target="#mobile-menu" class="navbar-toggle navbar-toggle--left">
<span class="line-bar line-bar--1"></span>
<span class="line-bar line-bar--2"></span>
<span class="line-bar line-bar--3"></span>
</button>
<div class="navbar--logo">
<a href="#https://www.myob.com/nz" title="MYOB Home" class="navbar--brand">
<svg id="logo" class="logo" data-name="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 283.5 116.4" aria-label="MYOB Home">
<title>MYOB Home</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>
<button type="button" data-target="#mobile-sign-in" class="navbar-toggle navbar-toggle--right">
<span class="show-for-sr">Toggle navigation</span>
<span class="line-bar--right line-bar--1"></span>
<svg role="img" class="line-bar--right icon icon-sign-in icon--md">
<title>Sign In</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#sign-in"></use>
</svg>
<span class="line-bar--right line-bar--3"></span>
</button>
</div>
<div id="navbar-mobile" class="navbar-mobile">
<div id="mobile-menu" class="navbar--left">
<ul class="navbar--nav" data-myob-accordion-menu data-multi-open="false">
<li class="dropdown">
<a href="#" class="dropdown-toggle">
<svg role="img" class="icon icon-chevron-b icon--xxs">
<title>Toggle Menu</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#chevron-b"></use>
</svg>
</a>
<a href="#" class="dropdown__item" role="button">
Dropdown 1
</a>
<ul class="dropdown-menu dropdown--level-2">
<li class="dropdown">
<a href="#" class="dropdown-toggle">
<svg role="img" class="icon icon-chevron-b icon--xxs">
<title>Toggle Menu</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#chevron-b"></use>
</svg>
</a>
<a href="#" class="dropdown__item" role="button">
Sub dropdown 1
</a>
<ul class="dropdown-menu dropdown--level-3">
<li class="dropdown">
<a href="#" class="dropdown__item" role="button">
Link 1
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown__item" role="button">
Link 2
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown__item" role="button">
Link 3
</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle">
<svg role="img" class="icon icon-chevron-b icon--xxs">
<title>Toggle Menu</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#chevron-b"></use>
</svg>
</a>
<a class="dropdown__item" role="button">
Sub dropdown 2
</a>
<ul class="dropdown-menu dropdown--level-3">
<li class="dropdown">
<a href="#" class="dropdown__item" role="button">
Link 1
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown__item" role="button">
Link 2
</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle">
<svg role="img" class="icon icon-chevron-b icon--xxs">
<title>Toggle Menu</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#chevron-b"></use>
</svg>
</a>
<a class="dropdown__item" role="button">
Sub dropdown 3
</a>
<ul class="dropdown-menu dropdown--level-3">
<li class="dropdown">
<a href="#" class="dropdown__item" role="button">
Link 1
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle">
<svg role="img" class="icon icon-chevron-b icon--xxs">
<title>Toggle Menu</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#chevron-b"></use>
</svg>
</a>
<a href="#" class="dropdown__item" role="button">
Dropdown 2
</a>
<ul class="dropdown-menu dropdown--level-2">
<li class="dropdown">
<a href="#" class="dropdown-toggle">
<svg role="img" class="icon icon-chevron-b icon--xxs">
<title>Toggle Menu</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#chevron-b"></use>
</svg>
</a>
<a class="dropdown__item" role="button">
Sub dropdown 1
</a>
<ul class="dropdown-menu dropdown--level-3">
<li class="dropdown">
<a href="#" class="dropdown__item" role="button">
Link 1
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown__item" role="button">
Link 2
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown__item" role="button">
Link 3
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown__item" role="button">
Link 4
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown__item" role="button">
Link 5
</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown__item" role="button">
Link 1
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown__item" role="button">
Link 2
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown__item" role="button">
Link 3
</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown__item" role="button">
Link 1
</a>
</li>
</ul>
<ul class="navbar--nav-mobile show-for-small">
<li>
<a href="#" class="dropdown__item">Ancillary link 1</a>
</li>
<li>
<a href="#" class="dropdown__item">Ancillary link 2</a>
</li>
</ul>
<div data-search-box-placeholder="Search" class="navbar--search navbar--search--mobile show-for-small">
<div class="box-search">
<form action="/nz/search" method="GET" class="mobile">
<button type="submit" value="">
<svg role="img" class="icon icon-search icon--md">
<title>Search</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#search"></use>
</svg>
</button>
<div>
<input name="q" title="Search" type="text" autocomplete="off" spellcheck="false" placeholder="Search"/>
<input name="engineName" type="hidden" value="global"/>
<input name="country" type="hidden" value="New Zealand"/>
</div>
</form>
</div>
</div>
</div>
<div id="mobile-sign-in" class="navbar--right">
<ul class="navbar--nav">
<li class="dropdown">
<a href="#" title="Sign in" class="hide" role="button">
<span class="sign-in-label">Right dropdown</span>
</a>
<ul class="dropdown--level-2">
<li class="show-for-small not-link">
<span class="sign-in-label dropdown__item">Right dropdown</span>
</li>
<li>
<a href="#" class="dropdown__item">
Link 1
</a>
</li>
<li>
<a href="#" class="dropdown__item">
Link 2
</a>
</li>
<li>
<a href="#" class="dropdown__item">
Link 3
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="navbar-desktop" class="navbar-desktop">
<div class="navbar--left">
<ul class="navbar--nav" data-myob-dropdown-menu data-closing-time="150">
<li class="dropdown" data-equalizer="menu-1-0" data-equalize-on="xlarge" data-equalize-on-stack="true">
<a href="#" class="dropdown--toggle" role="button">
Dropdown 1
<svg role="img" class="icon icon-chevron-b icon--xxs">
<title>Toggle Menu</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#chevron-b"></use>
</svg>
</a>
<ul class="dropdown--menu dropdown--level-2" data-equalizer-watch="menu-1-0">
<li class="dropdown" data-equalizer="menu-2-0" data-equalize-on="xlarge" data-equalize-on-stack="true">
<a href="#" class="dropdown--toggle" role="button">
Sub dropdown 1
<svg role="img" class="icon icon-chevron-r icon--xxs">
<title>Toggle Submenu</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#chevron-r"></use>
</svg>
</a>
<ul class="dropdown--menu dropdown--level-3" data-equalizer-watch="menu-2-0">
<li class="dropdown" data-equalizer="menu-3-0" data-equalize-on="xlarge" data-equalize-on-stack="true">
<a href="#" class="dropdown--toggle" role="button">
Link 1
</a>
</li>
<li class="dropdown" data-equalizer="menu-3-1" data-equalize-on="xlarge" data-equalize-on-stack="true">
<a href="#" class="dropdown--toggle" role="button">
Link 2
</a>
</li>
<li class="dropdown" data-equalizer="menu-3-2" data-equalize-on="xlarge" data-equalize-on-stack="true">
<a href="#" class="dropdown--toggle" role="button">
Link 3
</a>
</li>
</ul>
</li>
<li class="dropdown" data-equalizer="menu-2-1" data-equalize-on="xlarge" data-equalize-on-stack="true">
<a href="#" class="dropdown--toggle" role="button">
Sub dropdown 2
<svg role="img" class="icon icon-chevron-r icon--xxs">
<title>Toggle Submenu</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#chevron-r"></use>
</svg>
</a>
<ul class="dropdown--menu dropdown--level-3" data-equalizer-watch="menu-2-1">
<li class="dropdown" data-equalizer="menu-3-0" data-equalize-on="xlarge" data-equalize-on-stack="true">
<a href="#" class="dropdown--toggle" role="button">
Link 1
</a>
</li>
<li class="dropdown" data-equalizer="menu-3-1" data-equalize-on="xlarge" data-equalize-on-stack="true">
<a href="#" class="dropdown--toggle" role="button">
Link 2
</a>
</li>
</ul>
</li>
<li class="dropdown" data-equalizer="menu-2-2" data-equalize-on="xlarge" data-equalize-on-stack="true">
<a href="#" class="dropdown--toggle" role="button">
Sub dropdown 3
<svg role="img" class="icon icon-chevron-r icon--xxs">
<title>Toggle Submenu</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#chevron-r"></use>
</svg>
</a>
<ul class="dropdown--menu dropdown--level-3" data-equalizer-watch="menu-2-2">
<li class="dropdown" data-equalizer="menu-3-0" data-equalize-on="xlarge" data-equalize-on-stack="true">
<a href="#" class="dropdown--toggle" role="button">
Link 1
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown" data-equalizer="menu-1-1" data-equalize-on="xlarge" data-equalize-on-stack="true">
<a href="#/nz/enterprise" class="dropdown--toggle" role="button">
Dropdown 2
<svg role="img" class="icon icon-chevron-b icon--xxs">
<title>Toggle Menu</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#chevron-b"></use>
</svg>
</a>
<ul class="dropdown--menu dropdown--level-2" data-equalizer-watch="menu-1-1">
<li class="dropdown" data-equalizer="menu-2-0" data-equalize-on="xlarge" data-equalize-on-stack="true">
<a href="#" class="dropdown--toggle" role="button">
Sub dropdown 1
<svg role="img" class="icon icon-chevron-r icon--xxs">
<title>Toggle Submenu</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#chevron-r"></use>
</svg>
</a>
<ul class="dropdown--menu dropdown--level-3" data-equalizer-watch="menu-2-0">
<li class="dropdown" data-equalizer="menu-3-0" data-equalize-on="xlarge" data-equalize-on-stack="true">
<a href="#" class="dropdown--toggle" role="button">
Link 1
</a>
</li>
<li class="dropdown" data-equalizer="menu-3-1" data-equalize-on="xlarge" data-equalize-on-stack="true">
<a href="#" class="dropdown--toggle" role="button">
Link 2
</a>
</li>
<li class="dropdown" data-equalizer="menu-3-2" data-equalize-on="xlarge" data-equalize-on-stack="true">
<a href="#" class="dropdown--toggle" role="button">
Link 3
</a>
</li>
<li class="dropdown" data-equalizer="menu-3-3" data-equalize-on="xlarge" data-equalize-on-stack="true">
<a href="#" class="dropdown--toggle" role="button">
Link 4
</a>
</li>
<li class="dropdown" data-equalizer="menu-3-4" data-equalize-on="xlarge" data-equalize-on-stack="true">
<a href="#" class="dropdown--toggle" role="button">
Link 5
</a>
</li>
</ul>
</li>
<li class="dropdown" data-equalizer="menu-2-1" data-equalize-on="xlarge" data-equalize-on-stack="true">
<a href="#" class="dropdown--toggle" role="button">
Link 1
</a>
</li>
<li class="dropdown" data-equalizer="menu-2-2" data-equalize-on="xlarge" data-equalize-on-stack="true">
<a href="#" class="dropdown--toggle" role="button">
Link 2
</a>
</li>
<li class="dropdown" data-equalizer="menu-2-3" data-equalize-on="xlarge" data-equalize-on-stack="true">
<a href="#" class="dropdown--toggle" role="button">
Link 3
</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" role="button">
Link 1
</a>
</li>
</ul>
</div>
<div class="navbar--right">
<ul class="navbar--nav" data-myob-dropdown-menu data-closing-time="150">
<li class="dropdown">
<a href="#" class="dropdown--toggle" role="button">
<svg role="img" class="icon icon-sign-in icon--md" aria-label="Sign in">
<title>Sign in</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#sign-in"></use>
</svg>
<span class="sign-in-label">Right dropdown</span>
<svg role="img" class="icon icon-chevron-b icon--xxs">
<title>Toggle Menu</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#chevron-b"></use>
</svg>
</a>
<ul class="dropdown--level-2 sign-in-collapse dropdown--menu">
<li>
<a href="#">
Link 1
</a>
</li>
<li>
<a href="#">
Link 2
</a>
</li>
<li>
<a href="#">
Link 3
</a>
</li>
</ul>
</li>
<li class="nav-icon">
<a href="#">
<svg role="img" class="icon icon-phone icon--md" aria-label="Contact us">
<title>Contact us</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#phone"></use>
</svg>
</a>
</li>
<li class="nav-icon">
<a href="#" data-target="#desktop-search" class="navbar-toggle">
<svg role="img" class="icon icon-search icon--md" aria-label="Search">
<title>Search</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#search"></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div data-search-box-placeholder="Search" id="desktop-search" class="navbar--search navbar--search--desktop">
<div class="box-search">
<form action="/" method="GET">
<button type="submit" value="">
<svg role="img" class="icon icon-search icon--md">
<title>Search</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#search"></use>
</svg>
</button>
<div>
<input autocomplete="off" dir="ltr" name="q" class="desktop-search__input" title="query" type="text" placeholder="Search" spellcheck="false"/>
<input name="engineName" type="hidden" value="global"/>
<input name="country" type="hidden" value="New Zealand"/>
</div>
<div class="global-reset-div hidden">
<input type="reset" class="global-reset hidden">
<svg role="img" class="icon icon-cross icon-sm">
<title>Cancel</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#cross"></use>
</svg>
</div>
</form>
</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.