@@include("../partials/head.html")
@@include("../partials/doc-navbar.html")
@@include("../partials/doc-sidenav.html")

# Offcanvas

Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.

## Offcanvas components

Below is an offcanvas example that is shown by default (via `.show` on `.offcanvas`). Offcanvas includes support for a header with a close button and an optional body class for some initial `padding`. We suggest that you include offcanvas headers with dismiss actions whenever possible, or provide an explicit dismiss action.

## Offcanvas

Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.

     <!-- offcanvas -->
                            <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas"
                              aria-labelledby="offcanvasLabel">
                            <div class="offcanvas-header">
                            <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
                            <button type="button"
                              class="btn-close text-reset" data-bs-dismiss="offcanvas"
                              aria-label="Close"></button>
                            </div>
                            <div class="offcanvas-body">
                            Content for the offcanvas goes here. You can place just about any Bootstrap component or custom
                            elements here.
                            </div>
                            </div>

## Live demo

Use the buttons below to show and hide an offcanvas element via JavaScript that toggles the `.show` class on an element with the `.offcanvas` class.

Link with href

##### Offcanvas

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

     <!-- live demo -->
                            <a class="btn
                                btn-primary" data-bs-toggle="offcanvas"
                              href="#offcanvasExample" role="button"
                              aria-controls="offcanvasExample">
                            Link with href
                            </a>
                            <button class="btn
                                btn-primary" type="button"
                              data-bs-toggle="offcanvas"
                              data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
                            Button with data-bs-target
                            </button>

                            <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
                            <div class="offcanvas-header">
                            <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
                            <button type="button"
                              class="btn-close text-reset" data-bs-dismiss="offcanvas"
                              aria-label="Close"><i class="fe
                                fe-x-circle "></i></button>
                            </div>
                            <div class="offcanvas-body">
                            <div>
                            Some text as placeholder. In real life you can have the elements you have chosen. Like, text,
                            images, lists, etc.
                            </div>
                            <div class="dropdown mt-3">
                            <button class="btn
                                btn-secondary dropdown-toggle" type="button"
                              id="dropdownMenuButton" data-bs-toggle="dropdown">
                            Dropdown button
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <li><a class="dropdown-item" href="#">Action</a></li>
                            <li><a class="dropdown-item" href="#">Another action</a></li>
                            <li><a class="dropdown-item" href="#">Something else here</a></li>
                            </ul>
                            </div>
                            </div>
                            </div>

## Placement

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

- `.offcanvas-start` places offcanvas on the left of the viewport (shown above)
- `.offcanvas-end` places offcanvas on the right of the viewport
- `.offcanvas-top` places offcanvas on the top of the viewport
- `.offcanvas-bottom` places offcanvas on the bottom of the viewport

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

##### Offcanvas top

...

     <!-- placement top -->
                            <button class="btn
                                btn-primary" type="button"
                              data-bs-toggle="offcanvas"
                              data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>
                            <div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
                            <div class="offcanvas-header">
                            <h5 id="offcanvasTopLabel">Offcanvas top</h5>
                            <button type="button"
                              class="btn-close text-reset" data-bs-dismiss="offcanvas"
                              aria-label="Close"></button>
                            </div>
                            <div class="offcanvas-body">
                            ...
                            </div>
                            </div>

##### Offcanvas right

...

                             <!-- placement
                                  on bottom -->
                                <button class="btn
                                btn-primary" type="button"
                              data-bs-toggle="offcanvas"
                              data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>
                            <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
                            <div class="offcanvas-header">
                            <h5 id="offcanvasRightLabel">Offcanvas right</h5>
                            <button type="button"
                              class="btn-close text-reset" data-bs-dismiss="offcanvas"
                              aria-label="Close"></button>
                            </div>
                            <div class="offcanvas-body">
                            ...
                            </div>
                            </div>

##### Offcanvas bottom

...

     <!-- placement on right
                              -->
                            <button class="btn
                                btn-primary" type="button"
                              data-bs-toggle="offcanvas"
                              data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>
                            <div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
                            <div class="offcanvas-header">
                            <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
                            <button type="button"
                              class="btn-close text-reset" data-bs-dismiss="offcanvas"
                              aria-label="Close"><i class="fe
                                fe-x-circle "></i></button>
                            </div>
                            <div class="offcanvas-body small">
                            ...
                            </div>
                            </div>

## 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

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

##### Offcanvas with backdrop

.....

##### Backdroped with scrolling

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

     <!-- breakdrop -->
                            <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-primary" type="button"
                              data-bs-toggle="offcanvas"
                              data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable backdrop (default)</button>
                            <button class="btn
                                btn-primary" type="button"
                              data-bs-toggle="offcanvas"
                              data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>
                            <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" 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>Try scrolling the rest of the page to see this
                            option in action.</p>
                            </div>
                            </div>
                            <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
                            <div class="offcanvas-header">
                            <h5 class="offcanvas-title" 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>.....</p>
                            </div>
                            </div>
                            <div class="offcanvas offcanvas-start" data-bs-scroll="true"
                              tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
                            <div class="offcanvas-header">
                            <h5 class="offcanvas-title" 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>Try scrolling the rest of the page to see this
                            option in action.</p>
                            </div>
                            </div>

@@include("../partials/buy-template.html") @@include("../partials/scripts.html")