Shadcn Sortable Sidebar Navigation

When to use

• Ranked lists such as a play queue, notification channels or release tasks, put in order by a grip
• Tile grids such as a media library, where cards change places across rows and columns
• Grouped options and menus reordered in place, such as product variants or sidebar menu entries

When not to use

• An app wide navigation column that collapses to icons or slides off screen: use the Sidebar component
• Cards that move between several status columns on one board: use the Kanban component
• Ranked table rows that keep several columns of values lined up: use the Drag & Drop blocks
• A whole page layout of sidebar, top bar and content area around the list: use the App Shell blocks

Agent notes

• Rows render item.label as plain text with no link; wrap it in your router link so the menu navigates
• A zero count prints a bare 0, because the badge is gated on item.count alone; test for a count above 0
• Drag listeners sit on SortableItemHandle only, so a SortableItem rendered without one cannot be dragged
• Passing onMove skips the built-in reorder, so neither onValueChange nor onValueCommit fires on drop
• The drag preview clones the child of Sortable whose value matches the dragged item, so a wrapper around SortableItem needs that value too