Left off-canvas

An off-canvas can hold any content you want.

Close this off-canvas by clicking on the backdrop or press the close button in the upper right corner.

Some details

Width
240px
Height
100%
Body scroll
disabled
Background color
Default

Off-canvas

Off-canvas layers slide in from either the left or the right. They span the full height of the screen. You can use multiple off-canvas displays per page.

Properties

Positioning

You can place an off-canvas either on the left or the right side off the screen.

Open left off-canvas Open right off-canvas

Size

An off-canvas can have any size. Material Admin has a number of standard sizes you can choose, but you can also set the width in a style attribute for easy customization.

Size 1 Size 2 Size 3 Size 4

Some sizes as an example

Colors

Every color that is available for a card, is also available for an off-canvas.

Color 1 Color 2 Color 3 Color 4

Basic headings

Backdrop

A backdrop is a layer on top of the content. This layer is clickable so that the off-canvas is closed. You can disable the backdrop by adding data-backdrop="false".

With backdrop Without backdrop

Basic headings

MATERIAL ADMIN

A
Alex Nelson 123-123-3210
Ann Laurens 123-123-3210
J
Jessica Cruise 123-123-3210
Jim Peters 123-123-3210
M
Mabel Logan 123-123-3210
Mary Peterson 123-123-3210
Mike Alba 123-123-3210
N
Nathan Peterson 123-123-3210
P
Philip Ericsson 123-123-3210
S
Samuel Parsons 123-123-3210

Chat with Ann Laurens

Yes, it is indeed very beautiful. 10:03 pm
Did you see the changes? 10:02 pm
I just arrived at work, it was quite busy. 06:44pm

I will take look in a minute. 06:45pm
The colors are much better now.

The colors are brighter than before. I have already sent an example. This will make it look sharper. Mon
Are the colors of the logo already adapted? Last week

Right off-canvas

An off-canvas can hold any content you want.

Close this off-canvas by clicking on the backdrop or press the close button in the upper right corner.

Some details

Width
240px
Height
100%
Body scroll
disabled
Background color
Default

Size 1

An off-canvas can hold any content you want.

Close this off-canvas by clicking on the backdrop or press the close button in the upper right corner.

Some details

Width
160px
Height
100%
Body scroll
disabled
Background color
Default

Size 2

An off-canvas can hold any content you want.

Close this off-canvas by clicking on the backdrop or press the close button in the upper right corner.

Some details

Width
280px
Height
100%
Body scroll
disabled
Background color
Default

Size 3

An off-canvas can hold any content you want.

Close this off-canvas by clicking on the backdrop or press the close button in the upper right corner.

Some details

Width
400px
Height
100%
Body scroll
disabled
Background color
Default

Size 4

An off-canvas can hold any content you want.

Close this off-canvas by clicking on the backdrop or press the close button in the upper right corner.

Some details

Width
800px
Height
100%
Body scroll
disabled
Background color
Default

Color 1

Every color that is available for a card, is also available for an off-canvas.

Close this off-canvas by clicking on the backdrop or press the close button in the upper right corner.

Some details

Width
320px
Height
100%
Body scroll
disabled
Background color
Primary

Color 2

Every color that is available for a card, is also available for an off-canvas.

Close this off-canvas by clicking on the backdrop or press the close button in the upper right corner.

Some details

Width
320px
Height
100%
Body scroll
disabled
Background color
Accent (dark)

Color 3

Every color that is available for a card, is also available for an off-canvas.

Close this off-canvas by clicking on the backdrop or press the close button in the upper right corner.

Some details

Width
320px
Height
100%
Body scroll
disabled
Background color
Info

Color 4

Every color that is available for a card, is also available for an off-canvas.

Close this off-canvas by clicking on the backdrop or press the close button in the upper right corner.

Some details

Width
320px
Height
100%
Body scroll
disabled
Background color
Default (dark)

With backdrop

An off-canvas can hold any content you want.

Close this off-canvas by clicking on the backdrop or press the close button in the upper right corner.

Some details

Width
240px
Height
100%
Body scroll
disabled
Background color
Default

No backdrop

An off-canvas can hold any content you want.

Close this off-canvas by clicking on the backdrop or press the close button in the upper right corner.

Some details

Width
240px
Height
100%
Body scroll
disabled
Background color
Default