KendoReact Layout Overview

The KendoReact Layout components enable you to create a perceptive and intuitive layout for web projects and provide for an easier navigation.

The variety of components in the Layout package gives you the tools to shape applications that are visually appealing, functional, and responsive. Their rich configuration options provide the flexibility needed to meet any project requirements.

The KendoReact Layout components are native KendoReact components built specifically for the React ecosystem. The KendoReact library is distributed through npm packages, and the Layout components are available as @progress/kendo-react-layout.

The Layout is part of KendoReact, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.Start Free Trial

AppBar

A component for displaying information, actions, branding titles and additional navigation on the current screen.

Avatar

A component for displaying images, icons or other entities.

BottomNavigation

A component for navigating among primary destinations in an application.

Breadcrumb

A component for navigating among primary destinations in an application.

Card

A component for displaying data in Card layout.

Drawer

A dismissible navigation panel.

ExpansionPanel

An expandable details-summary view component.

GridLayout

A component based on grid-layout system with rows and columns.

A multi-level component for hierarchical data.

PanelBar

A multi-level component for hierarchical data.

Splitter

A component for resizable layouts.

StackLayout

A component for aligning multiple elements in a stack.

Stepper

A component for visualizing progress via sequence of logical steps.

TabStrip

A tab collection for associated content.

TileLayout

A component for creating dashboard layouts.

The following example demonstrates all components from the Layout package in action.

Change Theme

Theme

Loading ...

Key Features

The KendoReact Layout components provide a wide and always growing range of built-in features that isn't limited by the list in this section. This developer-friendly feature set allows you to create beautiful and functional applications faster. At the same time, the KendoReact development team works constantly to improve the performance of the components and their capabilities.

Appearance

Through a selection of three gorgeous themes, you can control the colors and styles of the Layout components. If desired, you can customize these themes or use the Theme Builder to create new themes. Additionally, components like the Avatar allow you to quickly adjust their shape and dimensions in accordance with your application requirements. Read more about the appearance of the Avatar...

Globalization

The KendoReact Layout comes with globalization features that allow you to create applications that can be used all over the world. This is achieved by combining the translation of component messages with adaptation to specific cultures. Read more about the globalization of the Layout package...

Accessibility

Certain Layout components are accessible for screen readers and provide full WAI-ARIA support. Read more about the accessibility support of the TabStrip...

Some Layout components support numerous keyboard shortcuts that allow users to interact with the application. Read more about the keyboard navigation of the Menu...

Support Options

For any questions about the use of the KendoReact Layout, or any other KendoReact components, there are several support options available:

KendoReact license holders and anyone in an active trial can take advantage of the outstanding KendoReact customer support delivered by the developers who built the library. To submit a support ticket, use the Telerik support system.
The KendoReact forums are part of the free support you can get from the community and from the KendoReact team on all kinds of general issues.
KendoReact Feedback Portal and KendoReact Roadmap provide information on the features in discussion and also those planned for release.
KendoReact uses GitHub Issues as its bug tracker, and you can submit any related reports there. Also, check out the closed list.
Need something unique that is tailor-made for your project? Progress offers its Progress Services group that can work with you to create any customized solution that you might need.