Sidebar Navigation

Sidebar navigation to the right or left side of a page.

How to use?

Wrap any block in a parent element with an ID or class and add the same ID in the JS init function of the hs.side-nav.js plugin.

Copy-paste the following <script> near the end of your pages under JS Nova to enable it.

            
              <script src="../../assets/js/components/hs.side-nav.js"></script>
            
          

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

            
              <script>
                $(document).on('ready', function () {
                  // initialization of sidebar navigation component
                  $.HSCore.components.HSSideNav.init('.js-side-nav');
                });
              </script>
            
          

JavaScript behavior

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-target="".

Attribute Description
data-target Sidebar ID.
data-close-invoker The item ID to click on which the sidebar closes.