Navbar Vertical Aside

Vertical navbar.

How to use

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

              
                <script src="../assets/vendor/hs-navbar-vertical-aside/hs-navbar-vertical-aside.min.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 navbar vertical navigation
                    var sidebar = $('.js-navbar-vertical-aside').hsSideNav();
                  });
                </script>

Basic example

Methods

Parameters Description Default value
mainContainer Page container body
minClass Class for sidebar on mini mode .navbar-vertical-aside-mini-mode
closedClass Class for sidebar when closed .navbar-vertical-aside-closed-mode
transitionOnClassName Class for transition effect .navbar-vertical-aside-transition-on
mobileOverlayClass Class for overlay .navbar-vertical-aside-mobile-overlay
toggleInvokerClass Element for toggle sidebar .navbar-vertical-aside-toggle-invoker
subMenuClass Submenu class .navbar-vertical-aside-submenu
subMenuInvokerClass Element for toggle submenu in sidebar .navbar-vertical-aside-open-submenu-invoker
subMenuInvokerActiveClass Class for opened submenu in sidebar .show
hasSubMenuClass The element that contains the submenu .navbar-vertical-aside-has-menu
subMenuAnimationSpeed Animation speed for submenu 200
subMenuOpenEvent Action which will be toggle submenu (hover, click) hover
showClassNames Add class to main container to control the display sidebar showClassNames: { xs: 'navbar-vertical-aside-show-xs', sm: 'navbar-vertical-aside-show-sm', md: 'navbar-vertical-aside-show-md', lg: 'navbar-vertical-aside-show-lg', xl: 'navbar-vertical-aside-show-xl' },
onMini Callback event, called when sidebar is mini mode () {}
onFull Callback event, called when sidebar is full mode () {}