Materialize CSS sidenav 'options' not defined

Question

I used the following code to for the NavBar found in the materializecss website.

<nav>
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo">Logo</a>
      <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
      <ul class="right hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li><a href="collapsible.html">Javascript</a></li>
        <li><a href="mobile.html">Mobile</a></li>
      </ul>
    </div>
</nav>

<ul class="sidenav" id="mobile-demo">
    <li><a href="sass.html">Sass</a></li>
    <li><a href="badges.html">Components</a></li>
    <li><a href="collapsible.html">Javascript</a></li>
    <li><a href="mobile.html">Mobile</a></li>
</ul>

The documentation said to use the following JavaScript code to initialize the plugin.

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems, options);
  });

But, when running it says

'options' is not defined.

I don't want to use jQuery for this purpose. How can I fix this?

@AravindS I don't know. I just copied the code form the materailizecss website. — Sagar Bahadur Tamang, Jul 16 '18 at 05:49
Checkout the docs here for options, https://materializecss.com/sidenav.html#options — Aravind S, Jul 16 '18 at 05:52

wscourge · Accepted Answer · 2018-07-16T05:34:44.563

34

Because there is no options variable in your js code. Instead, use {} for default options, like below:

document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.sidenav');
  var instances = M.Sidenav.init(elems, {});
});

If you do want to change any defaults, they are documented here:

{
    edge: 'left',
    draggable: true,
    inDuration: 250,
    outDuration: 200,
    onOpenStart: null,
    onOpenEnd: null,
    onCloseStart: null,
    onCloseEnd: null,
    preventScrolling: true
}

edited Jul 16 '18 at 05:34

answered Jul 16 '18 at 05:29

wscourge

10,657
14
59
80

Thanks a lot. It worked. I should have read the documentation better. – Sagar Bahadur Tamang Jul 16 '18 at 05:51
3

Pleasure is mine. Don't worry, it is a mistake on their side, too. They shouldn't add any invalid code to their docs. – wscourge Jul 16 '18 at 05:55

Materialize CSS sidenav 'options' not defined

1 Answers1