Materialize SideNav Menu : SideNav is one of the main component of any webpage which provides users side navigation. It is very easy to create sidenav in Materialize framework. As it is jQuery plugin so it needs the initialization. Here in this tutorial we are going to explain how you can create side navigation Menu in Materialize. You can also use our online editor to edit and run the code online.

Materialize SideNav Example

There are basically two parts of sidenav- 1. HTML, 2. jQuery. HTML part contains the sidenav html menu item stuffs and jQuery contains the script to initialize the side navigation menu. Let us create a simple navigation menu as below-

 

      
Item 1
      
Item 2
      
Item 3
      

        

          

            Dropdownarrow_drop_down
            

              

                
Dropdown Item 1
                
Dropdown Item 2
                
Dropdown Item 3
              
            
          
        
      
    
menu
     

If you run the above example it will produce the output something like this-

Materialize Dropdown : Materialize provides dropdown which can be embed with the buttons. Here in this tutorial we are going to explain how you can create dropdown buttons in Materialize framework. You can also use our online editor to edit and run the code online.

Materialize Dropdown Example

Let us create very basic dropdown in materialize- create a button and add class dropdown-button to it. Add data-activates it might be id of the ul tag. Here is the complete example-

Dropdown Menu
 
  

    
Item 1
    
Item 2
    
Item 4
    
Item 5
    

    
Item 5
  

If you run the above example it will produce the output something like this-

Options:

• induration : The duration of the transition enter in milliseconds. Default time for this is 300ms
• outduration : This is used to transition out in millisecond, Default time for this is 225ms.
• constrainwidth : If true, constrainWidth to the size of the dropdown activator. Default is set true.
• hover : This is used to open dropdown on hover by default it is false, if you want to open on hover set it true.
• gutter : This defines the spacing from the aligned edge. Default value is 0.
• beloworigin : This is used to set whether the dropdown will open below the activator, if you want to open dropdown below the activator set it true. Default is set false.
• alignment : Defines the edge the menu is aligned to. Default is set ‘left’
• stoppropagation : If true, stops the event propagating from the dropdown origin click handler. Default is set false

Example

You can use the above options simply as below-

Materialize Tooltips: Tooltips are basically used to provide the extra information about the elements. It is very easy to create Tooltips in Materialize framework. Here in this tutorial we are going to explain how you can create and use the tooltips in Materialize. You can also use our online editor to edit and run the code online.

Materialize Tooltips Example

To Add Tooltip first Create a button and Add class tooltipped, attribute data-position=”bottom”,data-delay=”50″ and data-tooltip=”This is Dummy Tooltip” simply as below-

Hover Me! 

In the above example we have create a simple tooltip for a button. If you run the above example it will create output something like this-

Options

Following options are available in Materialize Tooltip-

• delay: Delay time before tooltip appears, Default is 350 ms.
• tooltip: Text to display on hover. It can be HTML if you have set html to true.
• position: This is used to set the position of the tooltip- it can be top, left, bottom, right. Default position is bottom.
• html: This is used to set true to display the html content in tooltip. Default is false.

Remove Tooltip

You can remove tooltip using jQuery simply as below –

Where selector can be id, class of the button.

Tooltip Position : Top

data-position=”top” is used to place the Tooltip at top –

If you run the above example it will give following output-

Tooltip Position : Left

data-position=”left” is used to place the Tooltip at Left –

If you run the above example it will give following output-

Tooltip Position : Bottom

data-position=”bottom” is used to place the Tooltip at Bottom –

If you run the above example it will give following output-

Tooltip Position : Right

data-position=”right” is used to place the Tooltip at Right –

If you run the above example it will give following output-

Materialize Toasts: Toasts are basically used to provide the unobtrusive alerts to the user. Here in this tutorial we are going to explain how you can create Toasts in Materialize. You can also use our online editor to edit and run the code online.

Materialize Toasts Example

Materialize.toast() function is used to create the toast in Materialize framework. It accepts mainly four parameters- 1. text, 2,. timeout. 3. rounded class, 4. callback. Text is the message that will be displayed in toast and timeout is used to add the time in milliseconds after which the text message will be disappeared. Third parameter is used for rounded toast and fourth parameter is callback. Third and fourth parameters are optional. Here is a very basic example of toast-

 First Toast   

If you run the above example it will produce the output something like this –

Custom HTML

Sometimes we need to add custom HTML in toast content,you can add HTML content in Toast simply as below-

 

Custom Html Toast

If you run the above example will generate output something like this-

Callback

You can add a callback function when the toast is dissmissed –

 

Toast Callback 

Alert will be triggered when the Toast is dismissed.

Rounded Toast

To create rounded toast you can simply pass the third parameter as ’rounded’ –

 
Rounded Toast

If you run the above example it will produce the output something like this –

Materialize Collapsible: Collapsible are accordion that expands when you click on it. It displays only the relevant content and hides other content.
Materialize provides collapsible with various options which can be used easily anywhere. Here in this tutorial we are going to explain how you can create collapsible in Materialize. You can also use our online editor to edit and run the code online.

Materialize Collapsible Example

Let us create a very basic and simple Collapsible-

    

      
perm_mediaItem 1
      
This is dummy text.
    
    

      
languageItem 2
      
