{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "nav-rail", "type": "registry:component", "title": "Nav Rail", "description": "A collapsible sidebar of destinations that keeps one active pill sliding between rows, and folds to a column of icons with tooltips.", "dependencies": [ "@base-ui/react", "tailwind-variants" ], "registryDependencies": [ "https://panelui.dev/r/web/sheet.json" ], "files": [ { "path": "components/panelui/nav-rail/index.tsx", "type": "registry:component", "target": "@components/panelui/nav-rail/index.tsx", "content": "'use client';\n\n/**\n * NavRail — the destinations of a product down one side, folded to icons when\n * the screen is narrow or the work needs the room.\n *\n * ```tsx\n * \n * \n * }>Meridian\n * \n * \n * \n * }>Overview\n * }>\n * Inbox 12\n * \n * \n * …\n * \n * ```\n *\n * ## One pill, and it travels\n *\n * The chosen destination sits on a tonal pill in the primary colour, with a\n * short accent on its leading edge. There is one pill for the whole rail, not\n * one per group, so it crosses the gap between groups when the choice does:\n * going from Inbox to Settings reads as one move down the rail rather than as\n * one row dimming while another lights.\n *\n * The pill is placed by measuring the active row in a layout effect, and kept\n * on it with a `ResizeObserver` and a `MutationObserver` as the rail changes\n * width, a label wraps or the active item changes. It is measured before paint\n * and does not animate on the first placement, so a page never opens with the\n * pill sliding in from the corner. With reduced motion the travel is skipped\n * and it is simply there.\n *\n * ## Folded, it is still a rail\n *\n * Collapsed, the rows become 40px icon squares. The active pill becomes the\n * square, the group labels become dividers, and a badge becomes a dot on the\n * corner of its icon rather than disappearing with the label. The rail's width\n * follows the state, so an app can put it in a flex row and let the content\n * take the room it gives up.\n *\n * A folded item keeps its accessible name through `label` (or its text\n * children when they are plain text), and shows the same name in a small\n * flyout on hover and focus. The visible label is `aria-hidden` while folded,\n * so a screen reader hears the row once rather than twice.\n *\n * ## Nested destinations\n *\n * A destination can own a child list with `NavRail.Sub`. The parent stays an\n * ordinary row — a link when it has an `href` — and the list is indented under\n * it, with a disclosure button that says whether it is open. Zoomed in, the\n * child rows are part of the rail's single pill and its arrow-key order; when\n * the child that is active is folded away inside a closed list, the parent\n * holds the pill so the rail still shows a place.\n *\n * Folded, the same list becomes a flyout to the side of the rail, opened by\n * hover or focus and kept out of the rail's clipping so a narrow column can\n * still show names. The parent is not the flyout's trigger in the sense a menu\n * is: the child rows are links in a real `