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.

Website projects

html
            <!-- Header bar -->
<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://d3moonnr9fkxfg.cloudfront.net/logo--animated.svg?v=8-5-12"
        data-js-import-interactive-svg>
        <img alt="Royal Canin logo" height="100" src="https://d3moonnr9fkxfg.cloudfront.net/1x1.gif?v=8-5-12" style="background-image: url(https://d3moonnr9fkxfg.cloudfront.net/logo--animated.png?v=8-5-12)"
          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">
        <a href="#/" class="rc-md-up rc-btn rc-btn--icon rc-icon rc-pin--xs rc-iconography" aria-label="Pin">
          <span class="rc-screen-reader-text">Pin</span>
        </a>
        <a href="#/" class="rc-md-up rc-btn rc-btn--icon rc-icon user--xs rc-iconography" data-tooltip="header__tooltip" data-tooltip-trigger="mouseenter"
          data-tooltip-placement="bottom" title="User" aria-label="User">
          <span class="rc-btn__badge rc-badge"></span>
          <span class="rc-screen-reader-text">User</span>
        </a>
        <div id="header__tooltip" class="rc-tooltip" style="max-width: 150px;">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
          <button class="rc-btn rc-btn--icon-label rc-icon rc-actions--xs rc-iconography" href="#/">Log Out</button>
        </div>
        <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">
      <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" type="search" value="" />
      <label for="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">
      <li class="rc-list__item">
        <a class="rc-list__header" href="#/" role="menuitem">Cat</a>
      </li>
      <li class="rc-list__item">
        <a class="rc-list__header" href="#/" role="menuitem">Dog</a>
      </li>
      <li class="rc-list__item">
        <a class="rc-list__header" href="#/" role="menuitem">Science & nutrition</a>
      </li>
      <li class="rc-list__item">
        <a class="rc-list__header" href="#/" role="menuitem">Products</a>
      </li>
      <li class="rc-list__item">
        <a class="rc-list__header" href="#/" role="menuitem">About</a>
      </li>
    </ul>
  </nav>
</header>
        

Web app projects

When using the web app version of the navigation, you can use the class rc-web-app" in your <main> tag to fix the spacing. Please refer to the boilerplate for the full version of the code.

html
            <!-- Header bar -->
<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://d3moonnr9fkxfg.cloudfront.net/logo--animated.svg?v=8-5-12"
        data-js-import-interactive-svg>
        <img alt="Royal Canin logo" height="100" src="https://d3moonnr9fkxfg.cloudfront.net/1x1.gif?v=8-5-12" style="background-image: url(https://d3moonnr9fkxfg.cloudfront.net/logo--animated.png?v=8-5-12)"
          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">
        <a href="#/" class="rc-md-up rc-btn rc-btn--icon rc-icon rc-pin--xs rc-iconography" aria-label="Pin">
          <span class="rc-screen-reader-text">Pin</span>
        </a>
        <a href="#/" class="rc-md-up rc-btn rc-btn--icon rc-icon user--xs rc-iconography" data-tooltip="header__tooltip" data-tooltip-trigger="mouseenter"
          data-tooltip-placement="bottom" title="User" aria-label="User">
          <span class="rc-btn__badge rc-badge"></span>
          <span class="rc-screen-reader-text">User</span>
        </a>
        <div id="header__tooltip" class="rc-tooltip" style="max-width: 150px;">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
          <button class="rc-btn rc-btn--icon-label rc-icon rc-actions--xs rc-iconography" href="#/">Log Out</button>
        </div>
        <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">
      <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" type="search" value="" />
      <label for="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>
</header>
        

Main menu

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.

