Offcanvas | Cuba - Premium Admin Template By Pixelstrap

Loading...

###### Don't Miss Out! Our new update has been released.

###### Something you love is now on sale!

Buy now !

### Offcanvas

##### Initial Offcanvas

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

##### Main Offcanvas Title

###### Web Design

We build specialized websites for companies, list them on digital directories, and set up a sales funnel to boost ROI.

###### Content Marketing

Through better opportunities and knowledgeable marketing strategies, we aid business funnel. We won't only hit the target; instead, we'll aim higher and surpass the objectives.

###### PPC

Customized advertising to increase visitors and improve conversion. To increase retention, identify the correct audience and remarket to them.

###### UX Designer

The capacity to comprehend and experience other people's feelings is known as empathy. A positive consumer experience is prioritized by UX. The finest UX designers spend time studying individuals and their tendencies because of this. Designers may produce goods that genuinely engage and excite customers by having a thorough understanding of the end consumers.

    <button class="btn btn-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">Button with data-bs-target</button>
    <a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">Link with href</a>
    <div class="offcanvas offcanvas-start" id="offcanvasExample" tabindex="-1" aria-labelledby="offcanvasExampleLabel">
     <div class="offcanvas-header pb-0">
       <h5 class="offcanvas-title" id="offcanvasExampleLabel">Main Offcanvas Title</h5>
       <button class="btn-close" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
     </div>
     <div class="offcanvas-body custom-scrollbar">
       <div class="large-modal-header"><i data-feather="chevrons-right"></i>
         <h6>Web Design </h6>
       </div>
       <p class="modal-padding-space">We build specialized websites for companies, list them on digital directories, and set up a sales funnel to boost ROI.</p>
       <div class="large-modal-header"><i data-feather="chevrons-right"></i>
         <h6>Content Marketing </h6>
       </div>
       <p class="modal-padding-space">Through better opportunities and knowledgeable marketing strategies, we aid business funnel. We won't only hit the target; instead, we'll aim higher and surpass the objectives.</p>
       <div class="large-modal-header"><i data-feather="chevrons-right"></i>
         <h6>PPC </h6>
       </div>
       <p class="modal-padding-space">Customized advertising to increase visitors and improve conversion. To increase retention, identify the correct audience and remarket to them.</p>
       <div class="large-modal-header"><i data-feather="chevrons-right"></i>
         <h6>UX Designer </h6>
       </div>
       <p class="modal-padding-space">The capacity to comprehend and experience other people's feelings is known as empathy. A positive consumer experience is prioritized by UX. The finest UX designers spend time studying individuals and their tendencies because of this. Designers may produce goods that genuinely engage and excite customers by having a thorough understanding of the end consumers.</p>
     </div>
    </div>

##### Offcanvas Directions

Use`Offcanvas-*` [top/end/bottom/start] class allows you to modify the offcanvas direction.

##### Offcanvas Top

First name
Last name
Username
@
City
Country
Zip
Agree to terms and conditions

##### Offcanvas End

Email
Select Project
Project Counts
External Notes
Agree to terms and conditions

##### Offcanvas Bottom

First name
Last name
Username
@
City
Country
Zip
Agree to terms and conditions

##### Offcanvas Start

