Divider

Dividers visually separate or group adjacent elements with a horizontal or vertical line. Use them to establish rhythm and hierarchy within menus, toolbars, and layouts.

<cs-divider></cs-divider>

Examples

Width

Use the --cs-divider-width custom property to change the width of the divider.

<cs-divider style="--cs-divider-width: 4px;"></cs-divider>

Color

Use the --cs-divider-color custom property to change the color of the divider.

<cs-divider style="--cs-divider-color: var(--cs-color-brand-fill-loud);"></cs-divider>

Spacing

Use the --cs-divider-spacing custom property to change the amount of space between the divider and its neighboring elements.

<div class="cs-text-center">
  Above
  <cs-divider style="--cs-divider-spacing: 2rem;"></cs-divider>
  Below
</div>

As a direct child of a layout utility such as cs-stack or cs-cluster, --cs-divider-spacing has no effect and the container’s gap sets the space instead. These utilities set the margins of their children to zero, the divider included, so the gap is the only space between items. Add a cs-gap-* class to the container to change it.

<div class="cs-stack cs-gap-xl cs-text-center">
  Above
  <cs-divider></cs-divider>
  Below
</div>

Orientation

The default orientation for dividers is horizontal. Set the orientation attribute to vertical to draw a vertical divider. The divider will span the full height of its Flexbox or CSS Grid container.

<div class="cs-cluster">
  First
  <cs-divider orientation="vertical"></cs-divider>
  Middle
  <cs-divider orientation="vertical"></cs-divider>
  Last
</div>

Dropdown Dividers

Use dividers in dropdowns to visually group dropdown items.

<cs-dropdown style="max-width: 200px;">
  <cs-button appearance="filled" slot="trigger" with-caret>Menu</cs-button>
  <cs-dropdown-item value="1">Option 1</cs-dropdown-item>
  <cs-dropdown-item value="2">Option 2</cs-dropdown-item>
  <cs-dropdown-item value="3">Option 3</cs-dropdown-item>
  <cs-divider></cs-divider>
  <cs-dropdown-item value="4">Option 4</cs-dropdown-item>
  <cs-dropdown-item value="5">Option 5</cs-dropdown-item>
  <cs-dropdown-item value="6">Option 6</cs-dropdown-item>
</cs-dropdown>

API

Importing

If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick this component, use one of the following snippets.

import '@cruglobal/cornerstone-components/components/divider/divider.js';

import './cornerstone/components/divider/divider.js';

import CsDivider from '@cruglobal/cornerstone-components/react/divider/index.js';

Attributes & Properties

Learn more about attributes and properties.

CSS Custom Properties

Learn more about CSS custom properties.