Off-canvas

Off-canvas 2.0.0 requires:

• PHP: 8.2.0 or newer
• YOOtheme Pro: 5.0.51 or newer
• Joomla: 5.4.9 or newer, or WordPress: 7.1.3 or newer
• Browser: A current version of Chrome, Firefox, Safari or another modern browser

JavaScript is required for the UIkit Offcanvas lifecycle and Toggle Helper activation.

Off-canvas turns a YOOtheme Pro Builder sublayout into an accessible side panel. The panel can open from the left or right, overlay or move the page, and contain ordinary Builder content such as navigation, text, forms, grids and media.

It can be opened by its built-in control, a compatible external link or a URL fragment.

1. Add Flart Studio → Off-canvas in YOOtheme Pro Builder.
2. Add the required elements to its Sublayout.
3. Keep Content → Edit mode enabled while editing the panel.
4. Choose its side, animation mode, close behavior and optional built-in link.
5. Disable Edit mode and test the panel on the frontend.

Use ordinary YOOtheme Pro Builder elements, including menus, text, images, buttons, forms, grids and nested layouts. Elements inside the sublayout can use their normal Dynamic Content settings.

Each Off-canvas instance owns its own panel content and interaction lifecycle.

Content → Edit mode opens the complete panel in Builder with transition-free behavior so its sublayout can be edited directly. Native and Toggle Helper activation remain blocked while the panel is being edited.

Edit mode is authoring-only. The Off-canvas, its assets and its sublayout content are excluded from the public frontend and searchable output until Edit mode is disabled.

An empty Off-canvas remains visible as a placeholder in Builder so you can find and populate it. On the public frontend, it is not rendered and does not load the Off-canvas or Toggle Helper runtimes.

A structural row and column without a real child element still count as an empty sublayout.

The panel can open from the left or right. Four UIkit modes are available:

• Slide: The panel slides over the page.
• Push: The panel pushes the page content aside.
• Reveal: The page moves to reveal the panel.
• None: The panel appears without an entrance transition.

Yes. While Edit mode is enabled, changing the Mode field previews the selected animation once. After that preview, unrelated Builder changes return the panel to transition-free editing.

This lets you inspect Push and Reveal behavior without making every Builder refresh animate the panel.

Push Rows divides the sublayout at the selected child. Content after that boundary becomes a lower group that is pushed toward the bottom of the panel. If the selected boundary does not exist, Off-canvas keeps one unsplit group.

When no split is used, the complete sublayout can instead be aligned vertically in the panel.

Yes. Under the Link settings, configure the text, icon, icon alignment, title, ARIA label, style, size, width, spacing and optional Click Action.

Text and icon may use supported Dynamic Content. If the control contains only an icon, enter an ARIA Label; otherwise the translated Show Off-canvas fallback is used.

Yes. Disable Show the link, enter a unique Off-canvas ID and enable Toggle Helper. Point a Button, Link or another compatible anchor to that target.

Enter the ID without a leading #, for example navigation-panel.

Assign an explicit Off-canvas ID and enable Toggle Helper. Supported examples include:

• #navigation-panel — activate one target.
• #navigation-panel,120 — use the same target format with an optional protocol offset.
• #fs-toggle=navigation-panel/contact-modal — activate several compatible Flart Studio targets in order.

The fragment may be used on the current page or appended to another page URL.

A same-document helper link activates its target without navigating the page. A cross-page link keeps normal browser navigation and activates the target after the destination loads.

New-tab links, downloads, modified clicks and unsupported fragments keep their normal browser behavior. Off-canvas itself does not perform offset scrolling.

Off-canvas IDs must be unique across the complete document. If two IDs are identical or differ only by ASCII letter case, all ambiguous panels and their controls are disabled until the conflict is resolved.

Builder shows a localized notification, and blocked native or Helper links explain the problem in a tooltip.

Configure the close button and use UIkit's native backdrop and Escape behavior. The close action is a semantic button and supports normal keyboard interaction.

After closing, UIkit returns focus to an eligible built-in opener. Toggle Helper also preserves an eligible external opener across its temporary bridge lifecycle.

If Builder replaces a panel while it is opening or already open, Off-canvas reopens the valid updated generation without replaying the authored trigger or Click Action.

A panel remains closed when it was already closing, its ID changed, Edit mode became active or ID ownership became ambiguous.

Yes. Elements inside the sublayout and source-enabled Off-canvas fields can use YOOtheme Pro Dynamic Content. IDs, labels and other product-interpreted values are normalized again after Dynamic Content resolves.

Click Action is intentionally static because it executes JavaScript and therefore does not accept a Dynamic Content mapping.

Yes. Link → Click Action runs custom JavaScript before activation. Returning false or preventing the click event cancels opening for mouse, Enter and Space consistently.

Use this field only for code written by a trusted Builder author. A site Content Security Policy that blocks inline event handlers may prevent the Click Action from running.

The panel receives an accessible name from ARIA Label or the translated Off-canvas panel fallback. The built-in trigger exposes its controlled dialog and supports mouse, Enter and Space.

UIkit manages dialog semantics and interaction. Icon-only controls receive the authored label or the translated Show Off-canvas fallback.

Use YOOtheme Pro's native General, Advanced and Custom CSS controls. The panel stays inside its original element wrapper with container: false, so scoped CSS is not split across a teleported document root.

For targeted rules, use markers such as .fs-offcanvas__panel, .fs-offcanvas__content, .fs-offcanvas__close and .fs-offcanvas__toggle. Historical compatibility classes remain available for existing layouts.

Yes. Multiple panels can be used on one page when their public IDs are unique. The runtime also initializes valid panels inserted by Builder refreshes or loaders and cleans up removed or replaced generations.

If a loader inserts the layout, it must also reconcile the product assets declared by that response.

Yes. Off-canvas includes product translations for its Builder fields, descriptions, options, notices, tooltips and frontend fallback labels. YOOtheme Pro continues to translate its native General and Advanced settings.

If a product translation is unavailable, the original English text is used.

• Confirm that the sublayout contains a real child element and Edit mode is disabled.
• Check that the Off-canvas ID is unique and does not include a leading #.
• Enable Toggle Helper when using an external URL or link.
• Hover a disabled control in Builder to read its conflict or availability tooltip.
• Make sure a loader delivered the required product assets.
• Clear CMS, YOOtheme, browser and CDN caches after an update.
• Check the browser console for a missing UIkit/runtime file or Content Security Policy error.