Divider

Dividers are used to visually separate or group elements.

<wa-divider></wa-divider>

Examples Jump to heading

Width Jump to heading

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

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

Color Jump to heading

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

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

Spacing Jump to heading

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
  <wa-divider style="--spacing: 2rem;"></wa-divider>
  Below
</div>

Orientation Jump to heading

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

<div style="display: flex; align-items: center;">
  First
  <wa-divider orientation="vertical"></wa-divider>
  Middle
  <wa-divider orientation="vertical"></wa-divider>
  Last
</div>

Dropdown Dividers Jump to heading

Use dividers in dropdowns to visually group dropdown items.

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

Attributes & Properties Jump to heading

Learn more about attributes and properties.

CSS custom properties Jump to heading

Learn more about CSS custom properties.

Importing Jump to heading

Autoloading components via projects is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.

import '@awesome.me/webawesome/dist/components/divider/divider.js';

import WaDivider from '@awesome.me/webawesome/dist/react/divider';