Email
Select Project
Project Counts
External Notes
Agree to terms and conditions

    <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Top Offcanvas</button>
    <div class="offcanvas offcanvas-top" id="offcanvasTop" tabindex="-1" aria-labelledby="offcanvasTopLabel">
     <div class="offcanvas-header pb-0">
       <h5 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas Top</h5>
       <button class="btn-close" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
     </div>
     <div class="offcanvas-body custom-input custom-scrollbar">
       <form class="grid grid-cols-12 gap-3">
         <div class="col-span-4 md:col-span-12">
           <label class="form-label" for="validationDefault03">First name</label>
           <input class="form-control" id="validationDefault03" type="text" value="Mark" required="">
         </div>
         <div class="col-span-4 md:col-span-12">
           <label class="form-label" for="validationDefault02">Last name</label>
           <input class="form-control" id="validationDefault02" type="text" value="Otto" required="">
         </div>
         <div class="col-span-4 md:col-span-12">
           <label class="form-label" for="validationDefaultUsername1">Username</label>
           <div class="input-group"><span class="input-group-text" id="inputGroupPrepend2">@</span>
             <input class="form-control" id="validationDefaultUsername1" type="text" aria-describedby="inputGroupPrepend2" required="">
           </div>
         </div>
         <div class="col-span-6 md:col-span-12">
           <label class="form-label" for="validationDefaultCity">City</label>
           <input class="form-control" id="validationDefaultCity" type="text" required="">
         </div>
         <div class="col-span-3 md:col-span-12">
           <label class="form-label" for="validationCountry">Country</label>
           <select class="form-select" id="validationCountry" required="">
             <option selected="" disabled="" value="">Choose...</option>
             <option>US </option>
             <option>UK </option>
             <option>Africa</option>
           </select>
         </div>
         <div class="col-span-3 md:col-span-12">
           <label class="form-label" for="validationZip">Zip</label>
           <input class="form-control" id="validationZip" type="text" required="">
         </div>
         <div class="col-span-12">
           <div class="form-check checkbox-checked">
             <input class="form-check-input" id="termsCondition4" type="checkbox" value="" required="">
             <label class="form-check-label" for="termsCondition4">Agree to terms and conditions</label>
           </div>
         </div>
         <div class="col-span-12">
           <button class="btn btn-primary" type="submit">Submit</button>
         </div>
       </form>
     </div>
    </div>
    <button class="btn btn-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Right Offcanvas</button>
    <div class="offcanvas offcanvas-end" id="offcanvasRight" tabindex="-1" aria-labelledby="offcanvasRightLabel">
     <div class="offcanvas-header pb-0">
       <h5 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas End</h5>
       <button class="btn-close" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
     </div>
     <div class="offcanvas-body custom-input custom-scrollbar">
       <form class="grid grid-cols-12 gap-3">
         <div class="col-span-12">
           <label class="form-label" for="exampleFormControlInput1">Email</label>
           <input class="form-control" id="exampleFormControlInput1" type="email" placeholder="name@example.com">
         </div>
         <div class="col-span-12">
           <label class="form-label" for="exampleFormControlInput2">Select Project</label>
           <select class="form-select" aria-label="Default select example">
             <option selected="">Select your projects</option>
             <option value="1">Project1</option>
             <option value="2">Project2</option>
             <option value="3">Project3</option>
           </select>
         </div>
         <div class="col-span-12">
           <label class="form-label" for="exampleFormControlInput3">Project Counts</label>
           <select class="form-select" aria-label="Default select example">
             <option selected="">How many projects do you make?</option>
             <option value="1">One</option>
             <option value="2">Two</option>
             <option value="3">Three</option>
           </select>
         </div>
         <div class="col-span-12">
           <label class="form-label" for="exampleFormControlTextarea1">External Notes</label>
           <textarea class="form-control" id="exampleFormControlTextarea1" rows="4"></textarea>
         </div>
         <div class="col-span-12">
           <div class="form-check checkbox-checked">
             <input class="form-check-input" id="termsCondition5" type="checkbox" value="" required="">
             <label class="form-check-label" for="termsCondition5">Agree to terms and conditions</label>
           </div>
         </div>
         <div class="col-span-12">
           <button class="btn btn-light me-2" type="submit" data-bs-dismiss="offcanvas" aria-label="Close">Cancel</button>
           <button class="btn btn-primary" type="submit">Submit</button>
         </div>
       </form>
     </div>
    </div>
    <button class="btn btn-dark" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Bottom Offcanvas</button>
    <div class="offcanvas offcanvas-bottom" id="offcanvasBottom" tabindex="-1" aria-labelledby="offcanvasBottomLabel">
     <div class="offcanvas-header pb-0">
       <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas Bottom</h5>
       <button class="btn-close" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
     </div>
     <div class="offcanvas-body custom-input custom-scrollbar">
       <form class="grid grid-cols-12 gap-3">
         <div class="col-span-4 md:col-span-12">
           <label class="form-label" for="validationFirstName">First name</label>
           <input class="form-control" id="validationFirstName" type="text" value="Mark" required="">
         </div>
         <div class="col-span-4 md:col-span-12">
           <label class="form-label" for="validationDefault0">Last name</label>
           <input class="form-control" id="validationDefault0" type="text" value="Otto" required="">
         </div>
         <div class="col-span-4 md:col-span-12">
           <label class="form-label" for="validationDefaultUsername">Username</label>
           <div class="input-group"><span class="input-group-text" id="inputGroupPrepend3">@</span>
             <input class="form-control" id="validationDefaultUsername" type="text" aria-describedby="inputGroupPrepend3" required="">
           </div>
         </div>
         <div class="col-span-6 md:col-span-12">
           <label class="form-label" for="validationCity1">City</label>
           <input class="form-control" id="validationCity1" type="text" required="">
         </div>
         <div class="col-span-3 md:col-span-12">
           <label class="form-label" for="validationDefault04">Country</label>
           <select class="form-select" id="validationDefault04" required="">
             <option selected="" disabled="" value="">Choose...</option>
             <option>US </option>
             <option>UK </option>
             <option>Africa</option>
           </select>
         </div>
         <div class="col-span-3 md:col-span-12">
           <label class="form-label" for="validationDefault05">Zip</label>
           <input class="form-control" id="validationDefault05" type="text" required="">
         </div>
         <div class="col-span-12">
           <div class="form-check checkbox-checked">
             <input class="form-check-input" id="termsCondition6" type="checkbox" value="" required="">
             <label class="form-check-label" for="termsCondition6">Agree to terms and conditions</label>
           </div>
         </div>
         <div class="col-span-12">
           <button class="btn btn-primary" type="submit">Submit</button>
         </div>
       </form>
     </div>
    </div>
    <button class="btn btn-success" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasLeft" aria-controls="offcanvasLeft">Left Offcanvas</button>
    <div class="offcanvas offcanvas-start" id="offcanvasLeft" tabindex="-1" aria-labelledby="offcanvasLeftLabel">
     <div class="offcanvas-header pb-0">
       <h5 class="offcanvas-title" id="offcanvasLeftLabel">Offcanvas Start</h5>
       <button class="btn-close" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
     </div>
     <div class="offcanvas-body custom-input custom-scrollbar">
       <form class="grid grid-cols-12 gap-3">
         <div class="col-span-12">
           <label class="form-label" for="exampleFormControlEmail">Email</label>
           <input class="form-control" id="exampleFormControlEmail" type="email" placeholder="name@example.com">
         </div>
         <div class="col-span-12">
           <label class="form-label" for="exampleFormControlInput2">Select Project</label>
           <select class="form-select" aria-label="Default select example">
             <option selected="">Select your projects</option>
             <option value="1">Project1</option>
             <option value="2">Project2</option>
             <option value="3">Project3</option>
           </select>
         </div>
         <div class="col-span-12">
           <label class="form-label" for="exampleFormControlInput3">Project Counts</label>
           <select class="form-select" aria-label="Default select example">
             <option selected="">How many projects do you make?</option>
             <option value="1">One</option>
             <option value="2">Two</option>
             <option value="3">Three</option>
           </select>
         </div>
         <div class="col-span-12">
           <label class="form-label" for="exampleFormControlTextarea2">External Notes</label>
           <textarea class="form-control" id="exampleFormControlTextarea2" rows="4"></textarea>
         </div>
         <div class="col-span-12">
           <div class="form-check checkbox-checked">
             <input class="form-check-input" id="termsCondition" type="checkbox" value="" required="">
             <label class="form-check-label" for="termsCondition">Agree to terms and conditions</label>
           </div>
         </div>
         <div class="col-span-12">
           <button class="btn btn-light me-2" type="submit" data-bs-dismiss="offcanvas" aria-label="Close">Cancel</button>
           <button class="btn btn-primary" type="submit">Submit</button>
         </div>
       </form>
     </div>
    </div>

