Dummy
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<nav aria-label='Pagination' class='usa-pagination'>
  <ul class='usa-pagination__list'>
    <li class='usa-pagination__item usa-pagination__arrow'>
      <a aria-label='Previous page' class='usa-pagination__link usa-pagination__previous-page' href='#prev'>
        <div aria-hidden='true' class='usa-icon' role='img'>
          ‹
        </div>
        <span class='usa-pagination__link-text'>Previous</span>
      </a>
    </li>
    <li class='usa-pagination__item usa-pagination__page-no'>
      <a aria-label='Page 1' class='usa-pagination__button' href='#page1'>
        1
      </a>
    </li>
    <li class='usa-pagination__item usa-pagination__overflow' role='presentation'>
      <span>…</span>
    </li>
    <li class='usa-pagination__item usa-pagination__page-no'>
      <a aria-label='Page 9' class='usa-pagination__button' href='#page9'>
        9
      </a>
    </li>
    <li class='usa-pagination__item usa-pagination__page-no'>
      <a aria-current='page' aria-label='Page 10' class='usa-pagination__button usa-current' href='#page10'>
        10
      </a>
    </li>
    <li class='usa-pagination__item usa-pagination__page-no'>
      <a aria-label='Page 11' class='usa-pagination__button' href='#page11'>
        11
      </a>
    </li>
    <li class='usa-pagination__item usa-pagination__overflow' role='presentation'>
      <span>…</span>
    </li>
    <li class='usa-pagination__item usa-pagination__page-no'>
      <a aria-label='Page 24' class='usa-pagination__button' href='#page24'>
        24
      </a>
    </li>
    <li class='usa-pagination__item usa-pagination__arrow'>
      <a aria-label='Next page' class='usa-pagination__link usa-pagination__next-page' href='#next'>
        <span class='usa-pagination__link-text'>Next</span>
        <div aria-hidden='true' class='text-right usa-icon' role='img'>
          ›
        </div>
      </a>
    </li>
  </ul>
</nav>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
= render UswdsComponents::PaginationComponent.new do
  = render UswdsComponents::PaginationComponent::Previous.new(url: '#prev')
  = render UswdsComponents::PaginationComponent::Page.new(url: '#page1',
                                                          index: 1)
  = render UswdsComponents::PaginationComponent::Overflow.new
  = render UswdsComponents::PaginationComponent::Page.new(url: '#page9',
                                                          index: 9)
  = render UswdsComponents::PaginationComponent::Page.new(url: '#page10',
                                                          index: 10, current: true)
  = render UswdsComponents::PaginationComponent::Page.new(url: '#page11',
                                                          index: 11)
  = render UswdsComponents::PaginationComponent::Overflow.new
  = render UswdsComponents::PaginationComponent::Page.new(url: '#page24',
                                                          index: 24)
  = render UswdsComponents::PaginationComponent::Next.new(url: '#next')

Pagination Component

See at USWDS

No params configured.