{"id":15295901,"url":"https://github.com/mdbootstrap/bootstrap-offcanvas","last_synced_at":"2025-07-27T08:32:13.159Z","repository":{"id":66086837,"uuid":"395544638","full_name":"mdbootstrap/bootstrap-offcanvas","owner":"mdbootstrap","description":"Hidden sidebar built with the latest Bootstrap 5, perfect for use in the form of additional navigation, for example in ecommerce projects or dashboards.","archived":false,"fork":false,"pushed_at":"2022-01-28T10:42:55.000Z","size":975,"stargazers_count":2,"open_issues_count":0,"forks_count":3,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-11-15T06:30:50.158Z","etag":null,"topics":["bootstrap","bootstrap-dashboard","bootstrap-offcanvas","bootstrap-offcanvas-menu","bootstrap-template","bootstrap5","ecommerce","navigation","offcanvas","responsive","responsive-design"],"latest_commit_sha":null,"homepage":"https://mdbootstrap.com/docs/standard/extended/offcanvas/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mdbootstrap.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"License.pdf","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-08-13T06:35:13.000Z","updated_at":"2024-03-24T13:12:51.000Z","dependencies_parsed_at":null,"dependency_job_id":"a97f0b82-acd2-4513-bf1a-4df1643a8d0d","html_url":"https://github.com/mdbootstrap/bootstrap-offcanvas","commit_stats":{"total_commits":5,"total_committers":3,"mean_commits":"1.6666666666666667","dds":0.6,"last_synced_commit":"321d7360ef405ed83f644c2da096a0bebd9941d2"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Fbootstrap-offcanvas","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Fbootstrap-offcanvas/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Fbootstrap-offcanvas/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Fbootstrap-offcanvas/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mdbootstrap","download_url":"https://codeload.github.com/mdbootstrap/bootstrap-offcanvas/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227782041,"owners_count":17819196,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","bootstrap-dashboard","bootstrap-offcanvas","bootstrap-offcanvas-menu","bootstrap-template","bootstrap5","ecommerce","navigation","offcanvas","responsive","responsive-design"],"created_at":"2024-09-30T18:08:33.611Z","updated_at":"2024-12-02T18:40:27.716Z","avatar_url":"https://github.com/mdbootstrap.png","language":"JavaScript","readme":"\nHidden sidebar, perfect for use in the form of additional navigation, for example in ecommerce projects or dashboards.\n\nCheck out [Bootstrap Offcanvas Documentation](https://mdbootstrap.com/docs/standard/extended/offcanvas/) for detailed instructions \u0026 even more examples.\n\n## How it works\n\nOffcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and `data` attributes are used to invoke our JavaScript.\n\n* Offcanvas shares some of the same JavaScript code as modals. Conceptually, they are quite similar, but they are separate plugins.\n* Similarly, some [source Sass](https://mdbootstrap.com/docs/standard/extended/offcanvas/#section-sass) variables for offcanvas’s styles and dimensions are inherited from the modal’s variables.\n* When shown, offcanvas includes a default backdrop that can be clicked to hide the offcanvas.\n* Similar to modals, only one offcanvas can be shown at a time.\n\n**Heads up!** Given how CSS handles animations, you cannot use `margin` or `translate` on an `.offcanvas` element. Instead, use the class as an independent wrapping element.\n\n\n## Basic example\n\n![Bootstrap 5 Offcanvas](https://mdbootstrap.com/img/Marketing/github/offcanvas/basic.png)\n\n```html\n\u003cdiv class=\"offcanvas offcanvas-start show\" tabindex=\"-1\" id=\"offcanvas\" aria-labelledby=\"offcanvasLabel\"\n  data-mdb-backdrop=\"false\" data-mdb-scroll=\"true\"\u003e\n  \u003cdiv class=\"offcanvas-header\"\u003e\n    \u003ch5 class=\"offcanvas-title\" id=\"offcanvasLabel\"\u003eOffcanvas\u003c/h5\u003e\n    \u003cbutton type=\"button\" class=\"btn-close text-reset\" data-mdb-dismiss=\"offcanvas\" aria-label=\"Close\"\u003e\u003c/button\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"offcanvas-body\"\u003e\n    Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## How to use?\n\n1. Download MDB 5 - free UI KIT\n\n2. Choose your favourite customized component and click on the image\n\n3. Copy \u0026 paste the code into your MDB project\n\n[▶️ Subscribe to YouTube channel for web development tutorials \u0026 resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)\n\n## More examples\n\n[Bootstrap Offcanvas Placement:\n![Bootstrap 5 Offcanvass](https://mdbootstrap.com/img/Marketing/github/offcanvas/section-2.png)](https://mdbootstrap.com/docs/standard/extended/offcanvas/#section-placement)\n\n[Bootstrap Offcanvas Backdrop:\n![Bootstrap 5 Offcanvas](https://mdbootstrap.com/img/Marketing/github/offcanvas/section-3.png)](https://mdbootstrap.com/docs/standard/extended/offcanvas/#section-backdrop)\n\n[Bootstrap Offcanvas Sass:\n![Bootstrap 5 Offcanvas](https://mdbootstrap.com/img/Marketing/github/offcanvas/section-4.png)](https://mdbootstrap.com/docs/standard/extended/offcanvas/#section-sass)\n\n___\n\n## More extended Bootstrap documentation\n\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/bootstrap-address-form/\"\u003eBootstrap Address Form\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/avatar/\"\u003eBootstrap Avatar\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/back-to-top/\"\u003eBootstrap Back To Top Button\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/carousel-with-thumbnails/\"\u003eBootstrap Carousel Slider with Thumbnails\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/chat/\"\u003eBootstrap Chat\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/code/\"\u003eBootstrap Code Blocks\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/comments/\"\u003eBootstrap Comments\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/bootstrap-comparison-table/\"\u003eBootstrap Comparison Table\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/credit-card/\"\u003eBootstrap Credit Card Form\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/drawer/\"\u003eBootstrap Drawer\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/dropdown-multilevel/\"\u003eBootstrap Nested Dropdown\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/faq/\"\u003eBootstrap FAQ component / section\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/gallery/\"\u003eBootstrap Gallery\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/hamburger-menu/\"\u003eBootstrap Hamburger Menu\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/bootstrap-invoice/\"\u003eBootstrap Invoice\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/jumbotron/\"\u003eBootstrap Jumbotron\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/login/\"\u003eBootstrap Login Form\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/maps/\"\u003eBootstrap Maps\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/media-object/\"\u003eBootstrap Media Object\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/mega-menu/\"\u003eBootstrap Mega Menu\u003c/a\u003e\u003c/li\u003e \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/multiselect/\"\u003eBootstrap Multiselect\u003c/a\u003e\u003c/li\u003e \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/news-feed/\"\u003eBootstrap News Feed\u003c/a\u003e\u003c/li\u003e \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/offcanvas/\"\u003eBootstrap Offcanvas\u003c/a\u003e\u003c/li\u003e \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/order-details/\"\u003eBootstrap Order Details\u003c/a\u003e\u003c/li\u003e \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/page-transitions/\"\u003eBootstrap Page Transitions\u003c/a\u003e\u003c/li\u003e \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/payment-forms/\"\u003eBootstrap Payment Forms\u003c/a\u003e\u003c/li\u003e \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/product-cards/\"\u003eBootstrap Product Cards\u003c/a\u003e\u003c/li\u003e \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/profiles/\"\u003eBootstrap Profiles\u003c/a\u003e\u003c/li\u003e  \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/quotes/\"\u003eBootstrap Quotes\u003c/a\u003e\u003c/li\u003e \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/registration/\"\u003eBootstrap Registration Form\u003c/a\u003e\u003c/li\u003e \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/search-expanding/\"\u003eBootstrap Expanding Search Bar\u003c/a\u003e\u003c/li\u003e \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/shopping-carts/\"\u003eBootstrap Shopping Carts\u003c/a\u003e\u003c/li\u003e \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/side-navbar/\"\u003eBootstrap Side Navbar\u003c/a\u003e\u003c/li\u003e  \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/sidebar/\"\u003eBootstrap Sidebar\u003c/a\u003e\u003c/li\u003e  \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/social-media/\"\u003eBootstrap Social Media Icons \u0026 Buttons\u003c/a\u003e\u003c/li\u003e  \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/square-buttons/\"\u003eBootstrap Square Buttons\u003c/a\u003e\u003c/li\u003e  \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/bootstrap-survey-form/\"\u003eBootstrap Survey Form\u003c/a\u003e\u003c/li\u003e  \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/testimonial-slider/\"\u003eBootstrap Testimonial Slider\u003c/a\u003e\u003c/li\u003e  \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/testimonials/\"\u003eBootstrap Testimonials\u003c/a\u003e\u003c/li\u003e  \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/textarea/\"\u003eBootstrap Textarea\u003c/a\u003e\u003c/li\u003e  \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/timeline/\"\u003eBootstrap Timeline\u003c/a\u003e\u003c/li\u003e  \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/to-do-list/\"\u003eBootstrap To Do List\u003c/a\u003e\u003c/li\u003e  \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/video-carousel/\"\u003eBootstrap Video Carousel / Gallery\u003c/a\u003e\u003c/li\u003e  \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/weather/\"\u003eBootstrap Weather\u003c/a\u003e\u003c/li\u003e  \n\u003c/ul\u003e\n\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdbootstrap%2Fbootstrap-offcanvas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmdbootstrap%2Fbootstrap-offcanvas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdbootstrap%2Fbootstrap-offcanvas/lists"}