Dashboard

Quick Tips

You may remove all IDs or class names that contain _dm-; they are only used for demonstration.

Layouts

Fluid Layout	Remove the `.boxed-layout` and `.centered-layout` classes from the `body`.
Centered Layout	Add a class `.centered-layout` to the `body`.
Boxed Layout	Add a class `.boxed-layout` to the `body`.
Boxed Layout with a background image	Add a background image to the `body`. `<body class="boxed-layout" style='background-image: url("path_to_img/image.jpg");'> .. .. </body>` Or it could be in your custom class. `.bg-img { background-image: url("path_to_img/image.jpg"); }` Or use a CSS variable `.bg-img { --nf-boxed-layout-bg-image: url("path_to_img/image.jpg"); }` `<body class="boxed-layout bg-img"> .. .. </body>`

Colors

You can switch between light and dark color modes by modifying the data-bs-theme in the <html> element.
Also you can change the color scheme using the data-scheme.

<html lang="en" data-bs-theme="light" data-scheme="navy">

<html lang="en" data-bs-theme="dark" data-scheme="lime">

There are currently 12 color schemes available for use.

`gray`	`violet`	`cherry`
`navy`	`orange`	`coffee`
`ocean`	`teal`	`pear`
`lime`	`corn`	`night`

Creating a Toggle component for color mode is simple: adding a class .mode-switcher to the select, checkbox, or radio buttons.
For more details and examples, please visit the documentation.

Select

Checkbox

Dark Mode

Radio buttons

Light Mode

Dark Mode

Themes

Expanded header	Add a class `.tm--expanded-hd` to the `#root`.
Fair header	Add a class `.tm--fair-hd` to the `#root`.
Full header	Add a class `.tm--full-hd` to the `#root`.
Primary nav	Add a class `.tm--primary-mn` to the `#root`.
Brand	Add a class `.tm--primary-brand` to the `#root`.
Tall header	Add a class `.tm--tall-hd` to the `#root`.

Header

Sticky header	Add a class `.hd--sticky` to the `#root`.
Expanded header	Add a class `.tm--expanded-hd` to the `#root`.
Expanded header with overlapping content.	Add a class `.overlapping` to the `#content > .content__header`.
Disable rounded header.	Add a class `.rounded-0` to the `#content > .content__header`.

Navigation

Max navigation by default	Add a class `.mn--max` to the `#root`.
Min navigation by default	Add a class `.mn--min` to the `#root`.
OffCanvas navigation with PUSH mode by default	Add a class `.mn--push` to the `#root`.
OffCanvas navigation with SLIDE mode by default	Add a class `.mn--slide` to the `#root`.
OffCanvas navigation with REVEAL mode by default	Add a class `.mn--slide` to the `#root`.
Sticky navigation	Add a class `.mn--sticky` to the `#root`.
Create a ToggleButton for navigation	Add a class `.nav-toggler` to the button. Example :

Sidebar

Disable sidebar backdrop	Add a class `.sb--bd-0` to the `#root`.
Static position	Add a class `.sb--static` to the `#root`.
Stuck sidebar as the default mode	Add a class `.sb--stuck` to the `#root`.
Unite sidebar as the default mode	Add a class `.sb--unite` to the `#root`.
Pinned sidebar as the default mode	Add a class `.sb--pinned` to the `#root`.
Toggle visibility	Toggle the class `.sb--show` in the `#root`.
Create a ToggleButton for Sidebar	Add a class `.sidebar-toggler` to the button. Example :

Animations

Add the following class to the body to change the animation transition.

Transition function name	Class name
In Quart	`.in-quart`
Out Quart	`.out-quart`
In Back	`.in-back`
Out Back	`.out-back`
In Out Back	`.in-out-back`
easeInOutBack	`.easeInOutBack`
steps	`.steps`
jumping	`.jumping`
rubber	`.rubber`

Your content here

Quick Tips

Layouts

Colors

Select

Checkbox

Radio buttons

Themes

Header

Navigation

PUSH

SLIDE

REVEAL

Sidebar

Animations

Tips on this page :

Dashboard

Your content here

Quick Tips

Layouts

Colors

Select

Checkbox

Radio buttons

Themes

Header

Navigation

PUSH

SLIDE

REVEAL

Sidebar

Animations

Tips on this page :

Pages

Mailbox

News