{"id":1521,"date":"2026-07-28T22:33:15","date_gmt":"2026-07-28T22:33:15","guid":{"rendered":"http:\/\/home.test\/canvas-wp-test\/offcanvas\/"},"modified":"2026-07-30T15:20:46","modified_gmt":"2026-07-30T15:20:46","slug":"offcanvas","status":"publish","type":"page","link":"https:\/\/demos.canvaswp.com\/classic\/offcanvas\/","title":{"rendered":"Bootstrap Off-Canvas"},"content":{"rendered":"\n<div class=\"wp-block-group container is-layout-flow wp-block-group-is-layout-flow\">\n<h4>Live Demo<\/h4>\n<a aria-controls=\"offcanvasExample\" data-bs-toggle=\"offcanvas\" class=\"btn btn-primary\" href=\"#offcanvasExample\" role=\"button\">Link with href<\/a>\n<button aria-controls=\"offcanvasExample\" data-bs-target=\"#offcanvasExample\" data-bs-toggle=\"offcanvas\" class=\"btn btn-primary\" type=\"button\">Button with data-bs-target<\/button>\n<div class=\"offcanvas offcanvas-start\" tabindex=\"-1\" id=\"offcanvasExample\" aria-labelledby=\"offcanvasExampleLabel\"><div class=\"offcanvas-header\"><h3 class=\"offcanvas-title\" id=\"offcanvasExampleLabel\">Offcanvas<\/h3><button type=\"button\" class=\"btn-close text-reset\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close\"><\/button><\/div><div class=\"offcanvas-body\"><div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\nSome text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.\n<\/div>\n\n\n<div class=\"wp-block-group dropdown mt-3 is-layout-flow wp-block-group-is-layout-flow\"><button data-bs-toggle=\"dropdown\" class=\"btn btn-secondary dropdown-toggle\" id=\"dropdownMenuButton\" type=\"button\">Dropdown button<\/button><ul aria-labelledby=\"dropdownMenuButton\" class=\"dropdown-menu\"><li><a class=\"dropdown-item\" href=\"#\">Action<\/a><\/li><li><a class=\"dropdown-item\" href=\"#\">Another action<\/a><\/li><li><a class=\"dropdown-item\" href=\"#\">Something else here<\/a><\/li><\/ul><\/div><\/div><\/div>\n\n<div class=\"line\"><\/div>\n\n<h4>Placement<\/h4>\n<button aria-controls=\"offcanvasTop\" data-bs-target=\"#offcanvasTop\" data-bs-toggle=\"offcanvas\" class=\"btn btn-secondary\" type=\"button\">Toggle top offcanvas<\/button>\n<div class=\"offcanvas offcanvas-top\" tabindex=\"-1\" id=\"offcanvasTop\" aria-labelledby=\"offcanvasTopLabel\"><div class=\"offcanvas-header\"><h3 id=\"offcanvasTopLabel\">Offcanvas top<\/h3><button type=\"button\" class=\"btn-close text-reset\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close\"><\/button><\/div><div class=\"offcanvas-body\"><div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n&#8230;\n<\/div><\/div><\/div>\n\n<button aria-controls=\"offcanvasRight\" data-bs-target=\"#offcanvasRight\" data-bs-toggle=\"offcanvas\" class=\"btn btn-success\" type=\"button\">Toggle right offcanvas<\/button>\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"><div class=\"offcanvas-header\"><h3 id=\"offcanvasRightLabel\">Offcanvas right<\/h3><button type=\"button\" class=\"btn-close text-reset\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close\"><\/button><\/div><div class=\"offcanvas-body\"><div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n&#8230;\n<\/div><\/div><\/div>\n\n<button aria-controls=\"offcanvasBottom\" data-bs-target=\"#offcanvasBottom\" data-bs-toggle=\"offcanvas\" class=\"btn btn-danger\" type=\"button\">Toggle Bottom offcanvas<\/button>\n<div class=\"offcanvas offcanvas-bottom\" tabindex=\"-1\" id=\"offcanvasBottom\" aria-labelledby=\"offcanvasBottomLabel\"><div class=\"offcanvas-header\"><h3 id=\"offcanvasBottomLabel\">Offcanvas bottom<\/h3><button type=\"button\" class=\"btn-close text-reset\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close\"><\/button><\/div><div class=\"offcanvas-body\"><div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n&#8230;\n<\/div><\/div><\/div>\n\n<div class=\"line\"><\/div>\n\n<h4>Backdrop<\/h4>\n<button aria-controls=\"offcanvasScrolling\" data-bs-target=\"#offcanvasScrolling\" data-bs-toggle=\"offcanvas\" class=\"btn btn-info\" type=\"button\">Enable body scrolling<\/button>\n<div class=\"offcanvas offcanvas-start\" tabindex=\"-1\" id=\"offcanvasScrolling\" aria-labelledby=\"offcanvasScrollingLabel\" data-bs-backdrop=\"false\" data-bs-scroll=\"true\"><div class=\"offcanvas-header\"><h3 class=\"offcanvas-title\" id=\"offcanvasScrollingLabel\">Colored with scrolling<\/h3><button type=\"button\" class=\"btn-close text-reset\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close\"><\/button><\/div><div class=\"offcanvas-body\"><p class=\"wp-block-paragraph\">Try scrolling the rest of the page to see this option in action.<\/p><\/div><\/div>\n\n<button aria-controls=\"offcanvasWithBackdrop\" data-bs-target=\"#offcanvasWithBackdrop\" data-bs-toggle=\"offcanvas\" class=\"btn btn-dark\" type=\"button\">Enable backdrop (default)<\/button>\n<div class=\"offcanvas offcanvas-start\" tabindex=\"-1\" id=\"offcanvasWithBackdrop\" aria-labelledby=\"offcanvasWithBackdropLabel\"><div class=\"offcanvas-header\"><h3 class=\"offcanvas-title\" id=\"offcanvasWithBackdropLabel\">Offcanvas with backdrop<\/h3><button type=\"button\" class=\"btn-close text-reset\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close\"><\/button><\/div><div class=\"offcanvas-body\"><p class=\"wp-block-paragraph\">&#8230;..<\/p><\/div><\/div>\n\n<button aria-controls=\"offcanvasWithBothOptions\" data-bs-target=\"#offcanvasWithBothOptions\" data-bs-toggle=\"offcanvas\" class=\"btn btn-warning\" type=\"button\">Enable both scrolling &amp; backdrop<\/button>\n<div class=\"offcanvas offcanvas-start\" tabindex=\"-1\" id=\"offcanvasWithBothOptions\" aria-labelledby=\"offcanvasWithBothOptionsLabel\" data-bs-scroll=\"true\"><div class=\"offcanvas-header\"><h3 class=\"offcanvas-title\" id=\"offcanvasWithBothOptionsLabel\">Backdroped with scrolling<\/h3><button type=\"button\" class=\"btn-close text-reset\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close\"><\/button><\/div><div class=\"offcanvas-body\"><p class=\"wp-block-paragraph\">Try scrolling the rest of the page to see this option in action.<\/p><\/div><\/div>\n\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-canvas","meta":{"footnotes":""},"class_list":["post-1521","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demos.canvaswp.com\/classic\/wp-json\/wp\/v2\/pages\/1521","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demos.canvaswp.com\/classic\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demos.canvaswp.com\/classic\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demos.canvaswp.com\/classic\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demos.canvaswp.com\/classic\/wp-json\/wp\/v2\/comments?post=1521"}],"version-history":[{"count":2,"href":"https:\/\/demos.canvaswp.com\/classic\/wp-json\/wp\/v2\/pages\/1521\/revisions"}],"predecessor-version":[{"id":2052,"href":"https:\/\/demos.canvaswp.com\/classic\/wp-json\/wp\/v2\/pages\/1521\/revisions\/2052"}],"wp:attachment":[{"href":"https:\/\/demos.canvaswp.com\/classic\/wp-json\/wp\/v2\/media?parent=1521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}