Offcanvas

A hidden sidebars for settings, shopping carts, and more

Live demo

Use the buttons below to show and hide an offcanvas element

You can use a link with the href attribute, or a button with the data-bs-target attribute. In both cases, the data-bs-toggle="offcanvas" is required.

Link with href

Offcanvas

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iusto, at ab illum sed nemo labore temporibus voluptatibus reprehenderit esse animi id accusantium provident optio vitae pariatur nisi, quam saepe deserunt!

A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.

Body scrolling

Scrolling the <body> element is disabled when an offcanvas and its backdrop are visible.

Offcanvas with body scrolling

Try scrolling the rest of the page to see this option in action.

Body scrolling and backdrop

You can also enable <body> scrolling with a visible backdrop.

Backdrop with scrolling

Try scrolling the rest of the page to see this option in action.

Static backdrop

When backdrop is set to static, the offcanvas will not close when clicking outside of it.

Static offcanvas
I will not close if you click outside of me.
Wide Content

Enable wide content by adding a .offcanvas-wide-content class.

Offcanvas

Lorem ipsum dolor, sit amet consectetur adipisicing elit. At repudiandae animi optio blanditiis provident facilis? Amet, minus vero voluptas libero quam nihil repudiandae, placeat facere inventore dicta id soluta dolore.

Normal content

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Qui consequatur ipsum porro a repellat eaque exercitationem necessitatibus esse voluptate corporis.

Last Update : Today 13:54

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquid eius iure expedita! Saepe, repellendus tempora! Tempore harum facere enim quam!

Wide content

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Qui consequatur ipsum porro a repellat eaque exercitationem necessitatibus esse voluptate corporis.

Last Update : Today 13:54
Placement

There’s no default placement for offcanvas components, so you must add one of the modifier classes below.

Class Description
.offcanvas-start Places offcanvas on the left of the viewport
Offcanvas Start
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit alias sed est beatae tempora libero, quo minima iure impedit earum quibusdam magni obcaecati dolores, aperiam soluta dignissimos? In, perferendis ut?
.offcanvas-end Places offcanvas on the right of the viewport
Offcanvas End
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit alias sed est beatae tempora libero, quo minima iure impedit earum quibusdam magni obcaecati dolores, aperiam soluta dignissimos? In, perferendis ut?
.offcanvas-top Places offcanvas on the top of the viewport
Offcanvas Top
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit alias sed est beatae tempora libero, quo minima iure impedit earum quibusdam magni obcaecati dolores, aperiam soluta dignissimos? In, perferendis ut?
.offcanvas-bottom Places offcanvas on the bottom of the viewport
Offcanvas Bottom
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit alias sed est beatae tempora libero, quo minima iure impedit earum quibusdam magni obcaecati dolores, aperiam soluta dignissimos? In, perferendis ut?
Sizing

You may also choose from small and large custom offcanvas to match your design.

Class Description
.offcanvas-body-sm Make the offcanvas width 13.75rem or this equals 220px.
Small Offcanvas
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit alias sed est beatae tempora libero, quo minima iure impedit earum quibusdam magni obcaecati dolores, aperiam soluta dignissimos? In, perferendis ut?
.offcanvas-body-md Make the offcanvas width 18.75rem or this equals 300px.
Medium Offcanvas
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit alias sed est beatae tempora libero, quo minima iure impedit earum quibusdam magni obcaecati dolores, aperiam soluta dignissimos? In, perferendis ut?
.offcanvas-body-lg Make the offcanvas width 31.25rem or this equals 500px.
Large Offcanvas
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit alias sed est beatae tempora libero, quo minima iure impedit earum quibusdam magni obcaecati dolores, aperiam soluta dignissimos? In, perferendis ut?
.offcanvas-body-xl Make the offcanvas width 43.75rem or this equals 700px.
Extra Large Offcanvas
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit alias sed est beatae tempora libero, quo minima iure impedit earum quibusdam magni obcaecati dolores, aperiam soluta dignissimos? In, perferendis ut?
Fullscreen

Pop up a offcanvas that covers the user viewport.

