#### Offcanvas

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.

##### List

- Nemo enim ipsam voluptatem quia aspernatur
- Neque porro quisquam est, qui dolorem
- Quis autem vel eum iure qui in ea

- At vero eos et accusamus et iusto odio dignissimos
- Et harum quidem rerum facilis
- Temporibus autem quibusdam et aut officiis

                                                            <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"></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>
                                                                    <h5 class="mt-3">List</h5>
                                                                    <ul class="ps-3">
                                                                        <li class="">Nemo enim ipsam voluptatem quia aspernatur</li>
                                                                        <li class="">Neque porro quisquam est, qui dolorem</li>
                                                                        <li class="">Quis autem vel eum iure qui in ea</li>
                                                                    </ul>

                                                                    <ul class="ps-3">
                                                                        <li class="">At vero eos et accusamus et iusto odio dignissimos</li>
                                                                        <li class="">Et harum quidem rerum facilis</li>
                                                                        <li class="">Temporibus autem quibusdam et aut officiis</li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </div>

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

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

#### Offcanvas Placement

Try the right and bottom examples out below.

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

##### Offcanvas right

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

##### Offcanvas bottom

...

                                                            <ul>
                                                                <li><code>.offcanvas-start</code> places offcanvas on the left of the viewport (shown above)</li>
                                                                <li><code>.offcanvas-end</code> places offcanvas on the right of the viewport</li>
                                                                <li><code>.offcanvas-bottom</code> places offcanvas on the bottom of the viewport</li>
                                                            </ul>

                                                            <div>
                                                                <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">
                                                                        Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
                                                                    </div>
                                                                </div>

                                                                <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"></button>
                                                                    </div>
                                                                    <div class="offcanvas-body small">
                                                                        ...
                                                                    </div>
                                                                </div>
                                                            </div>

##### Settings

Customize the overall color scheme, sidebar menu, etc.

##### Color Scheme

Light Mode
Dark Mode

##### Width

Fluid
Boxed

##### Left Sidebar

Default
Light
Dark
Fixed
Condensed
Scrollable
Purchase Now