html
            <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>
    <object id="main-logo" data="https://d3moonnr9fkxfg.cloudfront.net/logo--crown.svg?v=8-5-12" type="image/svg+xml" class="rc-modal__logo" data-js-import-interactive-svg>
      <img src="https://d3moonnr9fkxfg.cloudfront.net/1x1.gif?v=8-5-12" style="background-image: url(https://d3moonnr9fkxfg.cloudfront.net/logo--crown.png?v=8-5-12)"
        width="150" height="100" alt="Royal Canin logo" />
    </object>
  </header>
  <section class="rc-max-width--xl">
    <div class="rc-column rc-lg-up">
      <h1 class="rc-gamma rc-padding-x--md">At Royal Canin®, everything we do is for the Dog and the Cat.</h1>
      <img src="/assets/images/img-b-w.png" alt="Always include descriptive alternative text for screen readers" />
    </div>
    <nav class="rc-nav rc-hidden" data-toggle-group="mobile" data-toggle-effect="rc-expand--horizontal" data-js-target="mobile-push-nav"
      role="navigation">
      <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">
            <li class="rc-list__item rc-list__item--group">
              <button class="rc-list__header" id="nav-header-1" data-toggle="nav-list-1" role="menuitem">Cats</button>
              <ul class="rc-list rc-list--blank rc-list--align" id="nav-list-1" aria-labelledby="nav-header-1" role="menu">
                <li class="rc-list__item rc-md-down">
                  <button class="rc-list__link rc-icon rc-left--xs rc-iconography" data-toggle="nav-list-1" role="button" href="#/">Back</button>
                </li>
                <li class="rc-list__item rc-md-down">
                  <a class="rc-list__header" href="#/" role="menuitem">Cats</a>
                </li>
                <li class="rc-list__item">
                  <a class="rc-list__link" href="#/" role="menuitem">Cat products</a>
                </li>
                <li class="rc-list__item">
                  <a class="rc-list__link" href="#/" role="menuitem">Cat breeds</a>
                </li>
                <li class="rc-list__item">
                    <a class="rc-list__link" href="#/" role="menuitem">Getting a cat</a>
                </li>
                <li class="rc-list__item">
                  <a class="rc-list__link" href="#/" role="menuitem">Kitten</a>
                </li>
                <li class="rc-list__item">
                  <a class="rc-list__link" href="#/" role="menuitem">Cat health and wellbeing</a>
                </li>
              </ul>
            </li>
            <li class="rc-list__item rc-list__item--group">
              <button class="rc-list__header" id="nav-header-2" data-toggle="nav-list-2" role="menuitem">Dog</button>
              <ul class="rc-list rc-list--blank rc-list--align" id="nav-list-2" aria-labelledby="nav-header-2" role="menu">
                <li class="rc-list__item rc-md-down">
                  <button class="rc-list__link rc-icon rc-left--xs rc-iconography" data-toggle="nav-list-2" role="button" href="#/">Back</button>
                </li>
                <li class="rc-list__item rc-md-down">
                  <a class="rc-list__header" href="#/" role="menuitem">Dogs
                <li class="rc-list__item">
                  <a class="rc-list__link" href="#/" role="menuitem">Dog products</a>
                </li>
                <li class="rc-list__item">
                  <a class="rc-list__link" href="#/" role="menuitem">Dog breeds</a>
                </li>
                <li class="rc-list__item">
                  <a class="rc-list__link" href="#/" role="menuitem">Getting a dog</a>
                </li>
                <li class="rc-list__item">
                  <a class="rc-list__link" href="#/" role="menuitem">Puppy</a>
                </li>
                <li class="rc-list__item">
                  <a class="rc-list__link" href="#/" role="menuitem">Dog health and wellbeing</a>
                </li>
              </ul>
            </li>
            <li class="rc-list__item rc-list__item--group">
              <button class="rc-list__header" id="nav-header-3" data-toggle="nav-list-3" role="menuitem">Tailored nutrition</button>
              <ul class="rc-list rc-list--blank rc-list--align" id="nav-list-3" aria-labelledby="nav-header-3" role="menu">
                <li class="rc-list__item rc-md-down">
                  <button class="rc-list__link rc-icon rc-left--xs rc-iconography" data-toggle="nav-list-3" role="button" href="#/">Back</button>
                </li>
                <li class="rc-list__item rc-md-down">
                  <a class="rc-list__header" href="#/" role="menuitem">Tailored nutrition</a>
                </li>
                <li class="rc-list__item">
                  <a class="rc-list__link" href="#/" role="menuitem">Cat products</a>
                </li>
                <li class="rc-list__item">
                  <a class="rc-list__link" href="#/" role="menuitem">Dog products</a>
                </li>
              </ul>
            </li>
            <li class="rc-list__item rc-list__item--group">
              <button class="rc-list__header" id="nav-header-4" data-toggle="nav-list-4" role="menuitem">About us</button>
              <ul class="rc-list rc-list--blank rc-list--align" id="nav-list-4" aria-labelledby="nav-header-4" role="menu">
                <li class="rc-list__item rc-md-down">
                  <button class="rc-list__link rc-icon rc-left--xs rc-iconography" data-toggle="nav-list-4" role="button" href="#/">Back</button>
                </li>
                <li class="rc-list__item rc-md-down">
                  <a class="rc-list__header" href="#/" role="menuitem">About us</a>
                </li>
                <li class="rc-list__item">
                  <a class="rc-list__link" href="#/" role="menuitem">Our history</a>
                </li>
                <li class="rc-list__item">
                  <a class="rc-list__link" href="#/" role="menuitem">Our value</a>
                </li>
                <li class="rc-list__item">
                  <a class="rc-list__link" href="#/" role="menuitem">Sustainability</a>
                </li>
                <li class="rc-list__item">
                  <a class="rc-list__link" href="#/" role="menuitem">Quality and food safety</a>
                </li>
                <li class="rc-list__item">
                  <a class="rc-list__link" href="#/" role="menuitem">News</a>
                </li>
                <li class="rc-list__item">
                  <a class="rc-list__link" href="#/" role="menuitem">Events</a>
                </li>
                <li class="rc-list__item">
                  <a class="rc-list__link" href="#/" role="menuitem">FAQs</a>
                </li>
              </ul>
            </li>
          </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-pin--xs rc-iconography" role="menuitem" href="#/">Where to buy</a>
            </li>
            <li class="rc-list__item">
              <a class="rc-list__link rc-icon rc-email--xs rc-iconography" role="menuitem" href="#/">Contact us</a>
            </li>
            <li class="rc-list__item rc-md-down">
              <a class="rc-list__link rc-flag rc-gb--xs" role="menuitem" href="#/">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="#/">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>
        

