Layout Classes

We provide a comprehensive set of classes for different layout types including vertical, horizontal, and blank layouts. These classes are designed to assist in customizing the layout of your application. You can find these classes in the src/@layouts/utils/layoutClasses.ts file. You can also create and use your own custom classes for more specific layout needs.

List of classes

Vertical Layout Classes

Variable Name	Class Name
root	ts-vertical-layout
contentWrapper	ts-vertical-layout-content-wrapper
header	ts-vertical-layout-header
headerFixed	ts-vertical-layout-header-fixed
headerStatic	ts-vertical-layout-header-static
headerFloating	ts-vertical-layout-header-floating
headerDetached	ts-vertical-layout-header-detached
headerAttached	ts-vertical-layout-header-attached
headerContentCompact	ts-vertical-layout-header-content-compact
headerContentWide	ts-vertical-layout-header-content-wide
headerBlur	ts-vertical-layout-header-blur
navbar	ts-vertical-layout-navbar
navbarContent	ts-vertical-layout-navbar-content
content	ts-vertical-layout-content
contentCompact	ts-vertical-layout-content-compact
contentWide	ts-vertical-layout-content-wide
footer	ts-vertical-layout-footer
footerStatic	ts-vertical-layout-footer-static
footerFixed	ts-vertical-layout-footer-fixed
footerDetached	ts-vertical-layout-footer-detached
footerAttached	ts-vertical-layout-footer-attached
footerContentWrapper	ts-vertical-layout-footer-content-wrapper
footerContent	ts-vertical-layout-footer-content
footerContentCompact	ts-vertical-layout-footer-content-compact
footerContentWide	ts-vertical-layout-footer-content-wide

Horizontal Layout Classes

Variable Name	Class Name
root	ts-horizontal-layout
contentWrapper	ts-horizontal-layout-content-wrapper
header	ts-horizontal-layout-header
headerFixed	ts-horizontal-layout-header-fixed
headerStatic	ts-horizontal-layout-header-static
headerContentCompact	ts-horizontal-layout-header-content-compact
headerContentWide	ts-horizontal-layout-header-content-wide
headerBlur	ts-horizontal-layout-header-blur
navbar	ts-horizontal-layout-navbar
navbarContent	ts-horizontal-layout-navbar-content
navigation	ts-horizontal-layout-navigation
navigationContentWrapper	ts-horizontal-layout-navigation-content-wrapper
content	ts-horizontal-layout-content
contentCompact	ts-horizontal-layout-content-compact
contentWide	ts-horizontal-layout-content-wide
footer	ts-horizontal-layout-footer
footerStatic	ts-horizontal-layout-footer-static
footerFixed	ts-horizontal-layout-footer-fixed
footerContentWrapper	ts-horizontal-layout-footer-content-wrapper
footerContent	ts-horizontal-layout-footer-content
footerContentCompact	ts-horizontal-layout-footer-content-compact
footerContentWide	ts-horizontal-layout-footer-content-wide

Blank Layout Classes

Variable Name	Class Name
root	ts-blank-layout

How to create your custom classes?

To create your own custom layout classes, start by making a new file (say, src/utils/userLayoutClasses.ts). You can use src/@layouts/utils/layoutClasses.ts file as a reference. Here's a pattern you can follow in your custom file:

src/utils/userLayoutClasses.ts

export const verticalLayoutClasses = {
  customClass: 'custom-layout-class'
}

You may copy the code from the src/@layouts/utils/layoutClasses.ts file and paste it in the newly created file. Then, you can add your custom classes to the objects.

How to use your custom classes?

You need to import the custom classes in the file where you want to use them in the following way:

import { verticalLayoutClasses } from 'src/utils/userLayoutClasses'

<SomeComponent className={verticalLayoutClasses.customClass}>
  ...
</SomeComponent>

That's it!