• 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
    • 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 / AppBar / Responsive Design / 
New to Kendo UI for Vue? Start a free 30-day trial

Responsive Design

The responsive layouts adjust and adapt to any device screen size, whether it is a desktop, tablet, or a mobile phone.

The below example demonstrates how the AppBar can be configured to properly display its content on different screen sizes. The responsive behavior of the component is achieved by using CSS media queries. Resize the screen to observe the responsive layout.

Example
View Source
Change Theme:

Suggested Links

Previous
Appearance
Next
Wai-Aria Support

In this article

Not finding the help you need?

Contact Support