Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Separator - In Navigation
Vertical separators between navigation links using h-4 height constraint for decorative inline dividers
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Navigation needs subtle boundaries—not every link needs a border. This React Separator creates decorative vertical dividers between nav links using orientation equals vertical with h-4 (16px) height constraint. Built with shadcn/ui Separator and Radix UI primitives, short vertical separators divide inline nav—perfect for header navigation, footer links, breadcrumb trails, utility nav, or any horizontal link list where subtle visual separation improves scannability without overwhelming the design.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Vertical Separator
Full-height vertical separators
Horizontal Separator
Horizontal content dividers
Breadcrumb
Navigation with chevron separators
Navigation Menu
Dropdown navigation structure
Button Group
Grouped interactive elements
Simple Line
Minimal separator