React AppBar

Overview

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 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 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 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 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 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 React AppBar Responsive Design demo

React AppBar Component Responsive Design

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.