background

KendoReact

React AppBar

  • The React AppBar will help you include page title, logo and navigation items to offer sleek, customizable app navigation.
  • Part of the KendoReact library along with 100+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, learning resources and more!
Vue Kendoka Header
  • Full-featured React UI Navigation Component

    The React AppBar component serves as the main navigation of your application, containing navigation elements and the title of the application or current page. It allows you to add several action buttons and change available action items to ensure the perfect fit in your application. Enjoy a plethora of customization options when adding this React UI component to your applications.

    See the React AppBar demo

    React AppBar component overview
  • Positioning

    Changing the position of the KendoReact AppBar component is as easy as changing a single configuration option. The AppBar can be positioned either at the top or bottom of any React application.

    See the React AppBar Positioning demo

    React AppBar Component Positioning
  • Content Arrangement

    The KendoReact AppBar component does not come with a predefined layout. Instead, it offers React developers full flexibility to define the items and the order in which they should appear in the React AppBar component. To assist with arranging the content of the React AppBar, there are several layout components like the Section, Spacing and Separator, which can be used to make the KendoReact AppBar fit any design.

    See the React AppBar Content Arrangement demo

    React AppBar Component Content Arrangement
  • Appearance

    Beyond the three available out-of-the-box themes for KendoReact, the Default, Material, Fluent and Bootstrap themes, the React AppBar component has additional settings to help customize its appearance. These include light, dark and inherit options for the existing theme colors, which can be set through a single configuration option, or customization through CSS styles.

    See the React AppBar Appearance demo

    React AppBar Component Appearance
  • Responsive Design

    The KendoReact AppBar component can adhere to any responsive design rules provided by the React application. This includes support for common responsive design tactics like using CSS media queries to customize what should be displayed and when as the React AppBar component is being resized.

    See the React AppBar Responsive Design demo

    React AppBar Component Responsive Design

All KendoReact Components

Next Steps