Item Pagination
Previous/next navigation controls for sequenced content items, supporting both Link-based and button-based modes.
ItemPagination renders up/down chevron controls for moving between ordered items. It has two layout modes: a compact inline variant for desktop toolbars (isMobile={false}, the default) and a full-width bottom bar for mobile viewports (isMobile={true}). Either mode can render as <Link> elements (default) or as <button> elements when useButtons is set.
Installation
npx shadcn@latest add @adv/item-paginationUsage
import { ItemPagination } from '@/components/ui/ItemPagination';
<ItemPagination
prevItem={{ id: 'alpha', title: 'Alpha Project' }}
nextItem={{ id: 'gamma', title: 'Gamma Project' }}
basePath="/work/acme"
/>Example
Props
| Prop | Type | Default | Description |
|---|---|---|---|
prevItem | { id: string; title: string } | null | — | Data for the previous item. Pass null to render a disabled control. |
nextItem | { id: string; title: string } | null | — | Data for the next item. Pass null to render a disabled control. |
basePath | string | — | Base path used to build hrefs: ${basePath}/${item.id}. |
isMobile | boolean | false | Renders a full-width bottom navigation bar instead of the compact inline layout. |
onClick | { onPrevClick?: () => void; onNextClick?: () => void } | — | Click handlers used when useButtons is true. |
useButtons | boolean | false | Render <button> elements instead of <Link> elements. |
prefetch | boolean | false | Passed through to Next.js <Link prefetch>. |
prevButtonRef | RefObject<HTMLButtonElement | null> | — | Ref attached to the previous button (desktop mode, useButtons only). |
nextButtonRef | RefObject<HTMLButtonElement | null> | — | Ref attached to the next button (desktop mode, useButtons only). |