• Introduction
  • Getting Started
  • Vue 2 End of Support
  • Native Components
    • Animation
    • Buttons
    • Chartsupdated
    • Conversational UInew
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gauges
    • Grid
    • Icons
    • Indicators
    • Inputs
    • Labels
    • Layoutupdated
      • Overview
      • Getting Started
      • ActionSheetnew
      • AppBar
      • Avatar
      • BottomNavigation
      • Card
      • ContextMenu
      • Drawer
      • ExpansionPanelnew
      • GridLayoutnew
      • Menu
      • PanelBar
      • Splitter
      • StackLayoutnew
      • Stepper
      • TabStrip
      • TileLayoutupdated
      • Wizard
      • Globalization
      • API
    • ListBox
    • ListView
    • Notification
    • PDF Processing
    • Popup
    • Progress Bars
    • Scheduler
    • ScrollView
    • Tooltip
    • TreeList
    • TreeView
    • Upload
  • Wrapper Components
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • FAQ
  • Troubleshooting
Components / Layout / API / DrawerProps / 
New to Kendo UI for Vue? Start a free 30-day trial

DrawerProps

The properties of the Kendo UI for Vue Drawer component.

NameTypeDefaultDescription

animation?

boolean | DrawerAnimation

Specifies the animation settings of the Drawer. If boolean enables or disables the default animation. Use DrawerAnimation to set slide animation with customizable duration option. Accepts a number in milliseconds.

dir?

string

Represents the dir HTML attribute. This is used to switch from LTR to RTL.

expanded?

boolean

Specifies the state of the Drawer. Defaults to false (see example).

item?

any

Overrides the default component responsible for visualizing a single item (see example).

The default Component is: DrawerItem.

items?

DrawerItemProps[]

The collection of items that will be rendered in the Drawer (see example).

mini?

boolean

Enables the mini (compact) view of the Drawer which is displayed when the component is collapsed (see example)).

miniWidth?

number

Defines the width of the Drawer when the mini view is enabled and the component is collapsed. Defaults to 50.

mode?

string

Specifies the mode in which the Drawer will be displayed. The possible values are overlay and push. Defaults to overlay (see example).

navigationContent?

Object | Function | String

Provides the option to define a custom template inside the navigational section of the Drawer component (see example). When defined, the custom template will override the default DrawerItem rendering. By default, the property is not defined.

navigationFooter?

Object | Function | String

Provides the option to define a footer in the Drawer component (see example). The footer is rendered below the Drawer Items. By default, the property is not defined.

navigationHeader?

Object | Function | String

Provides the option to define a header in the Drawer component (see example). The header is rendered above the Drawer Items. By default, the property is not defined.

onOverlayclick?

(event: any) => void

The event handler that will be fired when the overlay is clicked. Used in overlay mode only.

onSelect?

(event: DrawerSelectEvent) => void

Fires when a Drawer item is selected.

position?

string

Specifies the position of the Drawer. The possible values are start and end (see example).

tabIndex?

number

Sets the tabIndex property of the Drawer.

width?

number

Defines the width of the Drawer when it is expanded. Defaults to 240.

In this article

Not finding the help you need?

Contact Support