• What is KendoReact
  • Getting Started
  • Unstyled Mode
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chart Wizardnew
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Toolsupdated
    • Date Inputs
    • Date Math
    • Dialogsupdated
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBoxupdated
    • ListView
    • Map
    • Notification
    • OrgChart
    • PDF Processing
    • PDF Viewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheet
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

Custom Rendering

The Drawer enables you to customize the content of its items.

To customize the appearance of the items, use the item property of the Drawer.

The following example demonstrates how to customize the look and feel of the drawer items.

Items

Example
View Source
Change Theme:

Hierarchical Drawer

The Drawer component works with a flat structure of items by design. However many real world scenarios require a navigation with hierarchical structure.

The following example demonstrates how to achieve this by toggling the visibility of the Drawer items depending on the currently selected item.

The level property of each item sets its level of nesting beneath the parent element in the hierarchy tree.

Example
View Source
Change Theme:

In this article

Not finding the help you need?