New to Telerik UI for Blazor? Start a free 30-day trial
Nest DropDownButton Items in Hierarchy
Environment
| Product | DropDownButton for Blazor |
Description
This KB answers the following questions:
- How to nest dropdown buttons and use multiple sets of dropdown items in a hierarchy?
- How to allow nested layers of hierarchical items in the Telerik DropDownButton for Blazor? The UI should look like a multi-level Menu or ContextMenu.
Solution
Here are two ways to achieve a hierarchy UI with a DropDownButton user interface.
- Indent the DropDownButton items with some empty space.
- Use a Menu component and style it to look like a DropDownButton.
Both examples below use Telerik CSS theme variables to avoid the need to hard-code custom style values.
Indent Dropdown Items
- Show parent-child relationships between the DropDownButton items by using empty space before each item text.
- (optional) Add separators between groups of DropDownButton items.
Apply padding to DropDownButton items to convey hierarchy
<TelerikDropDownButton>
<DropDownButtonContent>DropDownButton</DropDownButtonContent>
<DropDownButtonItems>
<DropDownButtonItem>Level 1 Child 1</DropDownButtonItem>
<DropDownButtonItem>Level 1 Child 2</DropDownButtonItem>
<DropDownButtonItem><span class="pad"></span>Level 2 Child 1</DropDownButtonItem>
<DropDownButtonItem><span class="pad"></span>Level 2 Child 3</DropDownButtonItem>
<DropDownButtonItem><span class="pad"></span><span class="pad"></span>Level 3 Child 1</DropDownButtonItem>
<DropDownButtonItem>Level 1 Child 3</DropDownButtonItem>
</DropDownButtonItems>
</TelerikDropDownButton>
<style>
.pad {
padding-left: var(--kendo-spacing-6);
}
</style>Use Menu Component
- Render a Menu component with a single root item.
- Define the item hierarchy with flat data or hierarchical data.
- Implement a Menu
OnClickevent handler.
Style a Menu to look like a DropDownButton
<TelerikMenu Data="@MenuItems"
Class="menu-button"
TItem="@MenuItem"
OnClick="@OnMenuItemClick">
</TelerikMenu>
<style>
.menu-button {
display: inline-block;
color: var(--kendo-color-on-base);
}
.menu-button > .k-item {
background: var(--kendo-color-base);
color: var(--kendo-color-on-base);
border: 1px solid var(--kendo-color-border);
border-radius: var(--kendo-border-radius-md);
}
.menu-button > .k-item:hover {
background: var(--kendo-color-base-hover);
}
.menu-button > .k-item.k-menu-item:active {
color: var(--kendo-color-on-base);
background: var(--kendo-color-base-active);
}
.menu-button > .k-item.k-menu-item:focus {
box-shadow: 0 0 0 2px rgba(0,0,0,.08);
}
/* optional: hide the expand arrow */
.menu-button > .k-item .k-menu-expand-arrow {
/*display: none;*/
}
.menu-button > .k-item > .k-menu-link {
padding: var(--kendo-spacing-1) var(--kendo-spacing-2);
}
</style>
@code {
private void OnMenuItemClick(MenuItem clickedItem)
{
Console.WriteLine($"The user clicked on {clickedItem.Text}");
}
private List<MenuItem> MenuItems { get; set; } = new List<MenuItem>()
{
new MenuItem()
{
Id = 1,
Text = "Menu as DropDownButton"
},
new MenuItem()
{
Id = 2,
ParentId = 1,
Text = "Level 1 Child 1"
},
new MenuItem()
{
Id = 3,
ParentId = 1,
Text = "Level 1 Child 2"
},
new MenuItem()
{
Id = 4,
ParentId = 3,
Text = "Level 2 Child 1"
},
new MenuItem()
{
Id = 5,
ParentId = 3,
Text = "Level 2 Child 2"
},
new MenuItem()
{
Id = 6,
ParentId = 5,
Text = "Level 3 Child 1"
},
new MenuItem()
{
Id = 7,
ParentId = 1,
Text = "Level 1 Child 3"
}
};
public class MenuItem
{
public int Id { get; set; }
public int? ParentId { get; set; }
public string Text { get; set; } = string.Empty;
}
}