Divider

Divider is a visual separator between related groups of content or actions. Use ngs-divider for a horizontal or vertical rule, with optional inset and fixedHeight support. Use ngs-text-divider when the separator needs a short label, such as “or”.

Use it in lists, forms, panels, cards, toolbars, popovers, settings screens, and dense layouts where a clear boundary between groups helps scanning. Do not use Divider to create empty space or layout structure; use Tailwind spacing and layout classes for that. Prefer specialized dividers inside components that provide them, such as MenuDivider, NavigationDivider, SidebarDivider, or CommandBarDivider.

The NgStarter Angular Divider component lets you separate related groups of content or actions with a visual rule. Use ngs-divider in lists, forms, panels, cards, toolbars, popovers, settings screens, and dense layouts where a clear boundary between groups helps scanning. It includes examples for Basic Divider, Text Divider, and Divider overview.

Basic Divider

Use Divider to separate related groups in a panel, form, list, card, toolbar, or settings surface. Horizontal dividers separate sections; vertical dividers separate inline actions or columns.

Horizontal

Horizontal inset

Section 1

Section 2

Vertical

Item 1

Item 2

Item 3

Vertical fixed height

Item 1

Item 2

Item 3

Text Divider

Use Text Divider when the separator itself needs a short label, commonly for alternative actions such as “or”.

Text dividers

Or register with

any text