n How to create off-canvas dialog in drupal 8 | CodimTh

Please Disable Your Browser Adblock Extension for our site and Refresh This Page!

our ads are user friendly, we do not serve popup ads. We serve responsible ads!

Refresh Page
Skip to main content
On . By CodimTh

in this tuto, I'll show you how to create off-canvas dialog in drupal 8.

Off canvas dialogs: Are no popup windows that overlap other content, but are sliding into the page by moving other content to the side.

This type of dialog is especially useful to display larger portions of content, like long detail pages that could require the user to scroll down. Also the off canvas dialog is well usable on mobile devices. 

Before you try to display Off canvas dialogs on your site, make sure the drupal.dialog.ajax library is loaded. Add the library as a dependency to your theme or module. 

add library in twig:

{{ attach_library('core/drupal.dialog.ajax') }}

add library in PHP:

$variables['#attached']['library'][] = 'core/drupal.dialog.ajax';

and then add the following snippet:

<a class="use-ajax"
  Open Dialog

    Links can be used to display a Off canvas dialogs by simply adding the use-ajax class to the HTML element and specifying some dialog options.

    This link opens /node/35 in a Off canvas dialogs.

    data-dialog-type: This is either 'modal' or 'dialog'.

    data-dialog-options: A JSON encoded string of options for Drupal.dialog.

    if Off canvas dialogs not displaying with a Javascript error, you might have to use &quot; instead of ". A valid parameter would be:


    And that's it! Off-canvas dialog is done and ready for action.





    Riadh Rahmi

    Senior Web Developer PHP/Drupal & Laravel

    I am a senior web developer, I have experience in planning and developing large scale dynamic web solutions especially in Drupal & Laravel.

    Web Posts


    Page Facebook