Kendo UI for Vue

Vue AppBar

  • The Kendo UI for Vue AppBar provides a collection of items on a toolbar that is contextual to the page element (a content block for example).
  • Part of Kendo UI for Vue library together with other best-in-class native components for building fast and beautiful apps.
  • Comes with outstanding technical support, detailed documentation, and demos.
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • Add a Modern Layout and Navigation Element to Your Vue Apps

    New Vue Component: AppBar

    The Vue AppBar (sometimes known as a NavBar) component is a persisting contextual menu bar. It presents information and action related to a screen and is used as the main navigation element for an app or page. Convenient properties allow you to set content, position, spacing and theme. You can also decide whether you want it to be sticky or move out of view while the user scrolls.

    See the Vue AppBar demo

  • Positioning

    The Vue App bar gives you various options to determine where the component will appear and how it will behave. First, you can choose to place it at the top of the bottom of the associated content. The component will place a shadow at the bottom or top of the component depending on location. Second, you can choose fixed or sticky positions. With the former set, the component will scroll with the content. With the latter set, the component will remain pinned in its position so that it is always visible.

    See the Vue AppBar Positioning demo

  • Content Arrangement

    The Vue AppBar offers you full flexibility to define the items and the order in which they should appear in the menu. To assist with arranging the content, there are several layout components like the Section, Spacing, and Separator, which can be used to make the AppBar fit any design.

    See the Vue AppBar Content Arrangement demo

  • Appearance

    In addition to the many styling options found in the themes and color swatches included with Kendo UI for Vue, the AppBar provides an easy way to change the look of the component. You just need to set the themeColor property to light, dark, or inherit.

    See the Vue AppBar Appearance demo

  • Responsive Design

    The Vue AppBar component can adhere to any responsive design rules you provide. This includes support for common responsive design tactics like using CSS media queries to customize what should be displayed and when as the Vue application and the AppBar component are being resized.

    See the Vue AppBar Responsive Design demo


Get Started with Kendo UI for Vue

Kendo UI