materialize
  1. materialize-sidenav
PreviousNext

Materialize Sidenav

The Materialize Sidenav is a navigation component that allows users to easily navigate through a website. It is a vertical menu bar that can be positioned on the left or right side of the screen and can slide out when needed. This component is a great way to organize and display content to users.

Syntax

To create a Materialize Sidenav, you will need to add the following HTML code:

<nav>
  <ul class="sidenav" id="mobile-demo">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Note that the id attribute is important as it is used to initialize the Sidenav in JavaScript.

To initialize the Sidenav, you will need to add the following JavaScript code:

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

Use and Importance

The Materialize Sidenav is an important component for any website that requires easy navigation. It is especially useful for mobile devices where screen space is limited. The Sidenav allows users to quickly access content without having to scroll through the entire page. It also allows website designers to organize content in a visually appealing way.

Example

Here is an example of how a Materialize Sidenav can be used:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Materialize Sidenav Example</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var elems = document.querySelectorAll('.sidenav');
      var instances = M.Sidenav.init(elems);
    });
  </script>
</head>
<body>
  <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="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </nav>

  <ul class="sidenav" id="mobile-demo">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>

  <h1>Hello World</h1>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non ipsum sit amet lacus porta elementum. <br>Etiam sagittis, purus ac tempor tempor, elit quam laoreet eros, at posuere metus quam egestas mauris.</p>
</body>
</html>

In this example, the Sidenav is initialized using JavaScript and is triggered by a button at the top of the page. The Sidenav contains links to various pages on the website and can be hidden and shown based on the user's interaction.

Summary

The Materialize Sidenav is an important component for any website that requires easy and organized navigation. It is easy to use and customize, and the JavaScript initialization makes it a great choice for designers who want to add interactivity to their websites. With its ability to slide in and out, it is perfect for mobile devices and can help improve the overall user experience.

ScrollspyTabs
Published on: