@@include("@@autopath/partials/docs/docs-sidebar.html", { "link": "navbar-vertical-aside.html" })

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="@@autopath/assets/vendor/hs-scrollspy/dist/hs-scrollspy.min.js"></script>

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

        
          <script>
            (function() {
              // INITIALIZATION OF SCROLLSPY
              // =======================================================
              new bootstrap.ScrollSpy(document.body, {
                target: '#navbarVerticalNavMenuSettingsEg',
                offset: 10
              })

              new HSScrollspy('#navbarVerticalNavMenuEg', {
                breakpoint: 'lg'
              })
            })();
          </script>

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 () {}