Skip to main content

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 NameClass Name
rootts-vertical-layout
contentWrapperts-vertical-layout-content-wrapper
headerts-vertical-layout-header
headerFixedts-vertical-layout-header-fixed
headerStaticts-vertical-layout-header-static
headerFloatingts-vertical-layout-header-floating
headerDetachedts-vertical-layout-header-detached
headerAttachedts-vertical-layout-header-attached
headerContentCompactts-vertical-layout-header-content-compact
headerContentWidets-vertical-layout-header-content-wide
headerBlurts-vertical-layout-header-blur
navbarts-vertical-layout-navbar
navbarContentts-vertical-layout-navbar-content
contentts-vertical-layout-content
contentCompactts-vertical-layout-content-compact
contentWidets-vertical-layout-content-wide
footerts-vertical-layout-footer
footerStaticts-vertical-layout-footer-static
footerFixedts-vertical-layout-footer-fixed
footerDetachedts-vertical-layout-footer-detached
footerAttachedts-vertical-layout-footer-attached
footerContentWrapperts-vertical-layout-footer-content-wrapper
footerContentts-vertical-layout-footer-content
footerContentCompactts-vertical-layout-footer-content-compact
footerContentWidets-vertical-layout-footer-content-wide

Horizontal Layout Classes

Variable NameClass Name
rootts-horizontal-layout
contentWrapperts-horizontal-layout-content-wrapper
headerts-horizontal-layout-header
headerFixedts-horizontal-layout-header-fixed
headerStaticts-horizontal-layout-header-static
headerContentCompactts-horizontal-layout-header-content-compact
headerContentWidets-horizontal-layout-header-content-wide
headerBlurts-horizontal-layout-header-blur
navbarts-horizontal-layout-navbar
navbarContentts-horizontal-layout-navbar-content
navigationts-horizontal-layout-navigation
navigationContentWrapperts-horizontal-layout-navigation-content-wrapper
contentts-horizontal-layout-content
contentCompactts-horizontal-layout-content-compact
contentWidets-horizontal-layout-content-wide
footerts-horizontal-layout-footer
footerStaticts-horizontal-layout-footer-static
footerFixedts-horizontal-layout-footer-fixed
footerContentWrapperts-horizontal-layout-footer-content-wrapper
footerContentts-horizontal-layout-footer-content
footerContentCompactts-horizontal-layout-footer-content-compact
footerContentWidets-horizontal-layout-footer-content-wide

Blank Layout Classes

Variable NameClass Name
rootts-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!