Introduction
Getting Started
Vue 2 End of Support
Vue Wrappers End of Life
Native Components
- Animation
- Buttons
- Chartsupdated
- Conversational UI
- Data Query
- Data Tools
- Date Inputs
- Date Math
- Dialogs
- Drawing
- Dropdowns
- Editor
- Excel Export
- File Saver
- Form
- Gauges
- Gridupdated
- Icons
- Indicators
- Inputsupdated
- Labels
- Layout
- - Overview
  - Getting Started
  - ActionSheet
  - AppBar
  - Avatar
  - BottomNavigation
  - Card
  - ContextMenu
  - Drawer
  - - Overview
    - Expanded State
    - Display Modes
    - Positioning
    - Templates
    - Routing
    - Custom Rendering
    - Events
    - Accessibility
  - ExpansionPanel
  - GridLayout
  - Menu
  - PanelBar
  - Splitter
  - StackLayout
  - Stepper
  - TabStrip
  - TileLayout
  - 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 / Drawer / Templates /

New to Kendo UI for Vue? Start a free 30-day trial

Templates

The Drawer allows you to use templates to customize its appearance.

To customize the appearance of the items, use one of the following properties of the Drawer:

navigationHeader—Specifies the contents above the rendered items.
navigationFooter—Specifies the contents below the rendered items.
navigationContent—Completely overrides the contents of the Drawer. Allows full customization of its appearance.

Header and Footer Templates

You can add custom content above and under the rendered items of the Drawer by using the navigationHeader and the navigationFooter properties.

Example

View Source

Change Theme:

Drawer Content Template

To display custom content inside the navigation of the Drawer, use the navigationContent property.

Example

View Source

Change Theme:

Suggested Links