Offcanvas

Basic

The offcanvas component serves as a sidebar that is hidden out of view until is toggled via an interactive element. The offcanvas is composed of the following elements:

msp-offcanvas: the main container.
msp-offcanvas-backdrop: a static backdrop that makes the sidebar stand out more.
msp-offcanvas-content: the container for the content.
msp-offcanvas-header: top section of the content.
msp-offcanvas-body: middle section of the content.
msp-offcanvas-footer: bottom section of the content.

To toggle the offcanvas you need to give the msp-offcanvas-toggle to an element and attach the data-msp-target attribute.

Example:

<body>
  <aside id="main-offcanvas" class="msp-offcanvas">
    <div class="msp-offcanvas-backdrop msp-offcanvas-toggle" data-msp-target="#main-offcanvas"></div>

    <div class="msp-offcanvas-content">
      <div class="msp-offcanvas-body">
        ...
      </div>
    </div>
  </aside>

  <main>
    <nav>
      <button class="msp-offcanvas-toggle" data-msp-target="#main-offcanvas">Toggle</button>
    </nav>
    <section>...</section>
  </main>
</body>

Responsive

It's possible to have the sidebar always visible and only hide the offcanvas when the viewport is below the brakepoint. For this add the class msp-offcanvas-[breakpoint].

Note that the toggle and backdrop are disabled when the viewport is above the brakepoint.

Example

<body>
  <aside id="main-offcanvas" class="msp-offcanvas msp-offcanvas-sm">
    <div class="msp-offcanvas-backdrop msp-offcanvas-toggle" data-msp-target="#main-offcanvas"></div>

    <div class="msp-offcanvas-content">
      <div class="msp-offcanvas-body">
        ...
      </div>
    </div>
  </aside>

  <main>
    <nav>
      <button class="msp-offcanvas-toggle" data-msp-target="#main-offcanvas">Toggle</button>
    </nav>
    <section>...</section>
  </main>
</body>

1.9 KiB Raw Blame History

Offcanvas

Basic

Example:

Responsive

Example

1.9 KiB

Raw Blame History