# 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()` or `TemplateId()` is configured it takes precedence and the `Items()` configuration is ignored.
## Basic Item Configuration
The following example shows a Drawer with a flat list of navigation items using icons and a separator.
```Razor HtmlHelper
@(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("
Select a section from the navigation.
")
)
```
```Razor TagHelper
Select a section from the navigation.
```
## Disabled Items
Set `Enabled(false)` on any item to prevent interaction. Disabled items are rendered visually distinct and do not respond to clicks.
```Razor HtmlHelper
@(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");
})
)
```
```Razor TagHelper
```
## Custom CSS Classes and HTML Attributes
Use `CssClass()` to apply styling hooks and `Attributes()` to add arbitrary HTML attributes such as `data-*` or `title`.
```Razor HtmlHelper
@(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");
})
)
```
```Razor TagHelper
@{
var attributes = new { data_section = "alerts", title = "View Alerts" };
}
```
## 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 `
` markup.
```Razor HtmlHelper
@(Html.Kendo().Drawer()
.Name("drawer")
.Mode("push")
.Items(items =>
{
items.Add().Text("Profile").Icon("user").TemplateHandler("profileItemTemplate");
items.Add().Text("Notifications").Icon("bell");
})
)
```
```Razor TagHelper
```
## 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.
```Razor HtmlHelper
@(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");
})
)
```
```Razor TagHelper
```
## See Also
* [Items of the Drawer HtmlHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/drawer/index)
* [Templates of the Drawer HtmlHelper for ASP.NET Core](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/drawer/templates)
* [Hierarchy of the Drawer HtmlHelper for ASP.NET Core](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/drawer/hierarchy)
* [Server-Side API of the Drawer](https://www.telerik.com/aspnet-core-ui/documentation/api/drawer)