<h3>Large</h3>
<nav class="c-nav c-nav--center c-nav--pagination c-nav--pagination-large" aria-label="Pagination Large">
    <ul class="c-nav__list" role="menubar">
        <li class="c-nav__list-element" role="none">
            <a href="#" role="menuitem" class="c-nav__link c-nav__link--direction" title="Previous Page">PREV</a>
        </li>
        <li class="c-nav__list-element" role="none">
            <a href="#" role="menuitem" class="c-nav__link" title="Page 1 of 10">1</a>
        </li>
        <li class="c-nav__list-element" role="none">
            <a href="#" role="menuitem" class="c-nav__link" title="Page 2 of 10">2</a>
        </li>
        <li class="c-nav__list-element" role="none">
            <a href="#" role="menuitem" class="c-nav__link c-nav__link--current" aria-current="page" title="Page 3 of 10">3</a>
        </li>
        <li class="c-nav__list-element" role="none">
            <a href="#" role="menuitem" class="c-nav__link" title="Page 4 of 10">4</a>
        </li>
        <li class="c-nav__list-element" role="none">
            <a href="#" role="menuitem" class="c-nav__link" title="Page 5 of 10">5</a>
        </li>
        <li class="c-nav__list-element" role="none">
            <span class="c-nav__link" role="separator">...</span>
        </li>
        <li class="c-nav__list-element" role="none">
            <a href="#" role="menuitem" class="c-nav__link" title="Page 10 of 10">10</a>
        </li>
        <li class="c-nav__list-element" role="none">
            <a href="#" role="menuitem" class="c-nav__link c-nav__link--direction" title="Next Page">NEXT</a>
        </li>
    </ul>
</nav>
<h3>{{ singletitle }}</h3>
<nav class="c-nav c-nav--center c-nav--pagination{{ modifier }}" aria-label="Pagination {{ singletitle }}">
    <ul class="c-nav__list" role="menubar">
        <li class="c-nav__list-element" role="none">
            <a href="#" role="menuitem" class="c-nav__link c-nav__link--direction" title="Previous Page">PREV</a>
        </li>
        <li class="c-nav__list-element" role="none">
            <a href="#" role="menuitem" class="c-nav__link" title="Page 1 of 10">1</a>
        </li>
        <li class="c-nav__list-element" role="none">
            <a href="#" role="menuitem" class="c-nav__link" title="Page 2 of 10">2</a>
        </li>
        <li class="c-nav__list-element" role="none">
            <a href="#" role="menuitem" class="c-nav__link c-nav__link--current" aria-current="page" title="Page 3 of 10">3</a>
        </li>
        <li class="c-nav__list-element" role="none">
            <a href="#" role="menuitem" class="c-nav__link" title="Page 4 of 10">4</a>
        </li>
        <li class="c-nav__list-element" role="none">
            <a href="#" role="menuitem" class="c-nav__link" title="Page 5 of 10">5</a>
        </li>
        <li class="c-nav__list-element" role="none">
            <span class="c-nav__link" role="separator">...</span>
        </li>
        <li class="c-nav__list-element" role="none">
            <a href="#" role="menuitem" class="c-nav__link" title="Page 10 of 10">10</a>
        </li>
        <li class="c-nav__list-element" role="none">
            <a href="#" role="menuitem" class="c-nav__link c-nav__link--direction" title="Next Page">NEXT</a>
        </li>
    </ul>
</nav>
{
  "name": "Default",
  "modifier": " c-nav--pagination-large",
  "singletitle": "Large"
}

The pagination menu is a modified variant of the nav menu, to get this to work simply add the .c-nav–pagination class to the main .c-nav container.