Customization

The DropDownButton provides options for customizing the rendering and behavior of its popup and popup items.

The component enables you to:

Popup Behavior

To configure the behavior of the popup, use the animate and popupClass settings.

<style>
  .my-popup {
      font-style: oblique
  }
</style>
const items=['My Profile', 'Friend Requests', 'Account Settings', 'Support', 'Log Out'];
class App extends React.Component {
    render() {
        return (
            <div>
                <DropDownButton popupSettings={{animate: false, popupClass: 'my-popup'}} items={items} text="User Settings" />
            </div>
        );
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
)

Items Rendering

To override the default rendering of all popup items, use the itemRender property of the DropDownButton. You can override the rendering of an individual item through its render property.

const itemRender = (props) => {
    return (
        <div>
            <span className={`k-icon k-i-${props.item.icon}`} role="presentation" />
            {`action #${props.itemIndex}: ${props.item.text}`}
        </div>
    );
};

const items = [
    {text: 'To PDF', icon: 'pdfa'},
    {text: 'To Excel', icon: 'xlsa'},
    {text: 'Other', render: props => <strong>{props.item.text} {props.itemIndex}</strong>}
];
class App extends React.Component {
    render() {
        return (
            <div>
                <DropDownButton
                    itemRender={itemRender}
                    items={items}
                    text="Export"
                />
            </div>
        );
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
)
 /