Skip to main contentSkip to site searchSkip to component search
Honeycomb

Pager

The pager provides orientation on where the user currently is. It also serves as navigation at the same time.

The pagination is a navigation landmark, so it requires an accessible aria-label that will identify the nature of this navigation to screen readers.

To highlight the current page, add the aria-current="page" attribute to the link or button element.

Modifiers

The pager links have 2 modifiers (plus 2 deprecated modifiers):

flix-pager__link--disabled
Disables the item, normally used with the items that select previous and next pages.
flix-pager__link--wide
Increase the side paddings to make the items wider, usually used when you add custom content.
flix-pager__link--prev
*Deprecated:* displays previous button
flix-pager__link--next
*Deprecated:* displays next button

You can use arrow icons for the items that move the pages back and forward.

It's very important to provide the icons or buttons with an accessible label via the icon title or an aria-label on the link/button elements. Examples:

  • "Previous Page": should use the arrow-left icon
  • "Next Page": should use the arrow-right icon

To disable the previous and next page links you can use the disabled attribute in combination with the flix-pager__link--disabled class modifier.

<nav class="flix-pager" aria-label="Pagination">
  <ul class="flix-pager__list">
    <li class="flix-pager__item">
      <button type="button" class="flix-pager__link flix-pager__link--disabled" disabled>
        <flix-icon color="primary" name="arrow-left" title="Back"></flix-icon>
        <span class="flix-sr-only">Back</span>
      </button>
    </li>
    <li class="flix-pager__item">
      <button type="button" class="flix-pager__link" aria-current="page">
        1
      </button>
    </li>
    <li class="flix-pager__item">
      <button type="button" class="flix-pager__link">
        2
      </button>
    </li>
    <li class="flix-pager__item">
      <button type="button" class="flix-pager__link">
        3
      </button>
    </li>
    <li class="flix-pager__item">
      <button type="button" class="flix-pager__link">
        4
      </button>
    </li>
    <li class="flix-pager__item">
      <button type="button" class="flix-pager__link">
        5
      </button>
    </li>
    <li class="flix-pager__item">
      <button type="button" class="flix-pager__link">
        <flix-icon color="primary" name="arrow-right" title="Next"></flix-icon>
        <span class="flix-sr-only">Next</span>
      </button>
    </li>
  </ul>
</nav>

More controls for bigger pagination

  • "First Page": should use the arrow-left-double icon
  • "Last Page": should use the arrow-right-double icon
  • "Show more pages": add the three dots in aria-hidden="true" element to hide them from screen

readers and add the relevant label within the flix-sr-only element.

<nav class="flix-pager" aria-label="Pagination">
  <ul class="flix-pager__list">
    <li class="flix-pager__item">
      <button type="button" class="flix-pager__link flix-pager__link--disabled" disabled>
        <flix-icon color="primary" name="arrow-left-double" title="First"></flix-icon>
        <span class="flix-sr-only">First</span>
      </button>
    </li>
    <li class="flix-pager__item">
      <button type="button" class="flix-pager__link flix-pager__link--disabled" disabled>
        <flix-icon color="primary" name="arrow-left" title="Back"></flix-icon>
        <span class="flix-sr-only">Back</span>
      </button>
    </li>
    <li class="flix-pager__item">
      <button type="button" class="flix-pager__link" aria-current="page">
        1
      </button>
    </li>
    <li class="flix-pager__item">
      <button type="button" class="flix-pager__link">
        2
      </button>
    </li>
    <li class="flix-pager__item">
      <button type="button" class="flix-pager__link">
        3
      </button>
    </li>
    <li class="flix-pager__item">
      <button type="button" class="flix-pager__link">
        <span class="flix-sr-only">Show more pages</span>
        <span aria-hidden="true">...</span>
      </button>
    </li>
    <li class="flix-pager__item">
      <button type="button" class="flix-pager__link">
        1228
      </button>
    </li>
    <li class="flix-pager__item">
      <button type="button" class="flix-pager__link">
        1229
      </button>
    </li>
    <li class="flix-pager__item">
      <button type="button" class="flix-pager__link">
        1230
      </button>
    </li>
    <li class="flix-pager__item">
      <button type="button" class="flix-pager__link">
        <flix-icon color="primary" name="arrow-right" title="Next"></flix-icon>
        <span class="flix-sr-only">Next</span>
      </button>
    </li>
    <li class="flix-pager__item">
      <button type="button" class="flix-pager__link">
        <flix-icon color="primary" name="arrow-right-double" title="Last"></flix-icon>
        <span class="flix-sr-only">Last</span>
      </button>
    </li>
  </ul>
</nav>

