Mobile Nav
The mobile nav component is a vanilla JS component that aims to do a single thing - toggle a class on the <html> element, to let other components on the page control how the mobile menu should be shown. It's this hands-off approach that allows each project to use this component, withough being opinionated at all.
Despite it being a glorified "class-toggler" - there are some handy utilities specifically for mobile menus.
Usage
Import the @sgroup/mobile-nav module, and call its constructor.
import MobileNav from '@sgroup/mobile-nav';
new MobileNav({
// ....
});
Available options
| Option | Type | Default | Description |
|---|---|---|---|
openSelector | String | [data-mobile-nav-open] | The selector string for all open triggers (supports multiple) |
closeSelector | String | [data-mobile-nav-close] | The selector string for all close triggers (supports multiple) |
activeClass | String | mobile-nav-open | The class to toggle on the <html> element when clicked. |
classElement | HTMLElement | document.documentElement | The element the active class should be applied to. |
enableScrollLock | Boolean | true | Whether to lock scrolling when triggered. |
scrollLockElement | HTMLElement | document.body | The element scroll-locking should apply to. |
scrollLockOptions | Object | { reserveScrollBarGap: true } | Settings for the body-scroll-lock package. |