Close
Back

Off Canvas Header

Off Canvas Content

The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting.

Off Canvas Content

The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting.

Tab1

Off Canvas Tab 1 Content

The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting.

Off Canvas Tab 1 Content

The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting.

Off Canvas Tab 1 Content

The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting.

Off Canvas Tab 1 Content

The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting.

Off Canvas Tab 1 Content

The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting.

Off Canvas Tab 1 Content

The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting.

Off Canvas Tab 1 Content

The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting.

Tab2

Off Canvas Tab 2 Content

The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting.

Off Canvas Tab 2 Content

The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting.

Off Canvas Tab 2 Content

The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting.

Off Canvas Tab 2 Content

The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting.

Off Canvas Tab 2 Content

The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting.

Off Canvas Tab 2 Content

The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting.

Off Canvas Tab 2 Content

The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting.

Tab3

Off Canvas Tab 3 Content

The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting.

Off Canvas Tab 3 Content

The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting.

Off Canvas Tab 3 Content

The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting.

Off Canvas Tab 3 Content

The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting.

Off Canvas Tab 3 Content

The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting.

Off Canvas Tab 3 Content

The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting.

Off Canvas Tab 3 Content

The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting. The off-canvas content could have any formatting.

Off Canvas

Used to present secondary content or navigation which could be a part of the screen but, due to limited screen real-estate, or to focus the user's attention, it sits just outside of the screen until prompted by user interaction.

Behaviors

XL / LG / MD Breakpoints

  • The off canvas slides in from the right and overlays the page, as the page behind becomes frozen and is covered with a tinted overlay.
  • The off canvas occupies a preset percentage of the screen (typically no more than 10/12 columns), often leaving visible a portion of the page behind . A general rule is to open the off canvas farther as breakpoints get smaller so that content can be seen without too much wrapping.

  • To change the percentage width of the off canvas, apply one of the following styles to the element that has dds__modal-dialog applied to it:

    • dds__modal-width-25
    • dds__modal-width-50
    • dds__modal-width-75
    • dds__modal-width-100
  • The browser scroll bar becomes the off canvas scroll bar.
  • The off canvas masthead includes a CTA for returning to the page (e.g. "< Back" link), and this masthead is a fixed element at the top of the screen.
  • The off canvas can be closed by selecting the masthead CTA, or with swipe-right on a touchscreen.

SM / XS Breakpoints

  • The behaviors are identical to those of the larger breakpoints except that the off canvas always occupies 100% of the screen (i.e. 12/12 columns).

Webflow Limitations

While these are very close to finished in terms of styles and functionality across breakpoints, the following behaviors are incorrect due to Webflow limitations:

  • Open at Current Y Position: The off canvas should slide open top-aligned at the current screen Y position, rather than jumping to the top of the page before opening.
  • Browser Scroll: While the off canvas is open, the browser scroll bar should affect only the off canvas content, and not the page behind.
  • Stop Scrolling at Bottom: While the off canvas is open, the user should not be able to scroll down past the bottom of the off canvas content.
  • Tabs Become Accordions on SM: Tabs within an off canvas should become a standard accordion at SM breakpoint and smaller. This is simulated in Webflow by replacing a tabs component with an accordion component.
Open Standard Off Canvas