Pagination

Usage Notes:

  • Show current page with aria-current="page"
  • Only show 5 pages at a time
  • If user can't click to navigate more pages apply aria-disabled="true" to page link
  • For accessibility the pagination makes use of the .dk-sr-only class that hides the content visually but still allows for screen readers to access the content. That is why the word "page" is surrounded by a span with the .dk-sr-only class.

Code Example:

<nav classname="dk-pagination" aria-label="pagination">
            <ul className="dk-pagination__list">
                <li className="dk-pagination__previous--group">
                    <a className="dk-pagination__link" href="#">
                        <span className="dk-sr-only">
                            Previous
                            <span>set of pages</span>
                        </span>
                    </a>
                </li>
                <li className="dk-pagination__previous--page">
                    <a className="dk-pagination__link" href="#">
                        <span className="dk-sr-only">
                            Previous
                            <span>page</span>
                        </span>
                    </a>
                </li>
                <li className="dk-pagination__item">
                    <a className="dk-pagination__link" href="#">
                        <span className="dk-sr-only">page </span>1
                    </a>
                </li>
                <li className="dk-pagination__item">
                    <a className="dk-pagination__link" href="#">
                        <span className="dk-sr-only">page </span>2
                    </a>
                </li>
                <li className="dk-pagination__item">
                    <a className="dk-pagination__link" href="#" aria-current="page">
                        <span className="dk-sr-only">page</span>3
                    </a>
                </li>
                <li className="dk-pagination__item">
                    <a className="dk-pagination__link" href="#">
                        <span className="dk-sr-only">page </span>4
                    </a>
                </li>
                <li className="dk-pagination__item">
                    <a className="dk-pagination__link" href="#">
                        <span className="dk-sr-only">page </span>5
                    </a>
                </li>
                <li className="dk-pagination__next--page">
                    <a className="dk-pagination__link" href="#">
                        <span className="dk-sr-only">
                            Next
                            <span>page</span>
                        </span>
                    </a>
                </li>
                <li className="dk-pagination__next--group">
                    <a className="dk-pagination__link" href="#">
                        <span className="dk-sr-only">
                            Next
                            <span>set of pages</span>
                        </span>
                    </a>
                </li>
            </ul>
        </nav>

Code Preview:

Code Example:

<nav classname="dk-pagination" aria-label="pagination">
            <ul className="dk-pagination__list">
                <li className="dk-pagination__previous--group">
                    <a className="dk-pagination__link" href="#">
                        <span className="dk-sr-only">
                            Previous
                            <span>set of pages</span>
                        </span>
                    </a>
                </li>
                <li className="dk-pagination__previous--page">
                    <a className="dk-pagination__link" href="#">
                        <span className="dk-sr-only">
                            Previous
                            <span>page</span>
                        </span>
                    </a>
                </li>
                <li className="dk-pagination__item">
                    <a className="dk-pagination__link" href="#">
                        <span className="dk-sr-only">page </span>298
                    </a>
                </li>
                <li className="dk-pagination__item">
                    <a className="dk-pagination__link" href="#">
                        <span className="dk-sr-only">page </span>299
                    </a>
                </li>
                <li className="dk-pagination__item">
                    <a className="dk-pagination__link" href="#" aria-current="page">
                        <span className="dk-sr-only">page</span>300
                    </a>
                </li>
                <li className="dk-pagination__item">
                    <a className="dk-pagination__link" href="#">
                        <span className="dk-sr-only">page </span>301
                    </a>
                </li>
                <li className="dk-pagination__item">
                    <a className="dk-pagination__link" href="#">
                        <span className="dk-sr-only">page </span>302
                    </a>
                </li>
                <li className="dk-pagination__next--page">
                    <a className="dk-pagination__link" href="#">
                        <span className="dk-sr-only">
                            Next
                            <span>page</span>
                        </span>
                    </a>
                </li>
                <li className="dk-pagination__next--group">
                    <a className="dk-pagination__link" href="#">
                        <span className="dk-sr-only">
                            Next
                            <span>set of pages</span>
                        </span>
                    </a>
                </li>
            </ul>
        </nav>

Code Preview: