QdsMenuSpacer

A vertical divider for separating menu items or sections in a toolbar.

Overview

qds-menu-spacer renders a single vertical rule that inherits its default visual language from the active design-system border tokens. It is intended for toolbars, menu rows, and dense control clusters where a subtle separator is more appropriate than a full component boundary.

Usage

<qds-menu-spacer></qds-menu-spacer>

You can also control the rendered dimensions directly:

<qds-menu-spacer height="24" width="1" margin="8"></qds-menu-spacer>

API Reference

Attributes

• height - Spacer height in pixels. Default: 24
• width - Spacer line width in pixels. Default: 1
• margin - Horizontal margin on both sides in pixels. Default: 8

CSS Parts

• spacer - The spacer container
• line - The vertical rule element

Styling

The spacer resolves its color from shared DS tokens by default:

qds-menu-spacer {
  --spacer-color: var(--theme-border-strong);
}

You can also tune the component with host-level custom properties:

qds-menu-spacer.toolbar-divider {
  --qds-menu-spacer-height: var(--theme-space-6);
  --qds-menu-spacer-width: 2px;
  --qds-menu-spacer-margin: var(--theme-space-3);
  --spacer-color: var(--theme-accent-secondary);
}

Example

<div class="toolbar">
  <button>File</button>
  <qds-menu-spacer></qds-menu-spacer>
  <button>Edit</button>
  <qds-menu-spacer class="toolbar-divider"></qds-menu-spacer>
  <button>View</button>
</div>