Activity Stream
Report-Fix / Update

Add 3 files to Tasks

Monday , 4:24 PM
Project Status

Marked Design as Completed

Monday , 3:00 PM
UI
Larkon Application UI v2.0.0 Latest

Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.

Monday , 2:10 PM
avatar-5
Alex Smith Attached Photos
Monday 1:00 PM
avatar-5
Rebecca J. added a new team member

Added a new member to Front Dashboard

Monday 10:00 AM
Achievements

Earned a " Best Product Award"

Monday 9:30 AM
View All
Theme Settings
Color Scheme
Topbar Color
Menu Color
Sidebar Size
Default Buttons#

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

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

html
                                            
                                                <div class="button-list">
                                                    <a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
                                                        Link with href
                                                    </a>
                                                    <button class="btn btn-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample"> 
                                                        Button with data-bs-target
                                                    </button>
                                                </div>


                                                <!-- default offcanvas -->
                                                <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
                                                    <div class="offcanvas-header">
                                                        <h5 class="offcanvas-title mt-0" id="offcanvasExampleLabel">Offcanvas</h5>
                                                        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                                                    </div>
                                                    <div class="offcanvas-body">
                                                        <p>
                                                            Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
                                                        </p>
                                                        <div class="dropdown mt-3">
                                                            <button class="btn btn-primary dropdown-toggle" type="button" id="defaultDropdownMenuButton" data-bs-toggle="dropdown">
                                                                Dropdown button
                                                            </button>
                                                            <ul class="dropdown-menu" aria-labelledby="defaultDropdownMenuButton">
                                                                <li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
                                                                <li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
                                                                <li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>                                                         
                                            
                                        
Static Backdrop #

Scrolling the <body> element is disabled when an offcanvas and its backdrop are visible. Use the data-bs-scroll attribute to toggle <body> scrolling and data-bs-backdrop to toggle the backdrop.

Colored with scrolling

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

Offcanvas with backdrop

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

Backdroped with scrolling

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

html
                                            
                                                <div class="button-list">
                                                    <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable Body Scrolling</button>
                                                    <button class="btn btn-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable Backdrop (Default)</button>
                                                    <button class="btn btn-success" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable Both Scrolling & Backdrop</button>
                                                </div>

                                                <!-- scrolling offcanvas -->
                                                <div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
                                                    <div class="offcanvas-header">
                                                        <h5 class="offcanvas-title mt-0" id="offcanvasScrollingLabel">Colored with scrolling</h5>
                                                        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                                                    </div>
                                                    <div class="offcanvas-body">
                                                        <p>
                                                            Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
                                                        </p>
                                                        <div class="dropdown mt-3">
                                                            <button class="btn btn-primary dropdown-toggle" type="button" id="scrollingDropdownMenuButton" data-bs-toggle="dropdown">
                                                                Dropdown button
                                                            </button>
                                                            <ul class="dropdown-menu" aria-labelledby="scrollingDropdownMenuButton">
                                                                <li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
                                                                <li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
                                                                <li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- backdrop offcanvas -->
                                                <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
                                                    <div class="offcanvas-header">
                                                        <h5 class="offcanvas-title mt-0" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5>
                                                        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                                                    </div>
                                                    <div class="offcanvas-body">
                                                        <p>
                                                            Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
                                                        </p>
                                                        <div class="dropdown mt-3">
                                                            <button class="btn btn-primary dropdown-toggle" type="button" id="backdropDropdownMenuButton" data-bs-toggle="dropdown">
                                                                Dropdown button
                                                            </button>
                                                            <ul class="dropdown-menu" aria-labelledby="backdropDropdownMenuButton">
                                                                <li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
                                                                <li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
                                                                <li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- both scrolling & backdrop offcanvas -->
                                                <div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
                                                    <div class="offcanvas-header">
                                                        <h5 class="offcanvas-title mt-0" id="offcanvasWithBothOptionsLabel">Backdroped with scrolling</h5>
                                                        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                                                    </div>
                                                    <div class="offcanvas-body">
                                                        <p>
                                                            Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
                                                        </p>
                                                        <div class="dropdown mt-3">
                                                            <button class="btn btn-primary dropdown-toggle" type="button" id="scrollingBackdropDropdownMenuButton" data-bs-toggle="dropdown">
                                                                Dropdown button
                                                            </button>
                                                            <ul class="dropdown-menu" aria-labelledby="scrollingBackdropDropdownMenuButton">
                                                                <li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
                                                                <li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
                                                                <li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            
                                        
Offcanvas Position #

