ItemNav
A "previous / N of X items / next" control with built-in ArrowUp/ArrowDown keyboard support — the item-navigation control used by Modal, reusable anywhere you browse a set of records.
Overview
ItemNav renders a compact previous/next control with a live "N of X items" counter. It handles ArrowUp/ArrowDown keyboard navigation itself (skipping editable elements like inputs so typing is never hijacked), and accepts additional custom hotkey combos via useHotkey.
It's the control Modal uses internally for its itemCount/currentIndex props — use it directly whenever you need the same "browse without closing" pattern outside a modal (e.g. a side panel, a table row inspector).
Import
import { ItemNav } from '@unflow.io/ui/components/ItemNav';Props
| Prop | Type | Default | Description |
|---|---|---|---|
itemCount | number | — | Required. Total number of items in the set |
currentIndex | number | 0 | 0-based index of the item currently displayed |
onNavigate | (index: number) => void | — | Called with the target index whenever previous/next fires (click or keyboard) |
onPrevious / onNext | () => void | — | Called alongside onNavigate for the respective direction |
listen | boolean | true | Whether keyboard navigation (arrows and custom keys) is active |
disableArrowKeys | boolean | — | Disables the built-in ArrowUp/ArrowDown keydown handling |
previousKeys / nextKeys | string[] | — | Additional hotkey combo (via useHotkey) that also triggers previous/next, e.g. ['k']/['j']. Arrow keys can't be registered here — they're handled separately (see disableArrowKeys) |
Basic usage
1 of 30 items
const [currentIndex, setCurrentIndex] = useState(0);
<ItemNav itemCount={30} currentIndex={currentIndex} onNavigate={setCurrentIndex} />Custom key combos
Bind an additional chord alongside the built-in arrow keys — useful for spreadsheet/inbox-style "j/k" navigation.
1 of 30 items
<ItemNav
itemCount={30}
currentIndex={currentIndex}
onNavigate={setCurrentIndex}
previousKeys={['k']}
nextKeys={['j']}
/>Customization (slots & slotProps)
| Slot | Type | Description |
|---|---|---|
arrowIconUp / arrowIconDown | ReactNode | Icon overrides for the previous/next buttons |
| Slot Prop | Props | Description |
|---|---|---|
previousButton / nextButton | Omit<IIconButton, 'onClick'> | The previous/next icon buttons |
counter | BaseHTMLProps<HTMLParagraphElement> | "N of X items" text element |
Accessibility
- The "N of X items" counter is an
aria-live="polite"region, so screen reader users get position feedback without extra wiring. - The previous/next buttons always have an accessible label, and disable themselves at the first/last item rather than silently no-oping.
- Keyboard handling skips editable targets (
input,textarea,select,contenteditable) so it never hijacks typing.