New to Kendo UI for jQuery? Download free 30-day trial
jQuery Drawer Items
- EXAMPLE
- VIEW SOURCE
-
Change Theme
meridianMeridian Theme
- Main
- Main Dark
Default Theme- Main
- Main Dark
- Nordic
- Ocean Blue
- Ocean Blue A11Y
- Purple
- Turquoise
Bootstrap Theme- Main
- Bootstrap 3
- Bootstrap 3 Dark
- Main Dark
- Nordic
- Turquoise
- Turquoise Dark
- Urban
- Vintage
Material Theme- Main
- Arctic
- Lime Dark
- Main Dark
- Material 2
- Material 2 Dark
- Nova
Classic Theme- Main
- Green
- Green Dark
- Lavender
- Lavender Dark
- Main Dark
- Metro
- Metro Dark
- Moonlight
- Opal
- Opal Dark
- Silver
- Silver Dark
- Uniform
Fluent Theme- Main
- Main Dark
Also available for:
API REFERENCEDescription
The Kendo UI for jQuery Drawer supports populating its navigation from a data array through the items configuration option. Each item can define a text label, an icon, separator behavior, and custom HTML attributes through the attr option.
In this demo, the Drawer navigation is defined entirely through the items array. The attr option is used to attach a data-id attribute to each item, which the itemClick event handler uses to show the corresponding content panel.
Key configuration options:
items.text—The label displayed next to the icon.items.icon—The name of a Kendo UI font icon.items.separator—When set totrue, renders a visual divider between groups of items.items.selected—Marks an item as initially selected.items.attr—A map of custom HTML attributes applied to the rendered item element.