Shadcn.io is not affiliated with official shadcn/ui
In Navigation
Vertical React separators between navigation links using a fixed-height nav row and shadcn/ui Separator for decorative inline dividers
Keep header links readable without boxing each one. This React Separator sits between nav items in a h-5 flex row so the vertical rule inherits height from the parent instead of fighting the primitive's h-full utility. Built with shadcn/ui and Radix UI. Perfect for utility nav, footer link rows, and compact header clusters.
In Navigation preview
Installation
Related Components
Vertical Separator
Full-height vertical separators
Horizontal Separator
Horizontal content dividers
Menu Separator
Labeled items with vertical rules
Breadcrumb
Navigation with chevron separators
Navigation Menu
Dropdown navigation structure
Simple Line
Minimal separator
FAQ
Was this page helpful?
Sign in to leave feedback.
Horizontal Separator
A horizontal React separator that divides stacked content with the default shadcn/ui line, Tailwind gap spacing, and Radix orientation for Next.js layouts
List Separator
Horizontal React separators between definition-list rows using shadcn/ui Separator for key-value lists in Next.js