menu

Template Customization

Materialize Admin provides different types of id, classes & attributes to customize the template.

Body Options

<html class="loading" lang="en" data-textdirection="ltr">
<head></head>
<!--Body -->
<body class="vertical-layout vertical-menu-collapsible page-header-dark vertical-modern-menu 2-columns   menu-expanded fixed-navbar" data-open="click" data-menu="vertical-modern-menu" data-color="" data-col="2-columns">
...
</body>  
<!--/ Body -->
</html>    
                           

You can use below mentioned attributes and classes for <body> to customize your application


Attribute Value/Classes Description
class .vertical-layout /
.horizontal-layout
If you want your application's layout to be vertical you'd have to add .vertical-layout as a class to your <body> tag. If you want your application's layout to be horizontal add .horizontal-layout as a class to your <body> tag. (It is mandatory to add any one of these classes to your body tag)
class .vertical-menu-collapsible/
.horizontal-menu
There are two type of navigation menu collapsible and horizontal. To get collapisble menu you would have to have add .vertical-menu-collapisble class to your <body> tag. If you want horizontal menu you'd have to add .horizontal-menu (It is mandatory to add any one of these classes to your body tag)
class .page-header-dark /
.page-header-light
If you want a dark header for your application add .page-header-dark as a class to <body> or if you want a light colored header add class .page-header-light
data-menu vertical-modern-menu /
vertical-menu-nav-dark/
vertical-gradient-menu-template /
vertical-dark-menu-template/
horizontal-menu-template
data-menu atttribute is just for reference to your <body>
data-open click/ hover If you want your data to be open on click you'd have to add
data-open="click"
attribute or if you want your data to open on hover you'd have to add
data-open="hover"
(It is mandatory to add any one of the following)
class menu-collapse If you want default sidemenu collapse then you have to add menu-collapse class in body.
Logo

You can easily change the template logo image directly by changing below HTML code.

Vertical menu

There are two logo image tag. First logo is visible to medium and above screen only. Second logo will be visible to below medium screen only.

Two different logo is required only for Vertical Modern Menu, Vertical Gradient Menu, and Vertical Dark Menu Template only as this template has complex case of logo background color.

        
<div class="brand-sidebar">
  <h1 class="logo-wrapper">
    <a class="brand-logo darken-1" href="index.html">
      <img class="show-on-medium-and-down hide-on-med-and-up" src="../../../app-assets/images/logo/materialize-logo-color.png" alt="materialize logo">
      <img class="hide-on-med-and-down " src="../../../app-assets/images/logo/materialize-logo.png" alt="materialize logo">      
      <span class="logo-text hide-on-med-and-down">Materialize</span>
    </a>
    <a class="navbar-toggler" href="#"><i class="material-icons">radio_button_checked</i></a></h1>
  </h1>
</div>
         

Note: Navabar Dark Template also use only a single logo image in both large and medium and small screens.


Horizontal menu

Horizontal Template use only a single logo image on both large and medium and small screens.

                      
<div class="brand-sidebar">
  <h1 class="logo-wrapper">
    <a class="brand-logo darken-1" href="index.html">
      <img src="../../../app-assets/images/logo/materialize-logo.png" alt="materialize logo">
      <span class="logo-text hide-on-med-and-down">Materialize</span>
    </a>
    <a class="navbar-toggler" href="#"><i class="material-icons">radio_button_checked</i></a></h1>
</div>
                       
;