# Nav Pagination Bar

Table pagination footer with page size and jump to page.

- id: `nav-pagination-bar`
- Page: https://agentic-ui-kit.com/components/nav-pagination-bar
- Live preview: https://agentic-ui-kit.com/live/component/nav-pagination-bar?piece=nav-pagination-bar

## Install

```bash
agentic-ui add nav-pagination-bar
npx shadcn@4.17.0 add @agentic-ui/nav-pagination-bar
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** table-pagination, pagination-footer, page-size-select, range-summary, page-numbers, jump-to-page, cursor-mode, previous-next, controlled-or-uncontrolled, live-summary, reduced-motion, dark-mode
- **Intents:** navigate, manage-collection
- **Suits domains:** saas, crm, ecommerce, operations, devtools, support
- **Interaction:** click, keyboard-focus, text-input
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** table pagination footer with page size and jump to page, pagination bar for a data table: page size selector, range summary 1-25 of 240, jump to page, cursor based pagination bar with next and previous only when the total is unknown, data table footer: rows per page, 1-25 of 240, page numbers with ellipsis, pagination component for server-side tables with controlled page state
- **Avoid when:** infinite lists that load on scroll (use data-virtual-list), a short list that fits on one page, mobile feeds where load more is the natural gesture
- **Preserve when adapting:** nav-landmark, aria-current-page, size-change-keeps-first-row
- **Replace when adapting:** page-sizes, noun, total, mode
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives