Make your AI a shadcn expert
Previous: List Separator
Next: Section Divider

Menu Separator

Vertical React separators between labeled menu items with titles and descriptions, matching the official shadcn/ui menu pattern

Separate a row of labeled actions the way the official shadcn docs do. This React Separator stands between title-plus-description items, hides the last column on small screens, and lets the flex row define height. Built with shadcn/ui and Radix UI. Perfect for settings summaries, account switchers, and compact tool headers.

Scroll to load preview

Installation

In Navigation

Vertical separators in nav links

Vertical Separator

Vertical line between columns

List Separator

Horizontal separators in a list

Horizontal Separator

Horizontal content divider

Section Divider

Titled section breaks

Navigation Menu

Dropdown navigation structure

FAQ

Was this page helpful?

Sign in to leave feedback.

List Separator

Horizontal React separators between definition-list rows using shadcn/ui Separator for key-value lists in Next.js

Section Divider

Horizontal React separator between titled content sections with headings and supporting text for structured Next.js layouts

Get Pro — Save 33%·--:--:--→