Sidenav

Make your menu responsive with a JS sidenav.

Link 1 Link 2 Link 3 Link 4

Sidenav allows you to make responsive, mobile-first navigation menu.
We used this method to transform a classic navbar into a easy navigation component for smaller screen resolution.
Please note that the sidenav must be placed outside of the header, nav, main or footer HTML element.

To use the sidenav, you must have an element with the data-target="" attribute pointing to the targeted sidenav id.
The sidenav id must be the same as data-target.

JavaScript initialization

Once HTML was setup, you can activate sidenav with this simple code.
Just pass the id of your sidenav you want to activate.

To know all the ways to initialize a JS component, please read the JS Init page.

Fixed sidenav

Fix your sidenav using the .sidenav-fixed class. This makes it visible on any screen larger than .md breakpoint.
Note that you can't trigger a fixed sidenav on a screen larger than .md breakpoint.

Sidenav right

With the .sidenav-right class added to your sidenav container, you can align your sidenav on the right side of your website.
Works in layouts too !

Options

Property Default value Description
overlay true Toggle overlay when sidenav is active.
bodyScrolling false Enable or disable bodyScrolling when the sidenav is active and over content.
animationDuration 300 Opening and closing animation duration in ms.

Methods

Method Description
.open() Open sidenav
.close() Close sidenav
.overlay(boolean) Enable / disable overlay, works only if overlay option is enabled.
Example : exampleSidenav.overlay(true);

Events

Event Description
ax.sidenav.setup Event sent when the sidenav has been setup.
ax.sidenav.open Event sent when the open() method is called.
ax.sidenav.opened Event sent when the sidenav has been opened.
ax.sidenav.close Event sent when the close() method is called.
ax.sidenav.closed Event sent when the sidenav has been closed.

Styling

CSS Variable Default value Description
--ax-sidenav-width 12rem Custom the sidenav width.
The layout will adapt by itself.
--ax-sidenav-z-index 710 Sidenav z-index.
--ax-sidenav-logo-height 3rem Sidenav logo height.
--ax-sidenav-header-height 5rem Sideanv header minimum height.