Issues

If you are having problems implementing this code, please submit an issue on our Github page.

Github Octocat

Feedback

If you would like to offer feedback on the design of this component, please send an email requesting access to the Design Language Slack channel.

Slack logo

Changelog

  • 15th November 2018 [ui_assets/components/navigation.yml]
    Replace twig placeholders with expected tokens.
  • 15th November 2018 [ui_assets/components/navigation.yml]
    Update navigation markup
  • 17th September 2018 [ui_assets/components/navigation.yml]
    spelling and grammar updates
  • 23rd August 2018 [ui_assets/components/navigation.yml]
    Removed developer note. Added app header example page.
  • 21st August 2018 [ui_assets/components/navigation.yml]
    Update spacer classes on footer
  • 16th August 2018 [ui_assets/components/navigation.yml]
    Optimise nav page
  • 16th August 2018 [ui_assets/components/navigation.yml]
    remove main menu and add nav page
  • 26th July 2018 [ui_assets/components/navigation.yml]
    Remaining prefixes
  • 25th July 2018 [ui_assets/components/navigation.yml]
    typo
  • 25th July 2018 [ui_assets/components/navigation.yml]
    prefix gb--xs
  • 25th July 2018 [ui_assets/components/navigation.yml]
    prefix md-up
  • 25th July 2018 [ui_assets/components/navigation.yml]
    prefix padding--sm
  • 12th July 2018 [ui_assets/components/navigation.yml]
    Prefixed classes throughout the portal with rc-.
  • 1st June 2018 [ui_assets/components/navigation.yml]
    remove beta labels
  • 10th April 2018 [ui_assets/components/navigation.yml]
    Copy and markup udpates and added new html boilerplate