Edit this page

Create Multicolumn Menu

The default arrangement of the items in the Popup of RadMenuItem/RadMenuGroupItem is in vertical stack. This is because the ItemsPanel of RadMenuItem/RadMenuGroupItem is a vertically oriented StackPanel. In order to achieve a different layouting of the sub items you have to change the panel, for this scenario you can use either RadWrapPanel or RadUniformGrid.

We are going to use a RadMenuGroupItem for the dropdown and set an IconTemplate to every RadMenuItem inside of it. So at first we create a Style that targets the RadMenuGroupItem and in it sets the ItemsPanel property to the desired value (in this case a vertically oriented RadWrapPanel with maximum height of 350).

<Style x:Key="MultiColumnMenuItemStyle" TargetType="telerik:RadMenuGroupItem">
    <Setter Property="ItemsPanel">
            <ItemsPanelTemplate >
                <telerik:RadWrapPanel MaxHeight="350" Orientation="Vertical" />

Apply the created style to the RadMenuGroupItem items by setting it to the ItemContainerStyle property of the desired top-level RadMenuItem.

    <telerik:RadMenuItem Header="File" />
    <telerik:RadMenuItem Header="Options" ItemContainerStyle="{StaticResource MultiColumnMenuItemStyle}">
            <telerik:RadMenuItem Header="Options 1" IconTemplate="{StaticResource IconTemplate}" IconColumnWidth="35" Height="35" />
            <telerik:RadMenuItem Header="Options 2" IconTemplate="{StaticResource IconTemplate}" IconColumnWidth="35" Height="35" />
            <!-- More Menu Items -->
            <telerik:RadMenuItem Header="Options 30" IconTemplate="{StaticResource IconTemplate}" IconColumnWidth="35" Height="35" />

Here is a snapshot of the result.

Rad Menu How To Multicolumn Menu 01

See Also

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article