<script>
  import { PaginationNav } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
</script>

`PaginationNav` provides a compact navigation interface for paginated content. It displays page numbers and navigation buttons, with support for overflow menus when there are many pages.

## Default

Create a basic pagination navigation with default settings.

<PaginationNav />

## Reactive example

Use the `page` prop to bind to the current page number.

<FileSource src="/framed/PaginationNav/PaginationNavReactive" />

## Total pages

Specify the total number of pages using the `total` prop.

<PaginationNav total={3} />

## Loop navigation

Set `loop` to `true` to enable circular navigation between pages.

<PaginationNav total={3} loop />

## Visible pages

Control the number of visible page numbers with the `shown` prop.

<PaginationNav total={100} shown={5} />

## Custom button text

Customize the navigation button text using `forwardText` and `backwardText`.

<PaginationNav
  forwardText="Next"
  backwardText="Previous"
/>

## Tooltip position

Set the tooltip position relative to the navigation buttons using `tooltipPosition`.

<PaginationNav tooltipPosition="outside" total={3} loop />