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>