Offcanvas

The Offcanvas component allows you to toggle content that slides in from different sides of the screen. It's ideal for creating navigation menus, sidebars, and panels. Offcanvas can appear from the left, right, top, or bottom and supports both static and scrollable content.

Basic Usage #

Below is a basic example of how to use the Offcanvas component. It includes a button that triggers an Offcanvas menu from the left, with options for buttons, lists, and more.

                    
offcanvas
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A tenetur vel corrupti? Maxime, fugiat temporibus harum
btn
Dropdown button
Action
Another action
Something else here
                    

                        
                        
HTML
                        
                    
                    <div class="offcanvas-static offcanvas-scroll offcanvas-backdrop mb-2">
    <div class="px-2 py-1 btn btn-primary">offcanvas</div>
    <div class="backdrop"></div>
    <div class="offcanvas-left">
        <div class="offcanvas-close">
            <i class="fa-solid fa-close on-primary-color icon-medium"></i>
        </div>
        <p class="mb-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A tenetur vel corrupti? Maxime, fugiat temporibus harum</p>
        <button class="px-2 py-1 btn btn-secondary on-primary-color mb-1">btn</button>
        <div class="dropdown dropdown-bottom">
            <div class="px-2 py-1 btn btn-secondary on-primary-color gap-1">Dropdown button
                <i class="fa-solid fa-chevron-down"></i>
            </div>
            <ul class="bg-secondary-color on-primary-color all-border-small px-1">
                <li>
                    <a href="#">Action</a>
                </li>
                <li>
                    <a href="#">Another action</a>
                </li>
                <li>
                    <a href="#">Something else here</a>
                </li>
            </ul>
            </div>
    </div>
</div>
                

Configuration Options #

The Offcanvas component comes with several options for customization:

Option	Description
offcanvas-scroll	Enables scrolling inside the Offcanvas panel. Useful for large content areas.
offcanvas-no-scroll	Disables scrolling inside the Offcanvas panel, keeping the content fixed.
offcanvas-left / offcanvas-right	Controls whether the Offcanvas appears from the left or right side of the screen.
offcanvas-top / offcanvas-bottom	Allows the Offcanvas to slide in from the top or bottom of the screen.
offcanvas-backdrop	Adds a backdrop behind the Offcanvas when it is opened, giving focus to the panel.

Examples #

Left and Right Offcanvas

In this example, the Offcanvas slides in from both the left and right sides of the screen.

                    

                    

                        
                        
HTML
                        
                    
                    <div class="offcanvas-static offcanvas-no-scroll offcanvas-backdrop">
    <div id="offcanvasCheck3" class="btn btn-danger">Offcanvas Left and Right</div>
    <div class="backdrop"></div>
    <div class="offcanvas-left">
        <div class="offcanvas-close">
            <i class="fa-solid fa-close on-primary-color icon-medium"></i>
        </div>
        <p>lorem ipsum</p>
    </div>
    <div class="offcanvas-right">
        <div class="offcanvas-close">
            <i class="fa-solid fa-close on-primary-color icon-medium"></i>
        </div>
        <p>lorem ipsum</p>
    </div>
</div>
                

Top and Bottom Offcanvas

In this example, the Offcanvas appears from the top and bottom of the screen.

                    

                    

                        
                        
HTML
                        
                    
                    <div class="offcanvas-static offcanvas-no-scroll">
    <div id="offcanvasCheck2" class="btn btn-outline-success">Offcanvas Top and Bottom</div>
    <div class="backdrop"></div>
    <div class="offcanvas-top">
        <div class="offcanvas-close">
            <i class="fa-solid fa-close on-primary-color icon-medium"></i>
        </div>
        <p>lorem ipsum</p>
    </div>
    <div class="offcanvas-bottom d-none">
        <div class="offcanvas-close">
            <i class="fa-solid fa-close on-primary-color icon-medium"></i>
        </div>
        <p>lorem ipsum</p>
    </div>
</div>