Items
The Items() configuration lets you populate the Drawer from a data array instead of writing a full HTML template. Each item supports text, an icon, separator, selected and enabled state, custom CSS classes, custom HTML attributes, per-item templates, and nested child items.
When
Template()orTemplateId()is configured it takes precedence and theItems()configuration is ignored.
Basic Item Configuration
The following example shows a Drawer with a flat list of navigation items using icons and a separator.
@(Html.Kendo().Drawer()
.Name("drawer")
.Mode("push")
.Position("left")
.Items(items =>
{
items.Add().Text("Overview").Icon("home").Selected(true);
items.Add().Text("Analytics").Icon("chart-bar");
items.Add().Separator(true);
items.Add().Text("Settings").Icon("gear");
items.Add().Text("Help").Icon("question-circle");
})
.Content("<div><p id='drawer-content'>Select a section from the navigation.</p></div>")
)Disabled Items
Set Enabled(false) on any item to prevent interaction. Disabled items are rendered visually distinct and do not respond to clicks.
@(Html.Kendo().Drawer()
.Name("drawer")
.Mode("push")
.Items(items =>
{
items.Add().Text("Dashboard").Icon("grid");
items.Add().Text("Billing").Icon("dollar").Enabled(false);
items.Add().Separator(true);
items.Add().Text("Reports").Icon("chart-bar");
})
)Custom CSS Classes and HTML Attributes
Use CssClass() to apply styling hooks and Attributes() to add arbitrary HTML attributes such as data-* or title.
@(Html.Kendo().Drawer()
.Name("drawer")
.Mode("push")
.Items(items =>
{
items.Add()
.Text("Alerts")
.Icon("bell")
.CssClass("urgent-item")
.Attributes(new { data_section = "alerts", title = "View Alerts" });
items.Add().Text("Archive").Icon("folder");
})
)Per-Item Templates
When you need full control over a single item's markup without switching the whole Drawer to the top-level Template() method, provide a JavaScript handler name through TemplateHandler(). The handler receives the item data object and must return the complete <li> markup.
@(Html.Kendo().Drawer()
.Name("drawer")
.Mode("push")
.Items(items =>
{
items.Add().Text("Profile").Icon("user").TemplateHandler("profileItemTemplate");
items.Add().Text("Notifications").Icon("bell");
})
)
<script>
function profileItemTemplate(item) {
return "<li data-role='drawer-item'>" +
kendo.ui.icon({ icon: item.icon }) +
"<span class='k-item-text'>" + kendo.htmlEncode(item.text) + "</span>" +
"<span class='k-badge'>3</span>" +
"</li>";
}
</script>Nested Items
Pass a nested Items() configurator inside any item to create a multi-level navigation structure. The Drawer renders child items using the same configuration surface recursively.
@(Html.Kendo().Drawer()
.Name("drawer")
.Mode("push")
.Expanded(true)
.Items(items =>
{
items.Add().Text("Products").Icon("folder").Items(children =>
{
children.Add().Text("Inventory").Icon("list-unordered").Selected(true);
children.Add().Text("Orders").Icon("cart");
});
items.Add().Separator(true);
items.Add().Text("Customers").Icon("user");
items.Add().Text("Reports").Icon("chart-bar");
})
)