---
title: anura-paginator
url: 'https://doc.brix.ch/anura/webcomponents/components/paginator'
markdown: 'https://doc.brix.ch/anura/webcomponents/components/paginator.md'
lang: en
date: '2026-10-26'
description: 'Technical documentation for brix:anura webcomponents – Software developed by brix'
taxonomy:
  category:
    - docs
---

[](#) 

  [ Welcome ](https://doc.brix.ch/)     [ brix:anura ](https://doc.brix.ch/anura)     [ Anura Webcomponents ](https://doc.brix.ch/anura/webcomponents)     [ Components ](https://doc.brix.ch/anura/webcomponents/components)      anura-paginator    

# anura-paginator

#### Table of Contents

- [Attributes](#attributes)
- [Parts](#parts)

A paginator to move to the next page, you know the drill:

![Screenshot of anura-paginator](https://doc.brix.ch/user/pages/03.anura/01.webcomponents/02.components/paginator/anura-paginator.png)

## Attributes

### parent

> **required: yes**, live: yes, default: supplied by `<anura-gallery>` when used inside

Which component this paginator controls. This is done automatically when used inside of `<anura-gallery>`, but you can also put `anura-paginator` anywhere else (e.g. a footer), but then you need to tell it what to control.

`<anura-paginator parent="#my-gallery"></anura-paginator>`

### mode

> required: no, live: no, default: -

When set to `auto`, the pagination buttons will disappear and be replaced by a single "load more" button. When this button scrolls into view, the next page will be fetched and appended automatically.

![Screenshot of auto-mode](https://doc.brix.ch/user/pages/03.anura/01.webcomponents/02.components/paginator/anura-paginator-auto.png)

`<anura-paginator mode="auto"></anura-paginator>`

### detect-scroll

> required: no, live: no, default: true

For `mode="auto"`, detect when the view has been scrolled in order to load in the next page. Setting this to `false` will cause no scroll listener to be attached to the window. Users are left to click the "load more" button on their own.

`<anura-paginator detect-scroll="false"></anura-paginator>`

### Events

### paginate (outbound)

> pageNumber

Instruct `<anura-gallery>` to display the selected page number (by firing the event on the configured `parent`).

## Parts

```html
<nav part="paginator-nav">
    <button part="paginator-button paginator-prev">
        <anura-icon part="paginator-icon"></anura-icon>
    </button>
    <button part="paginator-button paginator-next">
        <anura-icon part="paginator-icon"></anura-icon>
    </button>
    <span part="paginator-pages">
        <button part="paginator-button paginator-page"></button>
        <!-- snip, repeats -->
    </span>
    <span part="paginator-counter"></span>
</nav>
```

E.g. colorize the prev- and next-buttons (inside an anura-gallery):

```css
anura-gallery::part(paginator-button) { color: green; }
```

 [ ](https://doc.brix.ch/anura/webcomponents/components/number) [](https://doc.brix.ch/anura/webcomponents/components/searchbar)

---

## Navigation

- Parent: [Components](https://doc.brix.ch/anura/webcomponents/components.md)
- Previous: [anura-number](https://doc.brix.ch/anura/webcomponents/components/number.md)
- Next: [anura-searchbar](https://doc.brix.ch/anura/webcomponents/components/searchbar.md)