As a modern web developer, you might already know that most modern websites need a responsive menu, preferably respecting AA accessibility standards. In this article, you’ll learn about the Sidr module that integrates jQuery Sidr with Drupal to bring you cool, accessible mobile menus.

In recent times, most websites are mobile-friendly and many even have AA accessibility. Most websites require a collapsible mobile menu, usually with a logo, a menu and other Drupal blocks. There exists a popular module named Responsive Menus, but it only works with menu blocks – no logo, no other blocks.

That was when I found a jQuery plugin named Sidr and wrote a Sidr integration module for Drupal. The Sidr module gives you easy-to-configure and accessible collapsible panels which can be used for mobile menus and other UI elements like search filters. This article walks you through the process of configuring Sidr so that you can use it on your next project 🥳.

Thanks Evolving Web for supporting the initial development of this module.

The Sidr module for Drupal in action
Sidr + Drupal: Logo + Main menu + Social links.

Two minute version

  • The Sidr module helps you create accessible mobile menus.
  • Installing the Sidr module involves two steps:
    • Install the Sidr module like any other Drupal module.
    • Install Sidr JS libraries, preferably, using composer.
  • Configure Sidr’s global settings from the following page: Configuration > User interface > Sidr Settings.
  • Configure one or more Sidr trigger blocks to create buttons that toggle Sidr panels containing the contents of your choice.
  • Voila! You have an accessible mobile menu!

Video tutorial

Sidr + Drupal video tutorial

Step 1: Module installation

Since composer is the standard way of managing Drupal dependencies, installing the module is as easy as running one of the following commands.

composer require drupal/sidr # Install the latest version
composer require drupal/sidr:3.1 # Install a specific version

After the module files are installed, enable the Sidr module from Drupal’s admin interface or by running the following drush command:

drush pm:enable sidr # Or in short: drush en sidr
Important: Certain features of the Sidr module mentioned in this article are only available in version 3.x or above.

Step 2: Library installation

The Sidr module depends on Sidr JS libraries. After you install the module, Drupal’s Status Report page will show an error about missing Sidr libraries along with instructions to install them.

Sidr libraries message on the status report page
Drupal status report saying Sidr libraries required.

With Sidr 3.x, Sidr JS libraries can be installed using composer, via Asset Packagist, thanks to a suggestion from Robert Ngo. The steps might seem long, but they are quite easy and all you need is some JSON skills 😉.

If you’re using a version lower than 3.x you’ll need to download and install the required version of Sidr libraries as specified in the README for that version.

2.1: Composer Installer Extenders

Install the Composer Installer Extenders plugin with the following command:

composer require oomphinc/composer-installers-extender

2.2: Asset Packagist repository

In the composer.json file, add an entry to the repositories section.

{
  "repositories": [
    { "type": "composer", "url": "https://asset-packagist.org" }
  ]
}

This allows composer to install packages from asset-packagist.org.

2.3: Define installer types

In the extra section of your the composer.json file, add an entry for npm-asset under installer-types.

{
  "extra": {
    "installer-types": ["npm-asset"]
  }
}

This makes composer recognize npm-asset packages and identify the path where they need to be installed.

2.4: Define installer paths

Under the extra section of your composer.json, add an entry for installer-paths.

{
  "installer-paths": {
    "web/libraries/{$name}": [
      "type:drupal-library",
      "type:npm-asset"
    ]
  }
}

This tells composer that NPM asset packages should be installed in Drupal’s libraries directory. If your Drupal document root is not named web, make sure you change the path accordingly.

2.5: Install Sidr JS Libraries

If you did everything correctly, running composer install at this point should automatically install the Sidr JS libraries in Drupal’s libraries directory.

Now, the Drupal Status page should show the Sidr Libraries as installed.

Sidr libraries message on the status report page
Drupal status report saying Sidr libraries installed.

Step 3: Sidr settings

Sidr has certain global settings which apply to all Sidr instances in your project. You can configure these from  the admin/config/user-interface/sidr page. Here’s what you can configure.

Global settings for Sidr module
Global settings for the Sidr module.

Theme

Sidr libraries come with 3 themes: light, dark and bare. The light and dark themes, give you some CSS to start with. However, you still need to write CSS to fine-tune the appearance. Personally, I use and recommend the bare theme which provides minimal CSS so that you can style the contents of the .sidr element as per your requirements.

Auto-close

You can choose auto-close behaviors for Sidr panels.

  • Close on escape: Pressing the Escape key closes open Sidr panels.
  • Close on blur: Interacting with outside elements closes open Sidr panels.

