Skip to main contentSkip to site searchSkip to component search
Honeycomb

Footer Nav

The "footer nav" enables users to navigate between links. It is located at the very bottom of the page.

This is a footer navigation which behaves as an accordion on mobile breakpoints.

flix-footer-nav__title--open and flix-footer-nav__items--open modifiers are available on mobile for toggling the open states for the title icon and the collapsed list.

flix-footer-nav--first modifier is available for adding the top border on mobile to the first nav column.

<nav aria-label="Footer navigation" class="flix-grid">
  <div class="flix-col-12 flix-col-6-sm flix-col-3-xl">
    <div class="flix-footer-nav flix-footer-nav--first">
      <h4 class="flix-footer-nav__title">Customer Service</h4>
      <ul class="flix-footer-nav__items">
        <li class="flix-footer-nav__item">
          <a class="flix-footer-nav__link" href="#">
            Help
          </a>
        </li>
        <li class="flix-footer-nav__item">
          <a class="flix-footer-nav__link" href="#">
            Help
          </a>
        </li>
        <li class="flix-footer-nav__item">
          <a class="flix-footer-nav__link" href="#">
            Help
          </a>
        </li>
      </ul>
    </div>
  </div>
  <div class="flix-col-12 flix-col-6-sm flix-col-3-xl">
    <div class="flix-footer-nav flix-footer-nav">
      <h4 class="flix-footer-nav__title flix-footer-nav__title--open">Customer Service</h4>
      <ul class="flix-footer-nav__items flix-footer-nav__items--open">
        <li class="flix-footer-nav__item">
          <a class="flix-footer-nav__link" href="#">
            Help
          </a>
        </li>
        <li class="flix-footer-nav__item">
          <a class="flix-footer-nav__link" href="#">
            Help
          </a>
        </li>
        <li class="flix-footer-nav__item">
          <a class="flix-footer-nav__link" href="#">
            Help
          </a>
        </li>
      </ul>
    </div>
  </div>
  <div class="flix-col-12 flix-col-6-sm flix-col-3-xl">
    <div class="flix-footer-nav flix-footer-nav">
      <h4 class="flix-footer-nav__title">Customer Service</h4>
      <ul class="flix-footer-nav__items">
        <li class="flix-footer-nav__item">
          <a class="flix-footer-nav__link" href="#">
            Help
          </a>
        </li>
        <li class="flix-footer-nav__item">
          <a class="flix-footer-nav__link" href="#">
            Help
          </a>
        </li>
        <li class="flix-footer-nav__item">
          <a class="flix-footer-nav__link" href="#">
            Help
          </a>
        </li>
      </ul>
    </div>
  </div>
  <div class="flix-col-12 flix-col-6-sm flix-col-3-xl">
    <div class="flix-footer-nav flix-footer-nav">
      <h4 class="flix-footer-nav__title">Customer Service</h4>
      <ul class="flix-footer-nav__items">
        <li class="flix-footer-nav__item">
          <a class="flix-footer-nav__link" href="#">
            Help
          </a>
        </li>
        <li class="flix-footer-nav__item">
          <a class="flix-footer-nav__link" href="#">
            Help
          </a>
        </li>
        <li class="flix-footer-nav__item">
          <a class="flix-footer-nav__link" href="#">
            Help
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

You can use the --horizontal modifier for create slim footer navigation that shows links side by side.

<nav aria-label="Footer navigation">
  <div class="flix-footer-nav flix-footer-nav--horizontal flix-footer-nav--first">
    <ul class="flix-footer-nav__items">
      <li class="flix-footer-nav__item">
        <a class="flix-footer-nav__link" href="#">
          Help
        </a>
      </li>
      <li class="flix-footer-nav__item">
        <a class="flix-footer-nav__link" href="#">
          Credits
        </a>
      </li>
      <li class="flix-footer-nav__item">
        <button class="flix-footer-nav__link" type="button">
          Privacy Settings
        </button>
      </li>
    </ul>
  </div>
</nav>