videorc/uiNavigable Row
A fact row of icon, label and value. When the value's home is another page, the row becomes a button with a chevron that jumps there, and a hint lists the facts a short value stands for.
Installation
$ pnpm dlx shadcn@latest add @videorc/navigable-rowUsage
import {
NavigableRow,
NavigableRowHintLines,
} from "@/components/navigable-row";<GroupedList label="Session">
<NavigableRow
icon={CameraIcon}
label="Camera"
onNavigate={() => openPage("sources")}
value="FaceTime HD Camera"
/>
</GroupedList>Use it for a fact another page owns: the Studio's Session rows, a Settings row that points at Output or Livestream. Pass onNavigate only when the value lives somewhere else, and send it to the one page that owns it.
Don't use it for a row that changes something in place: that's a List Row with a control, or a Settings row.
A long text value gives way first: the label keeps its width and the value truncates ("Microphone" beside "Microphone (HD Pro Webcam C920)", never "Mic…"). A control value, such as a Stop button, keeps its width instead, and the label truncates.
When a value sums up several facts ("1080p · 60 fps", "2 on"), hint shows them on hover and on focus. NavigableRowHintLines puts one fact on each line. Only a row that navigates takes a hint, since only a button takes focus.
Theming
| Token or attribute | Meaning |
|---|---|
h-row, px-3 | The 32 px row with 12 px padding |
rounded-row | 8 px on a row alone; none inside a GroupedList |
text-muted-foreground | The icon, the label and the chevron |
text-foreground | The value, at weight 500 |
hover:bg-accent | The hover of a row that navigates |
data-slot | navigable-row on the row, navigable-row-label and navigable-row-value on its parts, navigable-row-hint on a hint's lines |
Keyboard
| Key | Action |
|---|---|
Tab | Moves to a row that navigates and shows its hint |
Enter, Space | Opens the value's page |
Accessibility
A row that navigates is a button named by its label and value; the chevron is decorative. Its hint is a Tooltip, never a native title. A fact row is plain text.
API reference
NavigableRow
Prop
Type
NavigableRowHintLines
Prop
Type
List Row
The one row for every icon, title and meta list, and the inset grouped list it sits in. 32 px rows split by hairlines, facts unless they say otherwise, with a whole-row button or a stretched title button when a row acts.
Window Frame
The frame of a single-pane window and its header row. The content coat over the window coat, and a 40 px header that shares its line with the macOS traffic lights, carries the window's title and drags the window.