Skip to main content

Separator

The Separator control draws a horizontal line between menu items, giving you a way to visually group related commands. You can use it inside Menu, ContextMenu, and MenuFlyout.

Basic usage​

Place a <Separator/> element between MenuItem elements to create a dividing line:

<Menu xmlns="https://github.com/avaloniaui">
  <MenuItem Header="_File">
    <MenuItem Header="_New"/>
    <MenuItem Header="_Open..."/>
    <Separator/>
    <MenuItem Header="_Exit"/>
  </MenuItem>
</Menu>
Preview
Loading Avalonia Preview...

In the example above, the separator visually divides the file operations from the exit command.

In a context menu​

Separator works the same way inside a ContextMenu:

<TextBox xmlns="https://github.com/avaloniaui"
         Text="Right-click for options">
  <TextBox.ContextMenu>
    <ContextMenu>
      <MenuItem Header="Cut"/>
      <MenuItem Header="Copy"/>
      <MenuItem Header="Paste"/>
      <Separator/>
      <MenuItem Header="Select All"/>
    </ContextMenu>
  </TextBox.ContextMenu>
</TextBox>
Preview
Loading Avalonia Preview...

Vertical variant​

A Height of NaN and Width of 1 can be used to create a vertical separator:

<StackPanel xmlns="https://github.com/avaloniaui"
            Orientation="Horizontal">
  <RadioButton GroupName="ViewMode" Content="List" />
  <RadioButton GroupName="ViewMode" Content="Preview" />
  <Separator Height="NaN" Width="1" />
  <Button Content="Save" />
</StackPanel>
Preview
Loading Avalonia Preview...

Shorthand syntax​

You can produce the same separator line by setting a MenuItem header to "-":

<MenuItem Header="-" />

This shorthand is equivalent to using <Separator/> and can be useful when building menus from data bindings.

Styling​

You can target Separator in your styles to customize its appearance. For example, to change the line color:

<Style Selector="Separator">
  <Setter Property="Background" Value="Gray"/>
  <Setter Property="Margin" Value="4,2"/>
</Style>

See also​

On this page