Pagination

To add a pagination component to your listing view, please follow the steps below.

• Go to views (admin >> structure >> views)
• Click “add view”
  
• Enter the name of the view in the “view name” field.
  
• Check the description checkbox and enter the description of your view.
• Under the view settings section, select “content” from the “show” field dropdown list and choose the content type you want to display from “of type” dropdown list.
  
• Enable the “create a page” option and enter the “page title” and “path” of your listing page.
• Select the display format you want from the display format drop down list.
  
• In the “items to display” field, enter the number of items to display.
  
• Check the “use a pager” checkbox to enable pagination to your views listing page.
• Click “save and edit” button.
  
• You will be taken to the your views list page
• Go to the “pager” section and click “mini” link next to the “user pager” field label.
  
• Select “paged output, full pager” from the list of pager types and click “apply”. You can also choose “page output, mini pager” if you want to display mini pager pagination.
  
• Click the “save” button.

• Incorporate pagination when needed for sites or elements that will span multiple pages, such as:
  • News listings
  • Events listings
  • Staff listings
  • Search results
  • Carousel/sliders
  • Image galleries
• Pagination should be placed at the bottom of your page and page length should be no more than two to three screens long.
• Provide large clickable areas and space out the page links
• Don’t use underlines
• Identify the current page
• Provide Previous and Next links
• Use First and Last links (where applicable)
• Put First and Last links on the outside

• The pagination links are wrapped in a <nav> element
• The pagination links are properly labeled.
• It has the aria-labelledby attribute to establish relationships between the pagination wrapper and it’s label.
• Current page is properly indicated for visual and screen reader users.
• The icons on the pagination are hidden from screen readers.