This is dummy text.
    
    

      
settings_voiceItem 3
      
This is dummy text.
    
  
 

In the above example we have created a very basic collapsible in Materialize. As we know it’s jQuery plugin so do not forget to initialize it.If you run the above example it will produce the output something like this –

Popout

To create popout collapsible add the class=”popout” to ul simply as below –

  

    

      
perm_mediaItem 1
      
This is dummy text.
    
    

      
languageItem 2
      
This is dummy text.
    
    

      
settings_voiceItem 3
      
This is dummy text.
    
  
 

If you run the above example it will produce output something like this –

Preselected Section | Active Section

Sometimes we need to open some section by default or using JavaScript, to do this simply add the active class to header. Here is an example of Active class –

  

    

      
perm_mediaItem 1
      
This is dummy text.
    
    

      
languageItem 2
      
This is dummy text.
    
    

      
settings_voiceItem 3
      
This is dummy text.
    
  
 

If you run the above example it will produce output something like this –

Options

Following options are available –

• accordion(boolean): This is used to change the collapsible behavior to expandable instead of the default accordion style.
• onOpen(function): This is callback function triggered when collapsible is opened.
• onClose(function): This is callback function triggered when collapsible is closed.

Collapsible Types

There are basically two types of collapsible avaialable in Materialize –

1. Accordion
2. Expandable

Let us understand both one by one –

Accordion

data-collapsible=”accordion” is used to create accodion. In Acoordion one section is opened at a time –

  

    

      
perm_mediaItem 1
      
This is dummy text.
    
    

      
languageItem 2
      
This is dummy text.
    
    

      
settings_voiceItem 3
      
This is dummy text.
    
  
 

Expandable

data-collapsible=”expandable” is used to create expandable collapsible. In Expandable collapsible more than one section can be opened at the same time –

  

    

      
perm_mediaItem 1
      
This is dummy text.
    
    

      
languageItem 2
      
This is dummy text.
    
    

      
settings_voiceItem 3
      
This is dummy text.
    
  
 

Run the above example and click on more than one section to open the other section at the same time. The output of the above example will look like something this –

Materialize Preloader : Loaders are basically used to indicate that some background process/activity is happening. Materialize provides various loaders such as linear and circular with various options to customize it. Here in this tutorial we are going to explain how to create loaders in Materialize. You can also use our online editor to edit and run the code online.

Materialize Preloader | Loading | Loader Example

There are following types of Preloader –

• 1. Linear
• 2. Circular

Now let us go one by one to understand the loaders with example & demo –

Linear Progress Bar

There are basically two types of Linear Progress Bar-

• 1. Determinate
• 2. Indeterminate

Determinate

Create a div with class=”determinate”, add percentage of progress by adding style width(such as style=”width:60%”) and wrap this div by a div with class=”progress”.

If you run the above example it will produce the output something like this –

Indeterminate

Create a div with class=”indeterminate” and wrap this div by a div with class=”progress”.

Circular Loader | Loading

Materialize provides various types of Circular Loaders of different-different colors and sizes. Let us create a simple circular loader in materialize –

If you run the above example it will produce the output something like this –

More Examples coming soon..

Materialize Pagination : Pagination is used to show long data with the help of links to different-different parts. Materialize provides classes to create pagination. Here in this tutorial we are going to explain how you can create pagination in materialize framework. You can also use our online editor to edit and run the code online.

Materialize Pagination Example

First create ul with class=”pagination” and then add li and pagination link. You can use Class=”active” to show the active link. Here is an example of simple pagination-

    
chevron_left
    
1
    
2
    
3
    
4
    
chevron_right
  

If you run the above example it will produce the output something like this –

Disable Pagination Link

You can disable the pagination by simply adding the class=”disabled” to li element simply as below-

    
chevron_left
    
1
    
2
    
3
    
4
    
chevron_right
  

If you run the above example it will produce the output something like this –

Materialize Autocomplete : Autocomplete is basically used to provide the possible values as suggestion to the user. Here in this tutorial we are going to explain how you can create Autocomplete in MaterializeCSS framework. You can also use our online editor to edit and run the code online.

Materialize Autocomplete Example

First create a input box and then initialize the autocomplete using jQuery. Here is a simple example of Autocomplete in MaterializeCSS-

          search
          
          Autocomplete
  
 

Autocomplete is part of jQuery plugin so it needs to be initialized as above. If you run the above example it will produce the output something like this –

Autocomplete Ajax

Sometimes while working with dynamic applications we get data from JSON or API and we display that data in autocomplete. You can get data for Autocomplete using Ajax from the specified URL. Here is an example of ajax autocomplete-

$(document).ready(function() {
  $(function() {
    $.ajax({
      type: 'GET',
      url: 'https://mywebsite.com/getAllcountryList',
      success: function(response) {
        var countryArray = response;
        var countryList = {};
        for (var i = 0; i < countryArray.length; i++) {
          countryList[countryArray[i].name] = countryArray[i];
        }
        $('input.autocomplete').autocomplete({
          data: countryList
        });
      }
    });
  });
});

Autocomplete

Materialize Autocomplete Not Working?

Sometimes we face issue in autocomplete initialization, the possible reason could be you have not initialized the jQuery for autocomplete.

selector – class, id of input box.