Step 4: Prepare contents

Depending on your needs, you might have one or more Sidr instances. For this article, let’s say you want a sliding panel on the left containing the following elements:

  • Site logo, i.e. the site branding block.
  • The main menu, i.e. the main menu block.

You can achieve this in two different ways as discussed in the following sections.

With a custom region (recommended)

Create a custom region named, say, mobile menu in your theme where you can place whatever blocks you want to show in your Sidr. You can then configure the Sidr plugin to use the contents of this region to populate the collapsible panel (discussed below).

Note: You might have to hide this region using CSS because Sidr will copy/move the contents of the region in to a div.sidr element during its initialization.

Without a custom region

If all your blocks are already present on your page, you can use multiple jQuery selectors in the Source configuration for the Sidr trigger block (discussed below). It is important to note that the Sidr JS library will copy the inner HTML of the specified elements into the Sidr panel. Personally, I find this not very useful because this results in the loss of wrapper elements which make writing CSS difficult. I strongly recommend using the custom region approach.

Step 5: Configure block

Now that the contents for the collapsible region are ready, you can create a Sidr trigger block. This trigger block will provide a button to open/close the Sidr panel. To do this,

  • Go to the Block management page, i.e. admin/structure/block.
  • Click the place block button for the region where you want to place the trigger button, usually somewhere in the header.
  • Choose the Sidr trigger block, configure it and save it.

Some important configuration parameters of the Sidr trigger block have been discussed below.

Sidr block settings form
Sidr block settings

Trigger text and icon

The trigger text is the text which is displayed on the Sidr trigger button. You can also enter some custom HTML in the Advanced settings > Trigger icon field to configure an icon, e.g.,  <i class="fa fa-bars"></i>.

Note: It is compulsory to have either a trigger text or a trigger icon.

Source

The source is content with which the Sidr panel will be populated. It can be one of the following:

  • A jQuery selector: If you provide a jQuery selector, the inner HTML of the selected elements will be copied into the relevant Sidr panel. I recommend using the disable duplication option which makes Sidr move the source elements into the Sidr panel instead of creating copies. Here are some examples:
    • Using a custom region, source should look like .region-mobile-menu or whatever you name your custom region.
    • Without a custom region, you’ll refer to various blocks like #block-site-branding, #block-main-menu, #block-copyright-notice.
  • A URL: If source is a URL, the contents of the URL will be fetched via AJAX and displayed in the Sidr panel.
  • A callback: You can even provide a JavaScript function as the source, in which case, the contents returned by the callable will populate the Sidr panel.

Most Advanced settings are optional and you can learn about them by reading the Sidr documentation. Once you have configured everything, all you’ll be missing is some CSS to bring your Sidr to life.

Feel free to leave comments about problems you face and suggestions you might have. You might want to read the Sidr module’s project page and issue queue for the latest updates.

Conclusion

  • jQuery Sidr is a light-weight (minimally maintained) library for creating collapsible mobile-menu-like panels.
  • The Sidr module for Drupal allows you to create accessible responsive menus containing different types of blocks.
  • If you want to customize things, you can detach Sidr's event listeners.

Next steps

On this page

Thoughts and comments

Recent articles

Sep 16, 2020

Immigrating to Quebec, Canada: How I got a CSQ in 3 weeks

Planning to become a Permanent Resident of Canada in the province of Quebec? Here’s all I know about the CSQ and how I got it in a few weeks.
Jun 6, 2020

Racism in India: My Encounters with Racism

During my 29 years in India, I’ve seen many strange things, one of which is racial discrimination. In this article, I share my experiences and thoughts about racism in India.
May 21, 2020

Extension or Change of Conditions on Work Permit at a Canadian Port of Entry: My Experience and Thoughts

How temporary foreign workers can obtain an extension or change in conditions of work permit at a Candian port of entry.
Apr 12, 2020

Dockerize Drupal with Lando

Learn to use Lando for running Drupal websites in Docker containers and get dockerized Drupal websites running in under 5 minutes.
Mar 22, 2020

Teckin Wi-fi LED Colored Smart Bulbs: Review and Experience

Make your home smarter with budget LED smart bulbs from Teckin that provide warm light, cool light and a tonne of colors.
Mar 21, 2020

Dockerize Drupal with Ddev

Learn to use Ddev for running Drupal websites in Docker containers and get dockerized Drupal websites running in under 5 minutes.