#
  • Dashboard
  • dashboard4
    • Ecommerce
    • Project
    • Crypto
    • Education
  • apps
    • Calendar
    • Profile
      • Profile
      • Setting
    • Projects Page
      • Projects
      • Projects Details
    • To-Do
    • Team
    • API
    • Ticket
      • Ticket
      • Ticket Details
    • Email Page
      • Email
      • Read Email
    • E-shop
      • Cart
      • Product
      • Add Product
      • Product-Details
      • Product list
      • Orders
      • Orders Details
      • Orders List
      • Checkout
      • Wishlist
    • Invoice
    • Chat
    • File Manager
    • bookmark
    • kanban board
    • Timeline
    • FAQ
    • Pricing
    • Gallery
    • Blog Page
      • Blog
      • Blog Details
      • Add Blog
  • widgets
  • Component
  • ui kits
    • Cheatsheet
    • Alert
    • Badges
    • Buttons
    • Cards
    • Dropdown
    • Grid
    • Avtar
    • Tabs
    • Accordions
    • Progress
    • Notifications
    • Lists
    • Helper Classes
    • Background
    • Divider
    • Ribbons
    • Editor
    • Collapse
    • Shadow
    • Wrapper
    • Bullet
    • Placeholder
    • Alignment Things
  • advanced ui12+
    • Modals
    • OffCanvas Toggle
    • Sweet Alert
    • Scrollbar
    • Spinners
    • Animation
    • Video Embed
    • Tour
    • Slider
    • Bootstrap Slider
    • Scrollpy
    • Tooltip & Popovers
    • Rating
    • Prismjs
    • Count Down
    • Count Up
    • Draggable
    • Tree View
    • Block Ui
  • icons
    • Fontawesome
    • Flag
    • Tabler
    • Weather
    • Animated
    • Iconoir
    • Phosphor
  • misc
  • Map & Charts
  • map & charts
    • Google Maps
    • Leaflet map
    • Vector map
  • chart
    • Chart
    • Apexcharts
      • Line
      • Area
      • Column
      • Bar
      • Mixed
      • Timeline & Range-Bars
      • Candlestick
      • Boxplot
      • Bubble
      • Scatter
      • Heatmap
      • Treemap
      • Pie
      • Radial bar
      • Radar
  • Table & forms
  • table
    • Basic Table
    • Data Table
    • List Js
    • Advance Table
  • forms elements
    • Form Validation
    • Base Input
    • Checkbox & Radio
    • Input Groups
    • Input Masks
    • Floating Labels
    • Datetimepicker
    • Touch spin
    • Select2
    • Switch
    • Range Slider
    • Typeahead
    • Textarea
    • Clipboard
    • File Upload
    • Dual List Boxes
    • Default Forms
  • ready to usenew
    • Form Wizards
    • Form Wizards 1
    • Form Wizards 2
    • Ready To Use Form
    • Ready To Use Tables
  • Pages
  • auth pages
    • Sign In
    • Sign In with Bg-image
    • Sign Up
    • Sign Up with Bg-image
    • Password Reset
    • Password Reset with Bg-image
    • Password Create
    • Password Create with Bg-image
    • Lock Screen
    • Lock Screen with Bg-image
    • Two Step Verification
    • Two Step Verification with Bg-image
  • error pages
    • Bad Request
    • Forbidden
    • Not Found
    • Internal Server Error
    • Service Unavailable
  • other pages
    • Blank
    • Maintenance
    • Coming Soon
    • Landing Pages
    • Sitemap
    • Privacy Policy
    • Terms & Conditions
  • Others
  • 2 level
    • Blank
    • Another level
      • Blank
  • support
  • 26 °C

    Mon

    +29°C

    2%

    Tue

    +29°C

    2%

    Wed

    +20°C

    1%

    Thu

    +17°C

    1%

    Fri

    +18°C

    1%

    Sat

    +16°C

    1%

    Sun

    +29°C

    1%

    • US
    • France
    • UK
    • Italy
    • Search Settings
    • Safe Search Filtering
    • Search Suggestions
    • Search History
    • Custom Search Preferences

    Recently Searched Data:

    • user management

      #RA789

    • data visualization

      #RY810

    • security protocols

      #ATR56

    • authentication methods

      #YE615

    • Data Table

      #YE615

  • Shortcut
    • Privacy Settings
    • Account Settings
    • Accessibility
    • More Settings
      • Backup and Restore
      • Data Usage
      • Theme

      • Notification

    E-shop

    Email

    Chat

    Project

    Invoice

    Blog

    Calendar

    File Manager

    Gallery

    Profile

    Task Board

  • 4
    Cart
    Backpacks
    Backpacks
    size: mediumColor: Pink

    $600.50 x 1

    Women's Watch
    Women's Watch
    size: smallColor: Rose Gold

    $519.10 x 2

    Sandals
    Sandals
    size: 8Color: White

    $390 x 2

    Jackets
    Jackets
    size: XLColor: Blue

    $300.00 x 2

    Shoes
    Shoes
    size: 9Color: White

    $450.00 x 1

    Total $3,468.00
    View CartCheckout
  • Notification
    Gene Hart
    Gene Hartwants to edit Report.docsep 23
    Emery McKenzie
    Emery McKenzieYour order from @Shopper.com is out for delivery today!sep 23
    Simon Young
    Simon Youngshared a file called Dropdown.pdf30 min
    Becky G. Hayes
    Becky G. Hayeshas added a comment to Final_Report.pdf45 min
    Romaine Nadeau
    Romaine Nadeauinvited you to join a meeting1 hour ago
  • avtar
    • woman
      Laura Monaldo

      lauradesign@gmail.com

    • Profile Detaiils
    • Settings
    • Hide Settings
      • Hide Comments
      • Advanced comment filtering
      • Hide mssage request
      • Separated link
    • Notification
    • Incognito
    • Help
    • Pricing
    • Add account
    • Free Plan

      20k views

    • Log Out

Offcanvas

  • Advance UI
  • Offcanvas
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.
Placement

Offcanvas Different Placement Example: Left, Right & Bottom

Offcanvas top
...
Offcanvas right
...
Offcanvas bottom
...
Backdrop

Scrolling the element is disabled when an offcanvas and its backdrop are visible. Use the data-bs-scroll attribute to toggle 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.

Body Scrolling

Scrolling the element is disabled when an offcanvas and its backdrop are visible.

Offcanvas with body scrolling

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

Static Backdrop

When backdrop is set to static, the offcanvas will not close when clicking outside of it.

Offcanvas
I will not close if you click outside of me.
Body Scrolling And Backdrop

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

Backdrop with scrolling

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

  • Copyright © 2024 ra-admin. All rights reserved 💖

  • V1.0.0
  • Need Help
Admin Customizer

it's time to style according to your choice ..!

Sidebar option
    • Vertical
    • Horizontal
    • Dark
Layout option
    • LTR
    • RTL
    • Box
Color Hint
Text size
  • sm
  • md
  • lg
Buy Now
SupportDocument