Sidenav
Make your menu responsive with a JS sidenav.
Sidenav allows you to make responsive, mobile-first navigation menu.
We used this method to transform a classical navbar into a easy navigation component in 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 a button or element with
.sidenav-trigger class and a
data-target="" attribute who point 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.
Fixed sidenav
Fix your sidenav using the .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.
Large sidenav
Add the .large class to your sidenav container to get a larger
sidenav. Works in layouts !
Both width sizes are configurable in the SCSS Variables file.
Right aligned
With the .right-aligned 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. |