← Back to Components

QdsMenuSpacer

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

Overview

The qds-menu-spacer component is a custom element that renders a vertical line, used to visually separate menu items or sections within a toolbar or similar interface. It provides customizable height, width, and margin.

Usage

To use the qds-menu-spacer component, include it in your HTML:

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

API Reference

Attributes

• height - The height of the spacer in pixels (default: 24).
• width - The width of the spacer line in pixels (default: 1).
• margin - The horizontal margin on both sides in pixels (default: 8).

CSS Parts

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

Example

<qds-menu-spacer height="32" width="2" margin="12"></qds-menu-spacer>