Divider divider link

Full documentation: https://webawesome.com/docs/components/divider

<wa-divider> Stable Since 2.0

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.

<wa-divider></wa-divider>

Examples examples link

Width width link

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

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

Color color link

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

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

Spacing spacing link

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 orientation link

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 Flexbox or CSS Grid container.

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

If your container isn’t Flexbox or CSS Grid, you may need to set an explicit height for the divider.

Dropdown Dividers dropdown dividers link

Use dividers in dropdowns to visually group dropdown items.

<wa-dropdown style="max-width: 200px;">
  <wa-button appearance="filled" 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>

Importing importing link

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

**CDN**

Import this component directly from the CDN:

import 'https://ka-f.webawesome.com/webawesome@3.7.0/components/divider/divider.js';

**npm**

After installing Web Awesome via npm, import this component:

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

**Self-Hosted**

If you’re self-hosting Web Awesome, import this component from your server:

import './webawesome/dist/components/divider/divider.js';

**React**

To import this component for React 18 or below, use the following code:

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

Attributes & Properties attributes properties link

Learn more about attributes and properties.

CSS custom properties css custom properties link

Learn more about CSS custom properties.

Need a hand? Report a bug Ask for help