Try the top, right, bottom and left examples out below.

  • .offcanvas-top places offcanvas on the top of the viewport
  • .offcanvas-end places offcanvas on the right of the viewport
  • .offcanvas-bottom places offcanvas on the bottom of the viewport
  • .offcanvas-start places offcanvas on the left of the viewport
Offcanvas

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

Offcanvas

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

Offcanvas

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

Offcanvas

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

html
                                            
                                                <div class="button-list">
                                                    <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#leftOffcanvas" aria-controls="leftOffcanvas">Left Offcanvas</button>
                                                    <button class="btn btn-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#rightOffcanvas" aria-controls="rightOffcanvas">Right Offcanvas</button>
                                                    <button class="btn btn-success" type="button" data-bs-toggle="offcanvas" data-bs-target="#topOffcanvas" aria-controls="topOffcanvas">Top Offcanvas</button>
                                                    <button class="btn btn-info" type="button" data-bs-toggle="offcanvas" data-bs-target="#bottomOffcanvas" aria-controls="bottomOffcanvas">Bottom Offcanvas</button>
                                                </div>

                                                <!-- left offcanvas -->
                                                <div class="offcanvas offcanvas-start" tabindex="-1" id="leftOffcanvas" aria-labelledby="leftOffcanvasLabel">
                                                    <div class="offcanvas-header">
                                                        <h5 class="offcanvas-title mt-0" id="leftOffcanvasLabel">Offcanvas</h5>
                                                        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                                                    </div>
                                                    <div class="offcanvas-body">
                                                        <p>
                                                            Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
                                                        </p>
                                                        <div class="dropdown mt-3">
                                                            <button class="btn btn-primary dropdown-toggle" type="button" id="leftDropdownMenuButton" data-bs-toggle="dropdown">
                                                                Dropdown button
                                                            </button>
                                                            <ul class="dropdown-menu" aria-labelledby="leftDropdownMenuButton">
                                                                <li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
                                                                <li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
                                                                <li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- right offcanvas -->
                                                <div class="offcanvas offcanvas-end" tabindex="-1" id="rightOffcanvas" aria-labelledby="rightOffcanvasLabel">
                                                    <div class="offcanvas-header">
                                                        <h5 class="offcanvas-title mt-0" id="rightOffcanvasLabel">Offcanvas</h5>
                                                        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                                                    </div>
                                                    <div class="offcanvas-body">
                                                        <p>
                                                            Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
                                                        </p>
                                                        <div class="dropdown mt-3">
                                                            <button class="btn btn-primary dropdown-toggle" type="button" id="rightDropdownMenuButton" data-bs-toggle="dropdown">
                                                                Dropdown button
                                                            </button>
                                                            <ul class="dropdown-menu" aria-labelledby="rightDropdownMenuButton">
                                                                <li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
                                                                <li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
                                                                <li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- top offcanvas -->
                                                <div class="offcanvas offcanvas-top" tabindex="-1" id="topOffcanvas" aria-labelledby="topOffcanvasLabel">
                                                    <div class="offcanvas-header">
                                                        <h5 class="offcanvas-title mt-0" id="topOffcanvasLabel">Offcanvas</h5>
                                                        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                                                    </div>
                                                    <div class="offcanvas-body">
                                                        <p>
                                                            Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
                                                        </p>
                                                        <div class="dropdown mt-3">
                                                            <button class="btn btn-primary dropdown-toggle" type="button" id="topDropdownMenuButton" data-bs-toggle="dropdown">
                                                                Dropdown button
                                                            </button>
                                                            <ul class="dropdown-menu" aria-labelledby="topDropdownMenuButton">
                                                                <li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
                                                                <li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
                                                                <li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- bottom offcanvas -->
                                                <div class="offcanvas offcanvas-bottom" tabindex="-1" id="bottomOffcanvas" aria-labelledby="bottomOffcanvasLabel">
                                                    <div class="offcanvas-header">
                                                        <h5 class="offcanvas-title mt-0" id="bottomOffcanvasLabel">Offcanvas</h5>
                                                        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                                                    </div>
                                                    <div class="offcanvas-body">
                                                        <p>
                                                            Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
                                                        </p>
                                                        <div class="dropdown mt-3">
                                                            <button class="btn btn-primary dropdown-toggle" type="button" id="bottomDropdownMenuButton" data-bs-toggle="dropdown">
                                                                Dropdown button
                                                            </button>
                                                            <ul class="dropdown-menu" aria-labelledby="bottomDropdownMenuButton">
                                                                <li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
                                                                <li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
                                                                <li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>                                                  
                                            
                                        
© Larkon. Crafted by Techzaa