Royal Canin Logo

Working together for the ultimate brand experience

Royal Canin Design Language

Section Navigation

<nav class="rc-section-navigation" aria-labelledby="sectional-navigation">
  <h2 id="sectional-navigation" class="rc-hidden">Section Navigation</h2>
  <div class="collapse-control rc-icon rc-down--xs rc-iconography"></div>
  <ul class="rc-link-list">
    <li class="rc-link-list__item">
      <a class="rc-link-list__anchor-link" href="#welcominghome">
        <span class="rc-link__icon rc-icon rc-home rc-iconography"></span>
        <span class="rc-link__text">Welcoming home</span>
      </a>
    </li>
    <li class="rc-link-list__item">
      <a class="rc-link-list__anchor-link rc-link-list__item--active" href="#prearrival">
        <span class="rc-link__icon rc-icon rc-calendar rc-brand1"></span>
        <span class="rc-link__text">Pre Arrival</span>
      </a>
    </li>
    <li class="rc-link-list__item">
      <a class="rc-link-list__anchor-link" href="#feeding">
        <span class="rc-link__icon rc-icon rc-food rc-iconography"></span>
        <span class="rc-link__text">Feeding</span>
      </a>
    </li>
    <li class="rc-link-list__item">
      <a class="rc-link-list__anchor-link" href="#growthstages">
        <span class="rc-link__icon rc-icon rc-weight rc-iconography"></span>
        <span class="rc-link__text">Growth Stages</span>
      </a>
    </li>
    <li class="rc-link-list__item">
      <a class="rc-link-list__anchor-link" href="#trainingandplay">
        <span class="rc-link__icon rc-icon rc-training rc-iconography"></span>
        <span class="rc-link__text">Training and play</span>
      </a>
    </li>
    <li class="rc-link-list__item">
      <a class="rc-link-list__anchor-link" href="#grooming">
        <span class="rc-link__icon rc-icon rc-grooming rc-iconography"></span>
        <span class="rc-link__text">Grooming</span>
      </a>
    </li>
    <li class="rc-link-list__item">
      <a class="rc-link-list__anchor-link" href="#health">
        <span class="rc-link__icon rc-icon rc-pharmacy rc-iconography"></span>
        <span class="rc-link__text">Health</span>
      </a>
    </li>
    <li class="rc-link-list__item">
      <a class="rc-link-list__anchor-link" href="#behaviour">
        <span class="rc-link__icon rc-icon rc-experience rc-iconography"></span>
        <span class="rc-link__text">Behaviour</span>
      </a>
    </li>
    <li class="rc-link-list__item">
      <a class="rc-link-list__anchor-link" href="#health">
        <span class="rc-link__icon rc-icon rc-pharmacy rc-iconography"></span>
        <span class="rc-link__text">Health</span>
      </a>
    </li>
    <li class="rc-link-list__item">
      <a class="rc-link-list__anchor-link" href="#behaviour">
        <span class="rc-link__icon rc-icon rc-experience rc-iconography"></span>
        <span class="rc-link__text">Behaviour</span>
      </a>
    </li>
  </ul>
</nav>

Copied!