Since Shoelace 2.0 Code stable Pattern stable Figma ready

Divider

<sl-divider> | SlDivider

Dividers are used to visually separate or group elements.

Examples

Basic Divider 

<sl-divider></sl-divider>

sl-divider

import SlDivider from '@teamshares/shoelace/dist/react/divider';

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

Width

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

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

sl-divider style="--width: 4px;"

import SlDivider from '@teamshares/shoelace/dist/react/divider';

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

Color

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

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

sl-divider style="--color: tomato;"

import SlDivider from '@teamshares/shoelace/dist/react/divider';

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

Spacing

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

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

div style="text-align: center;"
  | Above
  sl-divider style="--spacing: 2rem;"
  | Below

import SlDivider from '@teamshares/shoelace/dist/react/divider';

const App = () => (
  <>
    Above
    <SlDivider 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.

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

div style="display: flex; align-items: center; height: 2rem;"
  | First
  sl-divider vertical="true"
  | Middle
  sl-divider vertical="true"
  | Last

import SlDivider from '@teamshares/shoelace/dist/react/divider';

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

Use dividers in menus to visually group menu items.

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

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

import SlDivider from '@teamshares/shoelace/dist/react/divider';
import SlMenu from '@teamshares/shoelace/dist/react/menu';
import SlMenuItem from '@teamshares/shoelace/dist/react/menu-item';

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

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 Import Bundler React

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.1.0/cdn/components/divider/divider.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.1.0/cdn/components/divider/divider.js';

To import this component using a bundler: 

import '@shoelace-style/shoelace/dist/components/divider/divider.js';

To import this component as a React component: 

import SlDivider from '@shoelace-style/shoelace/dist/react/divider';

Properties

Name Description Reflects Type Default
vertical Draws the divider in a vertical orientation. boolean false
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Custom Properties

Name Description Default
--color The color of the divider.
--width The width of the divider.
--spacing The spacing of the divider.

Learn more about customizing CSS custom properties.