Shadcn Separator Grouped Menu Items

When to use

• Thin rules between a heading and its body, or between the stacked rows of a list or a summary
• Vertical rules between inline labels or side by side menu entries along one row
• Labeled breaks with a short caption centered on the rule, like an or continue with line

When not to use

• One word labels on a single line with rules the full height of the row: use the Separator Vertical example
• A trail of links from the current page back up to its parent pages: use the Breadcrumb component
• Step lines and named phase breaks in an agent run log or transcript: use the Marker component
• A list of rows each led by an avatar or icon, with text and an action: use the Item component

Agent notes

• Keep the forced self-auto beside h-8 on each vertical Separator, or its built in self-stretch pins the short rule to the top of the row
• The base Separator renders role separator, while the radix twin defaults decorative to true and renders role none, hidden from screen readers
• A vertical Separator takes its height from self-stretch, so it shows only in a flex row or grid unless given a height such as h-8