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

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { HashRouter, Switch, Route } from 'react-router-dom';

import { Paris, Rome, Berlin, Madrid } from './Content.jsx';
import DrawerContainer from './DrawerContainer.jsx';

ReactDOM.render(
    <React.Fragment>
    <HashRouter>
        <DrawerContainer>
            <Switch>
                <Route exact={true} path="/" component={Paris} />
                <Route exact={true} path="/rome" component={Rome} />
                <Route exact={true} path="/berlin" component={Berlin} />
                <Route exact={true} path="/madrid" component={Madrid} />
            </Switch>
        </DrawerContainer>
    </HashRouter>
    <style>
        {`my-app { padding: 0; }
        .k-drawer-content { padding: 20px; }
        .k-drawer-container {
            position: fixed;
            width: 100%;
            height: 100%;
        }
        .k-drawer-item {
            align-items: center;
            user-select: none;
        }
        .weather {
            margin: 0 auto 30px;
            text-align: center;
        }
        .weather-icon {
            display: block;
            margin: 30px auto 10px;
            width: 128px;
            height: 128px;
        }
        .k-drawer-container .k-drawer-items .k-icon {
            font-size: 20px;
            margin-right: 16px;
            height: 20px;
        }
        .custom-toolbar {
            width: 100%;
            background-color: #f6f6f6;
            line-height: 10px;
            border-bottom: inset;
            border-bottom-width: 1px;
            padding: 3px 8px;
            color: #656565;
        }
        .title {
            margin-left: 20px;
            font-weight: bold;
            font-size: 17px;
        }
        .sunny {
            background: url('https://demos.telerik.com/kendo-ui/content/web/tabstrip/weather.png') transparent no-repeat 0 0;
        }
        .cloudy {
            background: url('https://demos.telerik.com/kendo-ui/content/web/tabstrip/weather.png') transparent no-repeat -128px 0;
        }
        .item-descr {
            margin-top: -5px;
        }
        .item-descr-wrap > span {
            font-size: 70%;
        }
        .item-descr-wrap {
            display: flex;
            flex-direction: column;
        }
        .flag {
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            background-color: transparent;
        }
        .france-flag {
            background-image: url('https://demos.telerik.com/kendo-ui/content/web/drawer/france-flag.png');
        }
        .spain-flag {
            background-image: url('https://demos.telerik.com/kendo-ui/content/web/drawer/spain-flag.png');
        }
        .italy-flag {
            background-image: url('https://demos.telerik.com/kendo-ui/content/web/drawer/italy-flag.png');
        }
        .germany-flag {
            background-image: url('https://demos.telerik.com/kendo-ui/content/web/drawer/germany-flag.png');
        }`}
    </style>
    </React.Fragment>,
    document.querySelector('my-app')
);

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.

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { HashRouter, Switch, Route } from 'react-router-dom';

import { Education, Food, JapaneseFood, ItalianFood, Travel, Europe, NorthAmerica } from './Content.jsx';
import DrawerContainer from './DrawerContainer.jsx';

ReactDOM.render(
    <React.Fragment>
        <HashRouter>
            <DrawerContainer>
                <Switch>
                    <Route exact={true} path="/" component={Education} />
                    <Route exact={true} path="/food" component={Food} />
                    <Route exact={true} path="/food/japanese" component={JapaneseFood} />
                    <Route exact={true} path="/food/italian" component={ItalianFood} />
                    <Route exact={true} path="/travel" component={Travel} />
                    <Route exact={true} path="/travel/europe" component={Europe} />
                    <Route exact={true} path="/travel/america" component={NorthAmerica} />
                </Switch>
            </DrawerContainer>
        </HashRouter >
        <style>
            {`my-app {
                padding: 0;
            }
            .title {
                margin-left: 20px;
                font-weight: bold;
                font-size: 17px;
            }
            .custom-toolbar {
                width: 100%;
                background-color: #f6f6f6;
                line-height: 10px;
                border-bottom: inset;
                border-bottom-width: 1px;
                padding: 3px 8px;
                color: #656565;
            }
            .k-drawer-container {
                height: calc(100vh - 43px);
            }
            .k-drawer-item {
                user-select: none;
            }
            .k-drawer-item .k-icon {
                font-size: 20px;
            }
            .k-drawer-content {
                padding: 10px;
            }
            .k-card-image {
                max-height: 240px;
            }`}
        </style>
    </React.Fragment>,
    document.querySelector('my-app')
);