How to add the SlickNav mobile menu

The SlickNav library is a lightweight JavaScript mobile menu that's very easy to set up.  In CSS, the displays of the regular menu and mobile menu are set depending on the current browser viewport size.

Download the library to your local theme, or use a CDN.  For this example, I'm using  Add the JS and CSS assets to the theme's library YML file. The theme name for this example is slicknavdemo:

Add a DOM ready event handler in a JS file in your theme's js directory:

Add the CSS, including any styling:

Finally, add the library to the page template. If the page template doesn't exist in your templates directory, copy the page.html.twig template from the base theme to your theme's templates directory. In the template, between the header comments and the opening page wrapper, add the following line to attach the library:

{{ attach_library('slicknavdemo/slicknav') }}

To see a live preview, view this site on a mobile phone or resize the browser.