Class Description
.offcanvas-fsv Full-screen viewport for all screens.
Full-screen Offcanvas
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit alias sed est beatae tempora libero, quo minima iure impedit earum quibusdam magni obcaecati dolores, aperiam soluta dignissimos? In, perferendis ut?
.offcanvas-fsv-sm-down Full-screen viewport when only on a small screen.
Offcanvas
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit alias sed est beatae tempora libero, quo minima iure impedit earum quibusdam magni obcaecati dolores, aperiam soluta dignissimos? In, perferendis ut?
.offcanvas-fsv-md-down Full-screen viewport when the screen is smaller than a medium screen.
Offcanvas
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit alias sed est beatae tempora libero, quo minima iure impedit earum quibusdam magni obcaecati dolores, aperiam soluta dignissimos? In, perferendis ut?
.offcanvas-fsv-lg-down Full-screen viewport when the screen is smaller than a large screen.
Offcanvas
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit alias sed est beatae tempora libero, quo minima iure impedit earum quibusdam magni obcaecati dolores, aperiam soluta dignissimos? In, perferendis ut?
.offcanvas-fsv-xl-down Full-screen viewport when the screen is smaller than an extra large screen.
Offcanvas
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit alias sed est beatae tempora libero, quo minima iure impedit earum quibusdam magni obcaecati dolores, aperiam soluta dignissimos? In, perferendis ut?
.offcanvas-fsv-xxl-down Full-screen viewport when the screen is smaller than an XXL screen.
Offcanvas
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit alias sed est beatae tempora libero, quo minima iure impedit earum quibusdam magni obcaecati dolores, aperiam soluta dignissimos? In, perferendis ut?
Nifty
Pages
Profile Search Result FAQ Screen Lock Maintenance Invoices Disabled Item
Mailbox
Inbox 14 Read Messages Compose Template
News
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic dolore unde autem, molestiae eum laborum aliquid at commodi cum? Blanditiis.
Data Backup 40%
Current usage of disks for backups.
Support Have any questions ? please don't hesitate to ask.
Security Our devices are secure and up-to-date.
Location From our location up here, we kept in close touch.
thumbnails
thumbnails
thumbnails
thumbnails
Browse Gallery
Notifications
Your storage is full Local storage is nearly full.
Writing a New Article Wrote a news article for the John Mike
Comment sorting NEW
You have 1,256 unsorted comments.
Profile Picture
Lucy Sent you a message 30 minutes ago
Profile Picture
Jackson Sent you a message 1 hours ago
Show all Notifications
Profile Picture
Aaron Chavez
aaron_chavez@example.com

17

New orders

You have new orders
Today Earning $578
Tax - $28
Total Earning $6,578
Messages 14 Profile Settings Lock screen Logout

Background Images

Add an image to replace the solid background color
Blurred
Background Image Background Image Background Image Background Image Background Image Background Image Background Image Background Image Background Image Background Image Background Image Background Image Background Image Background Image Background Image Background Image
Polygon & Geometric
Background Image Background Image Background Image Background Image Background Image Background Image Background Image Background Image Background Image Background Image Background Image Background Image Background Image Background Image Background Image Background Image
Abstract
Background Image Background Image Background Image Background Image Background Image Background Image Background Image Background Image Background Image Background Image Background Image Background Image Background Image Background Image Background Image Background Image

Layouts

Layouts
Transitions
Header
Additional Offcanvas

Select the offcanvas placement.

Direction

Sidebars

Navigation
Sidebar

Colors

Modes
Color Schemes
Expanded Header
Fair Header
Full Header
Primary Nav
Brand
Tall Header
Miscellaneous
Scrollbars

Hides native scrollbars and creates custom styleable overlay scrollbars.

Offcanvas Header
Content Here

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente eos nihil earum aliquam quod in dolor, aspernatur obcaecati et at. Dicta, ipsum aut, fugit nam dolore porro non est totam sapiente animi recusandae obcaecati dolorum, rem ullam cumque. Illum quidem reiciendis autem neque excepturi odit est accusantium, facilis provident molestias, dicta obcaecati itaque ducimus fuga iure in distinctio voluptate nesciunt dignissimos rem error a. Expedita officiis nam dolore dolores ea. Soluta repellendus delectus culpa quo. Ea tenetur impedit error quod exercitationem ut ad provident quisquam omnis! Nostrum quasi ex delectus vero, facilis aut recusandae deleniti beatae. Qui velit commodi inventore.