# Drawer Data Binding

This article explains the how to provide data to a Drawer component so it renders items for you, the properties related to data binding and their results.

For details on Value Binding and Data Binding, and the differences between them, see the [Data Binding vs Value Binding](https://www.telerik.com/blazor-ui/documentation/common-features/data-binding/overview#data-binding-vs-value-binding) section.

This article has the following sections:

* The available (bindable) [features of a drawer item](https://www.telerik.com/blazor-ui/documentation/components/drawer/data-bind#drawer-item-features).
* How to match fields in the model with the drawer item [data bindings](https://www.telerik.com/blazor-ui/documentation/components/drawer/data-bind#data-bindings).
* [Example](https://www.telerik.com/blazor-ui/documentation/components/drawer/data-bind#example-data-binding-to-non-default-field-names) of using non-default field names for data binding.

## Drawer Item Features

The drawer items provide the following features that you control through the corresponding fields in their data binding:

* `Text` - the text that will be shown on the item.
* `Icon` - the [Telerik Font or SVG icon](https://www.telerik.com/blazor-ui/documentation/common-features/icons) that will be rendered in the item. Read more in the [Icons article](https://www.telerik.com/blazor-ui/documentation/components/breadcrumb/icons).
* `IconVariant` - the [SVG icon variant](https://www.telerik.com/blazor-ui/documentation/common-features/icons#use-svg-icon-variants) to use for the Drawer item icon.
* `Url` - the view the item will navigate to by generating a link.
* `Separator` - whether the item will be a separator line instead of a clickable item.

## Data Bindings

The properties of a drawer item match directly to a field of the model the drawer is bound to. You provide that relationship by providing the name of the field from which the corresponding information is present. To do this, use the properties in the main `TelerikDrawer` tag:

* TextField => Text
* IconField => Icon
* IconVariantField => IconVariant
* UrlField => Url
* SeparatorField => Separator

> tip There are default values for the field names. If your model names match the defaults, you don't have to define them in the bindings settings.

If your model field names match any of the default names, the component will try to use them. For example, a field called `Icon` will try to produce a Telerik icon out of those values and that may not be what you want. If you want to override such behaviors, you can set `IconField="someNonExistingField"`. You can read more about this [here](https://www.telerik.com/blazor-ui/documentation/knowledge-base/common-custom-font-icons-fail). This also applies to other fields too. Another example would be a field called `Url` - in case you want to perform navigation yourself through templates, you may want to set `UrlField="someFakeField"` so that the component does not navigate on its own.

> caption Default field names for drawer item bindings. If you use these, you don't have to specify them in the `TelerikDrawer` tag explicitly.

```RAZOR.skip-repl
public class DrawerItem
{
	public string Text { get; set; }
	public ISvgIcon Icon { get; set; }
	public string Url { get; set; }
	public bool Separator { get;set; }
}
```

## Example - Data Binding to Non-Default Field Names

<demo metaUrl="client/drawer/data-bind/default-fields-1/" height="420"></demo>

## See Also

* [Drawer Demos](https://demos.telerik.com/blazor-ui/drawer/overview)
* [Drawer Navigation](https://www.telerik.com/blazor-ui/documentation/components/drawer/navigation)