Divider

Dividers are used to visually separate or group elements.

<cw-divider></cw-divider>

import CwDivider from '@cordwainer/cw-elements/dist/react/divider';

const App = () => <CwDivider />;

Examples

Width

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

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

import CwDivider from '@cordwainer/cw-elements/dist/react/divider';

const App = () => <CwDivider style={{ '--width': '4px' }} />;

Color

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

<cw-divider style="--color: tomato;"></cw-divider>

import CwDivider from '@cordwainer/cw-elements/dist/react/divider';

const App = () => <CwDivider style={{ '--color': 'tomato' }} />;

Spacing

Use the --spacing custom property to change the amount of space between the divider and it’s neighboring elements.

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

import CwDivider from '@cordwainer/cw-elements/dist/react/divider';

const App = () => (
  <>
    Above
    <CwDivider style={{ '--spacing': '2rem' }} />
    Below
  </>
);

Vertical

Add the vertical attribute to draw the divider in a vertical orientation. The divider will span the full height of its container. Vertical dividers work especially well inside of a flex container.

<div style="display: flex; align-items: center; height: 2rem;">
  First
  <cw-divider vertical></cw-divider>
  Middle
  <cw-divider vertical></cw-divider>
  Last
</div>

import CwDivider from '@cordwainer/cw-elements/dist/react/divider';

const App = () => (
  <div
    style={{
      display: 'flex',
      alignItems: 'center',
      height: '2rem'
    }}
  >
    First
    <CwDivider vertical />
    Middle
    <CwDivider vertical />
    Last
  </div>
);

Menu Dividers

Use dividers in menus to visually group menu items.

<cw-menu style="max-width: 200px;">
  <cw-menu-item value="1">Option 1</cw-menu-item>
  <cw-menu-item value="2">Option 2</cw-menu-item>
  <cw-menu-item value="3">Option 3</cw-menu-item>
  <cw-divider></cw-divider>
  <cw-menu-item value="4">Option 4</cw-menu-item>
  <cw-menu-item value="5">Option 5</cw-menu-item>
  <cw-menu-item value="6">Option 6</cw-menu-item>
</cw-menu>

import CwDivider from '@cordwainer/cw-elements/dist/react/divider';
import CwMenu from '@cordwainer/cw-elements/dist/react/menu';
import CwMenuItem from '@cordwainer/cw-elements/dist/react/menu-item';

const App = () => (
  <CwMenu style={{ maxWidth: '200px' }}>
    <CwMenuItem value="1">Option 1</CwMenuItem>
    <CwMenuItem value="2">Option 2</CwMenuItem>
    <CwMenuItem value="3">Option 3</CwMenuItem>
    <cw-divider />
    <CwMenuItem value="4">Option 4</CwMenuItem>
    <CwMenuItem value="5">Option 5</CwMenuItem>
    <CwMenuItem value="6">Option 6</CwMenuItem>
  </CwMenu>
);

Tailwind users

Using TailwindCSS with Cordwainer Elements may override divider styles, making them invisible. As a workaround, add this to your Tailwind config file.

@layer base {
  cw-divider:not([vertical]) {
    border-top: solid var(--width) var(--color);
  }

  cw-divider[vertical] {
    border-left: solid var(--width) var(--color);
  }
}

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

<script type="module" src="https://cdn.jsdelivr.net/npm/@cordwainer/cw-elements@1.1.1/cdn/components/divider/divider.js"></script>

import 'https://cdn.jsdelivr.net/npm/@cordwainer/cw-elements@1.1.1/cdn/components/divider/divider.js';

import '@cordwainer/cw-elements/dist/components/divider/divider.js';

import CwDivider from '@cordwainer/cw-elements/dist/react/divider';

Properties

Learn more about attributes and properties.

Custom Properties

Learn more about customizing CSS custom properties.