> For the complete documentation index, see [llms.txt](https://docs.fact-finder.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.fact-finder.com/webcomponents-overview/api/navigation/paging-dropdown.md). # Paging Dropdown \`ff-paging-dropdown\` and \`ff-paging-select\` provide compact controls for changing result pages. They support custom item, option, and select templates. ## Documentation ### ff-paging-dropdown The `ff-paging-dropdown` acts like the `ff-paging` element, but is displayed as a dropdown. ```html ``` {% hint style="info" %} `ff-paging-dropdown` displays the current page number plus up to four pages each before and after the currently selected page. {% endhint %} #### show-selected When the attribute `show-selected` is set on the `ff-paging-dropdown`, the dropdown contains the currently selected element. ```html ``` #### paging-item Different to an `ff-paging` element, `ff-paging-dropdown` accepts only one `ff-paging-item` as a template for all generated pages. You can access the value of a paging item with the **{{page}}** syntax. ```html

``` #### Rendered HTML When set up like in the example above, the rendered HTML could look like this. ```html

``` ### ff-paging-select If you wish to use a native HTML `select` to render paging dropdown, you can use `ff-paging-select` element. It works without providing any custom templates. However, you can still define your own `select` and/or `option`. {% hint style="info" %} `ff-paging-select` displays the current page number plus up to four pages each before and after the currently selected page. {% endhint %} The most basic setup: ```html ``` Will act like: ```html ``` You may customize only the `select` element: ```html ``` Or just the `option`: ```html ``` Or both of them: ```html ``` #### Rendered HTML Suppose the current search result is for *page 2*, the last example above will produce the following HTML: ```html ``` ## Demo {% embed url="" %} ## API ### `ff-paging-dropdown` #### Properties | Name | Description | | ------------------------------------------------ | -------------------------------------------------------------------------- | | **pages** (Array) | An array of displayed page numbers. Set this through JavaScript only. | | **show-selected** (Boolean) | When present, the selected paging item is shown in the dropdown container. | | **collapse-onblur** (String) (default: `"true"`) | When `"true"`, the element closes automatically after it loses focus. | | **opened** (Boolean) | Indicates whether this element is opened by default. | #### Methods | Name | Description | | ---------------------------- | -------------------------------------------------------- | | **expand()** | Expands the dropdown element. | | **collapse()** | Collapses the dropdown element. | | **toggle(expand?: Boolean)** | Opens or closes the element, based on its current state. | #### Events | Name | Description | | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | | **dom-updated** | This event is triggered when the element has received new data and the template for this element and all sub elements have been punched out. | ### `ff-paging-select` #### Properties | Name | Description | | ----------------- | --------------------------------------------------------------------- | | **pages** (Array) | An array of displayed page numbers. Set this through JavaScript only. | #### Events | Name | Description | | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | | **dom-updated** | This event is triggered when the element has received new data and the template for this element and all sub elements have been punched out. | --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.fact-finder.com/webcomponents-overview/api/navigation/paging-dropdown.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.