Notice <span class="flix-sr-only">Label</span> labels added to every pager item that has only an icon inside, make sure to provide them or a valid aria-label for those "icon only" pager items.

Showing control labels improves accessibility

To make it even better for accessibility, it's best to make the controls labels visible. This ensures people that for some reason are unable to understand the meaning of the icons will be able to read the controls labels as they become explicit.

When adding the visible labels next to the icons you should not add a color modifier for the icons so their colors will match the text color.

<nav class="flix-pager" aria-label="Pagination">
  <ul class="flix-pager__list">
    <li class="flix-pager__item">
      <button type="button" class="flix-pager__link flix-pager__link--disabled" disabled>
        <flix-icon name="arrow-left-double" aria-hidden="true"></flix-icon> First
      </button>
    </li>
    <li class="flix-pager__item">
      <button type="button" class="flix-pager__link flix-pager__link--disabled" disabled>
        <flix-icon name="arrow-left" aria-hidden="true"></flix-icon> Back
      </button>
    </li>
    <li class="flix-pager__item">
      <button type="button" class="flix-pager__link" aria-current="page">
        1
      </button>
    </li>
    <li class="flix-pager__item">
      <button type="button" class="flix-pager__link">
        2
      </button>
    </li>
    <li class="flix-pager__item">
      <button type="button" class="flix-pager__link">
        3
      </button>
    </li>
    <li class="flix-pager__item">
      <button type="button" class="flix-pager__link">
        <span class="flix-sr-only">Show more pages</span>
        <span aria-hidden="true">...</span>
      </button>
</li>
    <li class="flix-pager__item">
      <button type="button" class="flix-pager__link">
        121
      </button>
    </li>
    <li class="flix-pager__item">
      <button type="button" class="flix-pager__link">
        122
      </button>
    </li>
    <li class="flix-pager__item">
      <button type="button" class="flix-pager__link">
        123
      </button>
    </li>
    <li class="flix-pager__item">
      <button type="button" class="flix-pager__link">
        Next <flix-icon name="arrow-right" aria-hidden="true"></flix-icon>
      </button>
    </li>
    <li class="flix-pager__item">
      <button type="button" class="flix-pager__link">
        Last <flix-icon name="arrow-right-double" aria-hidden="true"></flix-icon>
      </button>
    </li>
  </ul>
</nav>

Custom content in items

You can add custom content for pagination, which is particularly interesting for pagination-like components used other contexts. For example: the date selector on the list of trips.

When using custom content you might want to use the --wide modifier on the items to increase the side paddings and make the content more visually pleasing.

<nav class="flix-pager" aria-label="Day picker">
  <ul class="flix-pager__list">
    <li class="flix-pager__item">
      <button type="button" class="flix-pager__link flix-pager__link--disabled" disabled>
        <flix-icon color="primary" name="arrow-left" title="Back"></flix-icon>
        <span class="flix-sr-only">Back</span>
      </button>
    </li>
    <li class="flix-pager__item flix-pager__item--wide">
      <button type="button" class="flix-pager__link" aria-current="page">
        <div class="custom-content">
          <time datetime="2022-09-08">Thu, 8 Sep</time>
          <div class="flix-text--small">€45.99</div>
        </div>
      </button>
    </li>
    <li class="flix-pager__item flix-pager__item--wide">
      <button type="button" class="flix-pager__link">
        <div class="custom-content">
          <time datetime="2022-09-08">Thu, 8 Sep</time>
          <div class="flix-text--small">€45.99</div>
        </div>
      </button>
    </li>
    <li class="flix-pager__item flix-pager__item--wide">
      <button type="button" class="flix-pager__link">
        <div class="custom-content">
          <time datetime="2022-09-08">Thu, 8 Sep</time>
          <div class="flix-text--small">€45.99</div>
        </div>
      </button>
    </li>
    <li class="flix-pager__item flix-pager__item--wide">
      <button type="button" class="flix-pager__link">
        <div class="custom-content">
          <time datetime="2022-09-08">Thu, 8 Sep</time>
          <div class="flix-text--small">€45.99</div>
        </div>
      </button>
    </li>
    <li class="flix-pager__item flix-pager__item--wide">
      <button type="button" class="flix-pager__link">
        <div class="custom-content">
          <time datetime="2022-09-08">Thu, 8 Sep</time>
          <div class="flix-text--small">€45.99</div>
        </div>
      </button>
    </li>
    <li class="flix-pager__item">
      <button type="button" class="flix-pager__link">
        <flix-icon color="primary" name="arrow-right" title="Next"></flix-icon>
        <span class="flix-sr-only">Next</span>
      </button>
    </li>
  </ul>
</nav>

Related Components