##### Offcanvas Variations

Use`data-bs-scroll` attribute to enable `<body>` scrolling class and clicking outside of the offcanvas will not cause it to close if the backdrop is static.

##### Offcanvas Body Scrolling

###### Wed Designer

For a site to be successful, a designer must be able to communicate their ideas, chat with a firm about what they want, and inquire about the target audience.

Email
Select Project
Project Counts
External Notes
Agree to terms and conditions

##### Backdrop with Scrolling

###### Wed Designer

For a site to be successful, a designer must be able to communicate their ideas, chat with a firm about what they want, and inquire about the target audience.

Email
Select Project
Project Counts
External Notes
Agree to terms and conditions

##### Static Offcanvas

###### Wed Designer

For a site to be successful, a designer must be able to communicate their ideas, chat with a firm about what they want, and inquire about the target audience.

Email
Select Project
Project Counts
External Notes
Agree to terms and conditions

    <button class="btn btn-info" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable Body Scrolling</button>
    <div class="offcanvas offcanvas-start" id="offcanvasScrolling" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" aria-labelledby="offcanvasScrollingLabel">
     <div class="offcanvas-header pb-0">
       <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Offcanvas Body Scrolling</h5>
       <button class="btn-close" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
     </div>
     <div class="offcanvas-body custom-input">
       <h6>Wed Designer</h6>
       <p>For a site to be successful, a designer must be able to communicate their ideas, chat with a firm about what they want, and inquire about the target audience.</p>
       <form class="grid grid-cols-12 gap-3">
         <div class="col-span-12">
           <label class="form-label" for="exampleFormControlInput2">Email</label>
           <input class="form-control" id="exampleFormControlInput2" type="email" placeholder="name@example.com">
         </div>
         <div class="col-span-12">
           <label class="form-label" for="exampleFormControlInput2">Select Project</label>
           <select class="form-select" aria-label="Default select example">
             <option selected="">Select your projects</option>
             <option value="1">Project1</option>
             <option value="2">Project2</option>
             <option value="3">Project3</option>
           </select>
         </div>
         <div class="col-span-12">
           <label class="form-label" for="exampleFormControlInput3">Project Counts</label>
           <select class="form-select" aria-label="Default select example">
             <option selected="">How many projects do you make?</option>
             <option value="1">One</option>
             <option value="2">Two</option>
             <option value="3">Three</option>
           </select>
         </div>
         <div class="col-span-12">
           <label class="form-label" for="exampleFormControlTextarea3">External Notes</label>
           <textarea class="form-control" id="exampleFormControlTextarea3" rows="4"></textarea>
         </div>
         <div class="col-span-12">
           <div class="form-check checkbox-checked">
             <input class="form-check-input" id="termsCondition1" type="checkbox" value="" required="">
             <label class="form-check-label" for="termsCondition1">Agree to terms and conditions</label>
           </div>
         </div>
         <div class="col-span-12">
           <button class="btn btn-light me-2" type="submit" data-bs-dismiss="offcanvas" aria-label="Close">Cancel</button>
           <button class="btn btn-primary" type="submit">Submit</button>
         </div>
       </form>
     </div>
    </div>
    <button class="btn btn-warning" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable Both Scrolling & Backdrop</button>
    <div class="offcanvas offcanvas-start" id="offcanvasWithBothOptions" data-bs-scroll="true" tabindex="-1" aria-labelledby="offcanvasWithBothOptionsLabel">
     <div class="offcanvas-header pb-0">
       <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdrop with Scrolling</h5>
       <button class="btn-close" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
     </div>
     <div class="offcanvas-body custom-input">
       <h6>Wed Designer</h6>
       <p>For a site to be successful, a designer must be able to communicate their ideas, chat with a firm about what they want, and inquire about the target audience.</p>
       <form class="grid grid-cols-12 gap-3">
         <div class="col-span-12">
           <label class="form-label" for="exampleFormControlInput3">Email</label>
           <input class="form-control" id="exampleFormControlInput3" type="email" placeholder="name@example.com">
         </div>
         <div class="col-span-12">
           <label class="form-label" for="exampleFormControlInput2">Select Project</label>
           <select class="form-select" aria-label="Default select example">
             <option selected="">Select your projects</option>
             <option value="1">Project1</option>
             <option value="2">Project2</option>
             <option value="3">Project3</option>
           </select>
         </div>
         <div class="col-span-12">
           <label class="form-label" for="exampleFormControlInput3">Project Counts</label>
           <select class="form-select" aria-label="Default select example">
             <option selected="">How many projects do you make?</option>
             <option value="1">One</option>
             <option value="2">Two</option>
             <option value="3">Three</option>
           </select>
         </div>
         <div class="col-span-12">
           <label class="form-label" for="externalNotes">External Notes</label>
           <textarea class="form-control" id="externalNotes" rows="4"></textarea>
         </div>
         <div class="col-span-12">
           <div class="form-check checkbox-checked">
             <input class="form-check-input" id="termsCondition2" type="checkbox" value="" required="">
             <label class="form-check-label" for="termsCondition2">Agree to terms and conditions</label>
           </div>
         </div>
         <div class="col-span-12">
           <button class="btn btn-light me-2" type="submit" data-bs-dismiss="offcanvas" aria-label="Close">Cancel</button>
           <button class="btn btn-primary" type="submit">Submit</button>
         </div>
       </form>
     </div>
    </div>
    <button class="btn btn-info" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">Toggle Static Offcanvas</button>
    <div class="offcanvas offcanvas-start" id="staticBackdrop" data-bs-backdrop="static" tabindex="-1" aria-labelledby="staticBackdropLabel">
     <div class="offcanvas-header pb-0">
       <h5 class="offcanvas-title" id="staticBackdropLabel">Static Offcanvas</h5>
       <button class="btn-close" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
     </div>
     <div class="offcanvas-body custom-input">
       <h6>Wed Designer</h6>
       <p>For a site to be successful, a designer must be able to communicate their ideas, chat with a firm about what they want, and inquire about the target audience.</p>
       <form class="grid grid-cols-12 gap-3">
         <div class="col-span-12">
           <label class="form-label" for="exampleFormControlInput4">Email</label>
           <input class="form-control" id="exampleFormControlInput4" type="email" placeholder="name@example.com">
         </div>
         <div class="col-span-12">
           <label class="form-label" for="exampleFormControlInput2">Select Project</label>
           <select class="form-select" aria-label="Default select example">
             <option selected="">Select your projects</option>
             <option value="1">Project1</option>
             <option value="2">Project2</option>
             <option value="3">Project3</option>
           </select>
         </div>
         <div class="col-span-12">
           <label class="form-label" for="exampleFormControlInput3">Project Counts</label>
           <select class="form-select" aria-label="Default select example">
             <option selected="">How many projects do you make?</option>
             <option value="1">One</option>
             <option value="2">Two</option>
             <option value="3">Three</option>
           </select>
         </div>
         <div class="col-span-12">
           <label class="form-label" for="exampleFormControlTextarea4">External Notes</label>
           <textarea class="form-control" id="exampleFormControlTextarea4" rows="4"></textarea>
         </div>
         <div class="col-span-12">
           <div class="form-check checkbox-checked">
             <input class="form-check-input" id="termsCondition3" type="checkbox" value="" required="">
             <label class="form-check-label" for="termsCondition3">Agree to terms and conditions</label>
           </div>
         </div>
         <div class="col-span-12">
           <button class="btn btn-light me-2" type="submit" data-bs-dismiss="offcanvas" aria-label="Close">Cancel</button>
           <button class="btn btn-primary" type="submit">Submit</button>
         </div>
       </form>
     </div>
    </div>