Navigation
A Header component is available that must be used on all current and future Royal Canin projects, websites and applications. The Header component will give us consistency throughout all projects and allows for familiarity for users visiting any and or all of the Royal Canin experiences available.
<header class="rc-header" data-js-header-scroll="">
<nav class="rc-header__nav rc-header__nav--primary">
<ul class="rc-list rc-list--blank rc-list--inline rc-list--align" role="menubar">
<li class="rc-list__item">
<button class="rc-btn rc-btn--icon-label rc-icon rc-menu--xs rc-iconography rc-md-up" data-modal-trigger="main-nav-modal" aria-label="Menu">Menu</button>
<button class="rc-btn rc-btn--icon rc-icon rc-menu--xs rc-iconography rc-md-down" data-js-trigger="mobile-push-nav" aria-label="Menu">
<span class="rc-screen-reader-text">Menu</span>
</button>
</li>
</ul>
<a href="/" class="rc-header__brand">
<span class="rc-screen-reader-text">Royal Canin Logo</span>
<object id="header__logo" class="rc-header__logo" type="image/svg+xml" data="https://dl.royalcanin.com/8-12-4/logo--animated.svg" data-js-import-interactive-svg="">
<img alt="Royal Canin logo" height="100" src="https://dl.royalcanin.com/8-12-4/1x1.gif" style="background-image: url(https://dl.royalcanin.com/8-12-4/logo--animated.png)" width="135" />
</object>
</a>
<ul class="rc-list rc-list--blank rc-list--inline rc-list--align rc-header__right" role="menubar">
<li class="rc-list__item">
<button data-js-trigger="search-bar" class="rc-btn rc-btn--icon rc-icon rc-search--xs rc-iconography" aria-label="Search">
<span class="rc-screen-reader-text">Search</span>
</button>
</li>
</ul>
<form class="rc-header__search-bar rc-hidden" data-js-target="search-bar" autocomplete="off">
<button class="rc-btn rc-btn--icon rc-icon rc-search--xs rc-iconography rc-stick-left rc-vertical-align" type="submit" aria-label="Search">
<span class="rc-screen-reader-text">Search</span>
</button>
<input data-js-autocomplete="" class="rc-header__input" placeholder="Start typing to search" id="header-search" type="search" value="" />
<label for="header-search">
<span class="rc-screen-reader-text">Start typing to search</span>
</label>
<button data-js-trigger="search-bar" class="rc-btn rc-btn--icon rc-icon rc-close--xs rc-iconography rc-stick-right rc-vertical-align" type="button" aria-label="Close">
<span class="rc-screen-reader-text">Close</span>
</button>
</form>
</nav>
<nav class="rc-header__nav rc-header__nav--secondary rc-md-up">
<ul class="rc-list rc-list--blank rc-list--inline rc-list--align rc-header__center"> </ul>
</nav>
</header>Copied!
The Header is clean and minimal in its look and function but does allow the flexibility for designers and developers to offer more or less options within the header bar if so required.
The header always features a centralised Secondary logo by default (featuring no strapline because of legibility) and on scroll of any page the logo transitions to the Tertiary logo (crown only). Digitally, we want to use the Crown marque more and more and this is a great way of slowly introducing users to the standalone marque whilst retaining familiarity through showing the normal, more familiar logo to users initially.
The Header also allows for optional call to action icon buttons that are aligned to the right hand side of the Header. These are common calls to action that you would expect from any Header such as a Site search for a larger project or a Basket feature for an e-commerce project.
Up to three icons can be featured in the Header (with only two on smaller devices due to space) and their actions are determined by the requirements of the project. For example, a User icon button may feature in the Header that is simply a link through to a ‘My Account’ section of a project, or it may be a User icon button that works on hover (where applicable) that reveals a Dropdown Dialogue component with that users details featured here instead.
The icon that isn’t displayed on smaller devices due to space is the furthermost left icon and so consideration should be taken on which icon button isn’t shown on mobile devices - it’s worth noting that this icon button can still be featured within the Menu component.
Finally, The Header includes the ability to show a Hamburger menu icon and label button - this is the primary action and focus of the Header bar and all future projects should look to distance themselves from previous menu bars, secondary, tertiary and mega dropdown menu options in favour of the Hamburger menu option and how that Component works.
The Hamburger menu icon and label button are, however, optional due to potential projects not needing such a large menu component on click to showcase a smaller amount (or in fact any) primary links in the navigation and so the Hamburger can be removed and replaced with a simple Menu bar that sits below the default header bar.
Usage
The Menu at its core is using the Modal component to create a full screen overlay which allows for the menu to be as prominent and feature as many Primary and Secondary navigation links as possible for any project.
On larger displays it can also feature a message and relevant imagery to assist with brand communication where necessary and optional calls to action. Ideally these will reflect the same actions as the call to action icon buttons that may be featured in the Header component.
The Menu also includes its own form of Footer that can include an Icon button with label to initialise the Country & Language Selector Component if available and the relevant Social Channels for the region; both are optional.
<div data-js-modal-menu="">
<header class="rc-modal__header rc-md-up">
<button class="rc-modal__close rc-btn rc-btn--icon-label rc-icon rc-close--xs rc-iconography" data-modal-trigger="main-nav-modal">Close</button>
<a href="/">
<span class="rc-screen-reader-text">Royal Canin Logo</span>
<object id="main-logo" data="https://dl.royalcanin.com/8-12-4/logo--crown.svg" type="image/svg+xml" class="rc-modal__logo" data-js-import-interactive-svg="">
<img src="https://dl.royalcanin.com/8-12-4/1x1.gif" style="background-image: url(https://dl.royalcanin.com/8-12-4/logo--crown.png)" width="150" height="100" alt="Royal Canin logo" />
</object>
</a>
</header>
<section class="rc-max-width--xl">
<div class="rc-column rc-lg-up rc-padding--lg">
<h1 class="rc-gamma rc-padding-x--md">Working together for the ultimate brand experience</h1>
<img class="rc-padding--sm" src="/assets/images/Getting-Started.jpg" alt="Royal Canin Design Language" />
</div>
<nav class="rc-nav rc-hidden" data-toggle-group="mobile" data-toggle-effect="rc-expand--horizontal" data-js-target="mobile-push-nav">
<div class="rc-layout-container rc-three-column">
<div class="rc-column rc-double-width rc-padding-x--none--mobile rc-padding-right--none">
<ul class="rc-list rc-list--blank rc-list--align rc-list--two-column" role="menubar"> </ul>
</div>
<div class="rc-column rc-padding-x--none">
<ul class="rc-list rc-list--blank rc-list--align rc-btn-offset--top" role="menu">
<li class="rc-list__item">
<a class="rc-list__link rc-icon rc-email--xs rc-iconography--xs" role="menuitem" href="/getting-started/support/submit_an_issue.html">Submit an issue</a>
</li>
<li class="rc-list__item">
<a class="rc-list__link rc-icon rc-advice--xs rc-iconography--xs" role="menuitem" href="mailto:[email protected]">Contact us</a>
</li>
<li class="rc-list__item">
<a class="rc-list__link rc-icon rc-actions--xs rc-iconography--xs" role="menuitem" href="/getting-started/usage/resources.html">Downloads</a>
</li>
<li class="rc-list__item rc-md-down">
<a target="_blank" class="rc-btn rc-btn--icon-label rc-flag rc-gb--xs" role="menuitem" href="https://www.royalcanin.com/uk">United Kingdom</a>
</li>
<li class="rc-list__item rc-padding--sm rc-md-down">
<a class="rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-facebook--xs" href="#/" aria-label="Facebook">
<span class="rc-screen-reader-text">Facebook</span>
</a>
<a class="rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-twitter--xs" href="#/" aria-label="Twitter">
<span class="rc-screen-reader-text">Twitter</span>
</a>
<a class="rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-youtube--xs" href="#/" aria-label="Youtube">
<span class="rc-screen-reader-text">Youtube</span>
</a>
<a class="rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-instagram--xs" href="#/" aria-label="Facebook">
<span class="rc-screen-reader-text">Instagram</span>
</a>
<a class="rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-pinterest--xs" href="#/" aria-label="Facebook">
<span class="rc-screen-reader-text">Pinterest</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
</section>
<footer class="rc-modal__footer rc-align-children--space-between rc-md-up">
<a class="rc-btn rc-btn--icon-label rc-flag rc-gb--xs" role="menuitem" href="https://www.royalcanin.com/uk">United Kingdom</a>
<div>
<a class="rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-facebook--xs" href="#/" aria-label="Facebook">
<span class="rc-screen-reader-text">Facebook</span>
</a>
<a class="rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-twitter--xs" href="#/" aria-label="Twitter">
<span class="rc-screen-reader-text">Twitter</span>
</a>
<a class="rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-youtube--xs" href="#/" aria-label="Youtube">
<span class="rc-screen-reader-text">Youtube</span>
</a>
<a class="rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-instagram--xs" href="#/" aria-label="Facebook">
<span class="rc-screen-reader-text">Instagram</span>
</a>
<a class="rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-pinterest--xs" href="#/" aria-label="Facebook">
<span class="rc-screen-reader-text">Pinterest</span>
</a>
</div>
</footer>
</div>Copied!