I am trying to adapt the relatively new off canvas dialog introduced in Drupal 8.5.

It is suggested to use it with the Drupal Form-API and a link element like this:

$form['off_canvas'] = [
  '#title'      => 'Some title',
  '#type'       => 'link',
  '#url'        => \Drupal\Core\Url::fromRoute('some route'),
  '#attributes' => [
    'class'                => ['use-ajax'],
    'data-dialog-type'     => 'dialog',
    'data-dialog-renderer' => 'off_canvas',
    'data-dialog-options'  => \Drupal\Component\Serialization\Json::encode(['width' => '40%']),
  '#attached'   => [
    'library' => [

This works pretty straight forward and out of the box, but for a very special use case I need to attach an AJAX-callback with a button element which is not possible using a link element when looking at the Drupal form API specifications.

This is what I got trying to use a button element and a callback with off canvas dialog functionality:

$form['some_button'] = [
  '#type'     => 'button',
  '#value'    => 'some value',
  '#attached' => [
    'library' => [
  '#ajax'     => [
    'callback' => '::some_callback',

Callback function goes here:

public function some_callback(&$form, FormStateInterface $form_state) {

  $response = new \Drupal\Core\Ajax\AjaxResponse();

  $title = 'Some title';

  $content = '<div>Some content</div>';
  $options = [];
  $response->addCommand(new \Drupal\Core\Ajax\OpenOffCanvasDialogCommand($title, $content, $options));
  return $response;

The funny thing is: once the off canvas dialog is initialized using $form['off_canvas'] it works on both elements for $form['off_canvas'] and $form['some_button']. On pageload it uses the old dialog for $form['some_button'] and the new off canvas dialog for $form['off_canvas'].

So this must be an initialization problem for $form['some_button]. But I can not get this to work with the off canvas dialog at pageload and documentation for the new off canvas functionality is quite rare.

I tried to tell $form['some_button'] to use off canvas as a parameter in a lot of ways, but it does not work. I guess I missed something here.

Can you guys give me a hint how to make this work from the very start using a button with an Ajax callback?

2 Answers 2


When getting back to this issue I did notice the strange behaviour is gone after upgrading to the latest Drupal 8.6.3. All works as expected even using a button.

I am not able to reproduce the behavior/error from above.


How do I adapt this to open off-canvas dialog from javascript/jquery? I've tried the Drupal.dialog script which only opens normal dialogs. I've also seen the Drupal.offCanvas {} script - which is largely undocumented. Any pointers please?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.