How to Use the Header Separator Widget

The Header Separator widget is a simple, vertical divider designed specifically for use inside headers. Unlike the standard Separator widget, this version is always vertical and focuses on one clear purpose: visually separating elements placed next to each other in the header.

It is intentionally minimal, making it ideal for compact header layouts where clarity and balance matter.

What the Header Separator Is Used For

Use the Header Separator widget to:

• Visually separate header elements placed side by side
• Create clear distinction between navigation and utility items
• Improve readability in dense headers
• Add structure without adding text or extra UI elements

Common use cases include:

• Separating the menu from buttons or icons
• Dividing login/profile or cart icons from navigation
• Adding a subtle divider between groups of actions
• Improving visual balance in headers with many elements

Adding a Separator to the Header

To add a Header Separator:

1. Open Web Studio
2. Enable and edit the Header
3. Open the Widget Panel
4. Drag the Separator widget into a header column

The separator will always appear as a vertical line, adapting to the height of surrounding header content.

Separator Settings

The Header Separator widget has a very focused and minimal set of controls.

Size

Controls the height of the vertical separator (in pixels)

Use smaller sizes for subtle separation and larger sizes when the divider needs to align visually with taller header elements.

Color

Sets the color of the separator line

You can:

• Choose a custom color
• Use a Global Color for consistency

Design & UX Tips

• Use separators sparingly to avoid cluttering the header
• Keep the color subtle—especially in navigation-heavy headers
• Align separator height with surrounding elements for a polished look
• Combine with padding and spacing for the best visual balance
• Always test on mobile, where horizontal space is limited

When to Use (and Not Use) a Header Separator

Use it when:

• Multiple interactive elements sit close together
• The header feels visually crowded
• You want clear grouping without adding text or borders

Avoid it when:

• The header layout is already minimal
• Spacing alone is enough to separate elements
• Too many dividers would reduce clarity

Summary

The Header Separator widget allows you to:

• Add a vertical visual divider inside headers
• Separate navigation, icons, and actions cleanly
• Control height and color with minimal settings
• Improve structure without increasing visual complexity

Used thoughtfully, the Header Separator enhances clarity and balance—helping your header feel organized, intentional, and easy to scan.