Switching to dark mode

Switching to light mode

Switching to RTL mode

Switching to default mode

Settings

Offcanvas
Left offcanvas
Top offcanvas
Placement

There’s no default placement for offcanvas components, so you must add one of the modifier classes below;

  • .offcanvas-startplaces offcanvas on the left of the viewport.
  • .offcanvas-endplaces offcanvas on the right of the viewport.
  • .offcanvas-topplaces offcanvas on the top of the viewport.
  • .offcanvas-bottomplaces offcanvas on the bottom of the viewport.
Hide & Show

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.

  • .offcanvashides content (by default).
  • .offcanvas.showshows content.
Right offcanvas
Placement

There’s no default placement for offcanvas components, so you must add one of the modifier classes below;

  • .offcanvas-startplaces offcanvas on the left of the viewport.
  • .offcanvas-endplaces offcanvas on the right of the viewport.
  • .offcanvas-topplaces offcanvas on the top of the viewport.
  • .offcanvas-bottomplaces offcanvas on the bottom of the viewport.
Hide & Show

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.

  • .offcanvashides content (by default).
  • .offcanvas.showshows content.
Bottom Offcanvas
Placement

There’s no default placement for offcanvas components, so you must add one of the modifier classes below;

  • .offcanvas-startplaces offcanvas on the left of the viewport.
  • .offcanvas-endplaces offcanvas on the right of the viewport.
  • .offcanvas-topplaces offcanvas on the top of the viewport.
  • .offcanvas-bottomplaces offcanvas on the bottom of the viewport.
Hide & Show

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.

  • .offcanvashides content (by default).
  • .offcanvas.showshows content.