# Offcanvas

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

## Offcanvas components

##### Offcanvas

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

    <!-- Offcanvas components -->
     <div class="offcanvas offcanvas-start show" 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" 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>

## Body scrolling

##### Offcanvas with body scrolling

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

    <!--body scrolling-->
    <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas"
      data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body
      scrolling</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">Offcanvas with body scrolling</h5>
        <button type="button" class="btn-close" 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>

## Body scrolling and backdrop

##### Backdrop with scrolling

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

    <!--body scrolling and backdrop-->
    <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" tabindex="-1"
      id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdrop with scrolling</h5>
        <button type="button" class="btn-close" 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>

## Static backdrop

##### Offcanvas

I will not close if you click outside of me.

    <!--Static backdrop-->
    <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
      Toggle static offcanvas
    </button>

    <div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <div>
          I will not close if you click outside of me.
        </div>
      </div>
    </div>

## Dark offcanvas

##### Offcanvas

Place offcanvas content here.

    <!--dark offcanvas-->
    <div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark"
      aria-labelledby="offcanvasDarkLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark"
          aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <p>Place offcanvas content here.</p>
      </div>
    </div>

## Responsive

Resize your browser to show the responsive offcanvas toggle.

##### Responsive offcanvas

This is content within an `.offcanvas-lg` .

    <!--responsive-->
    <button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas"
      data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle
      offcanvas</button>

    <div class="alert alert-info d-none d-lg-block">Resize your browser to show the responsive
      offcanvas toggle.</div>

    <div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive"
      aria-labelledby="offcanvasResponsiveLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"
          data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <p class="mb-0">This is content within an <code>.offcanvas-lg</code>.</p>
      </div>
    </div>

## Placement - top

##### Offcanvas top

...

    <!-- placement -->
    <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 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"
          aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        ...
      </div>
    </div>

## Placement - right

##### Offcanvas right

...

     <!-- placement -->
    <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 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"
          aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        ...
      </div>
    </div>

## Placement - bottom

##### Offcanvas bottom

...

    <!-- placement -->
    <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" data-bs-dismiss="offcanvas"
          aria-label="Close"></button>
      </div>
      <div class="offcanvas-body small">
        ...
      </div>