App Brand

Branding is very essential for any application. App brand is the starter key for all the templates. Here, you will find documentation for different brand options usage Like, Brand Logo, Name, Subtext etc…. Use .app-brand class for app brand wrapper.


App Brand Name

To add only brand name use .app-brand-text class.

<div class="app-brand mb-4 border p-4">
  <a href="javascript:void(0)" class="app-brand-text text-body fw-bold">Materialize</a>
</div>

To add only brand logo image use .app-brand-logo class

<div class="app-brand mb-4 border p-4">
  <a href="index.html"  class="app-brand-logo">
    <img src="assets/img/branding/logo.png" class="w-px-20 h-auto" alt="logo">
  </a>
</div>

Logo with Brand Name

To use brand logo and name in app brand use .app-brand-text and .app-brand-logo class. We are using this option in our live demo. User can update logo and brand name as per their requirement.

<div class="app-brand mb-3 border p-3">
  <a href="index.html" class="app-brand-link gap-2">
    <img src="assets/img/branding/logo.png" class="app-brand-logo w-px-30 h-auto" alt="logo" />
    <span class="app-brand-text text-body fw-bold">Materialize</span>
  </a>
</div>

App Brand within Navbar

To use app brand within navbar, wrap App Brand with-in Navbar .navbar. You can also use Navbar options i.e size, color, position while using with App Brand.

<nav class="navbar navbar-example navbar-expand-xl bg-navbar-theme">
  <div class="container-fluid">
    <div class="app-brand">
      <a href="index.html" class="app-brand-link gap-2">
        <img src="assets/img/branding/logo.png" class="app-brand-logo w-px-30 h-auto" alt="logo">
        <span class="app-brand-text text-body fw-bold">Materialize</span>
      </a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="navbar-nav me-auto">
        <li class="nav-item active">
          <a class="nav-link" href="javascript:void(0)">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

App Brand within Vertical Menu

Use app brand logo, name and subtext easily with in vertical menu as shown in below example.

Brand Name

Use brand name easily with in vertical menu as shown in below example.

<aside id="layout-menu1" class="position-relative menu-vertical menu mb-4 bg-menu-theme h-px-350">
  <div class="app-brand demo px-6 ms-2">
    <a href="index.html" class="app-brand-text demo menu-text fw-bold">Brand</a>
  </div>
  <div class="menu-divider mt-0  ">
  </div>
  <!-- Links -->
  <ul class="menu-inner py-1">
    <li class="menu-item">
      <a href="javascript:void(0)" class="menu-link">
        <i class="menu-icon tf-icons ri-home-line"></i>
        <div data-i18n="Home">Home</div>
      </a>
    </li>
  
    <li class="menu-item">
      <a href="javascript:void(0)" class="menu-link">
        <i class="menu-icon tf-icons ri-chat-4-line"></i>
        <div data-i18n="About">About</div>
      </a>
    </li>
  
    <li class="menu-item">
      <a href="javascript:void(0)" class="menu-link">
        <i class="menu-icon tf-icons ri-mail-line"></i>
        <div data-i18n="Email">Email</div>
      </a>
    </li>
  
    <li class="menu-item">
      <a href="javascript:void(0)" class="menu-link">
        <i class="menu-icon tf-icons ri-file-list-2-line"></i>
        <div data-i18n="Elements">Elements</div>
      </a>
    </li>
  
    <li class="menu-item">
      <a href="javascript:void(0)" class="menu-link">
        <i class="menu-icon tf-icons ri-box-3-line"></i>
        <div data-i18n="Widget">Widget</div>
      </a>
    </li>
  
    <li class="menu-item">
      <a href="javascript:void(0)" class="menu-link">
        <i class="menu-icon tf-icons ri-vip-crown-line"></i>
        <div data-i18n="Icons">Icons</div>
      </a>
    </li>
  
    <li class="menu-item">
      <a href="javascript:void(0)" class="menu-link">
        <i class="menu-icon tf-icons ri-user-3-line"></i>
        <div data-i18n="Contact">Contact</div>
      </a>
    </li>
  </ul>
</aside>

Brand Logo and Name

Use app brand logo and name easily with in vertical menu as shown in below example.

<aside id="layout-menu2" class="position-relative menu-vertical menu mb-3 bg-menu-theme h-px-350">

  <div class="app-brand demo">
    <a href="index.html" class="app-brand-link gap-2">
      <img src="../../assets/img/branding/logo.png" class="app-brand-logo w-px-30 h-auto" alt="logo" />
      <span class="app-brand-text demo menu-text fw-bold">Materialize</span>
    </a>
  </div>

  <div class="menu-divider mt-0  ">
  </div>
  <!-- Links -->
  <ul class="menu-inner py-1">
    <li class="menu-item">
      <a href="javascript:void(0)" class="menu-link">
        <i class="menu-icon tf-icons ri-home-line"></i>
        <div data-i18n="Home">Home</div>
      </a>
    </li>
  
    <li class="menu-item">
      <a href="javascript:void(0)" class="menu-link">
        <i class="menu-icon tf-icons ri-chat-4-line"></i>
        <div data-i18n="About">About</div>
      </a>
    </li>
  
    <li class="menu-item">
      <a href="javascript:void(0)" class="menu-link">
        <i class="menu-icon tf-icons ri-mail-line"></i>
        <div data-i18n="Email">Email</div>
      </a>
    </li>
  
    <li class="menu-item">
      <a href="javascript:void(0)" class="menu-link">
        <i class="menu-icon tf-icons ri-file-list-2-line"></i>
        <div data-i18n="Elements">Elements</div>
      </a>
    </li>
  
    <li class="menu-item">
      <a href="javascript:void(0)" class="menu-link">
        <i class="menu-icon tf-icons ri-box-3-line"></i>
        <div data-i18n="Widget">Widget</div>
      </a>
    </li>
  
    <li class="menu-item">
      <a href="javascript:void(0)" class="menu-link">
        <i class="menu-icon tf-icons ri-vip-crown-line"></i>
        <div data-i18n="Icons">Icons</div>
      </a>
    </li>
  
    <li class="menu-item">
      <a href="javascript:void(0)" class="menu-link">
        <i class="menu-icon tf-icons ri-user-3-line"></i>
        <div data-i18n="Contact">Contact</div>
      </a>
    </li>
  </ul>
</aside>

Brand Logo, Name with Subtext

Use brand logo, name & subtitle easily with in vertical menu as shown in below example. Subtitle can be use to display role, status, position etc..

<aside id="layout-menu3" class="position-relative menu-vertical menu mb-4 bg-menu-theme h-px-350">

  <div class="app-brand demo">
    <a href="index.html" class="app-brand-link gap-2">
      <img src="assets/img/branding/logo.png" class="app-brand-logo w-px-30 h-auto" alt="logo" />
      <span class="app-brand-text menu-text fw-bold">Materialize
        <br />
        <span class="fs-tiny fw-medium">Admin User</span>
      </span>
    </a>
    <a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto">
      <i class="ri-menu-line d-none d-lg-block ri-24px align-middle"></i>
      <i class="ri-close-line d-block d-lg-none ri-24px align-middle"></i>
    </a>
  </div>

  <div class="menu-divider mt-0  ">
  </div>
  <!-- Links -->
  <ul class="menu-inner py-1">
    <li class="menu-item">
      <a href="javascript:void(0)" class="menu-link">
        <i class="menu-icon tf-icons ri-home-line"></i>
        <div data-i18n="Home">Home</div>
      </a>
    </li>

    <li class="menu-item">
      <a href="javascript:void(0)" class="menu-link">
        <i class="menu-icon tf-icons ri-chat-4-line"></i>
        <div data-i18n="About">About</div>
      </a>
    </li>

    <li class="menu-item">
      <a href="javascript:void(0)" class="menu-link">
        <i class="menu-icon tf-icons ri-mail-line"></i>
        <div data-i18n="Email">Email</div>
      </a>
    </li>

    <li class="menu-item">
      <a href="javascript:void(0)" class="menu-link">
        <i class="menu-icon tf-icons ri-file-list-2-line"></i>
        <div data-i18n="Elements">Elements</div>
      </a>
    </li>

    <li class="menu-item">
      <a href="javascript:void(0)" class="menu-link">
        <i class="menu-icon tf-icons ri-box-3-line"></i>
        <div data-i18n="Widget">Widget</div>
      </a>
    </li>

    <li class="menu-item">
      <a href="javascript:void(0)" class="menu-link">
        <i class="menu-icon tf-icons ri-vip-crown-line"></i>
        <div data-i18n="Icons">Icons</div>
      </a>
    </li>

    <li class="menu-item">
      <a href="javascript:void(0)" class="menu-link">
        <i class="menu-icon tf-icons ri-user-3-line"></i>
        <div data-i18n="Contact">Contact</div>
      </a>
    </li>
  </ul>
</aside>

Brand Image

Use only image in the app brand for menu expanded and collapsed state. For full image use .app-brand-img class and for logo image .app-brand-img-collapsed class (While menu is collapsed).

<aside id="layout-menu4" class="position-relative menu-vertical menu mb-4 bg-menu-theme h-px-350">
  <div class="app-brand demo py-4 px-6 ms-2">
    <a href="index.html" class="d-block w-100">
      <img src="assets/img/brand-img.png" alt="" class="app-brand-img w-px-100">
      <img src="assets/img/branding/brand-img-small.png" alt="" class="app-brand-img-collapsed w-px-30">
    </a>
    <a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto">
      <i class="ri-menu-line d-none d-lg-block ri-24px align-middle"></i>
      <i class="ri-close-line d-block d-lg-none ri-24px align-middle"></i>
    </a>
  </div>

  <div class="menu-divider mt-0  ">
  </div>
  <!-- Links -->
  <ul class="menu-inner py-1">
    <li class="menu-item">
      <a href="javascript:void(0)" class="menu-link">
        <i class="menu-icon tf-icons ri-home-line"></i>
        <div data-i18n="Home">Home</div>
      </a>
    </li>

    <li class="menu-item">
      <a href="javascript:void(0)" class="menu-link">
        <i class="menu-icon tf-icons ri-chat-4-line"></i>
        <div data-i18n="About">About</div>
      </a>
    </li>

    <li class="menu-item">
      <a href="javascript:void(0)" class="menu-link">
        <i class="menu-icon tf-icons ri-mail-line"></i>
        <div data-i18n="Email">Email</div>
      </a>
    </li>

    <li class="menu-item">
      <a href="javascript:void(0)" class="menu-link">
        <i class="menu-icon tf-icons ri-file-list-2-line"></i>
        <div data-i18n="Elements">Elements</div>
      </a>
    </li>

    <li class="menu-item">
      <a href="javascript:void(0)" class="menu-link">
        <i class="menu-icon tf-icons ri-box-3-line"></i>
        <div data-i18n="Widget">Widget</div>
      </a>
    </li>

    <li class="menu-item">
      <a href="javascript:void(0)" class="menu-link">
        <i class="menu-icon tf-icons ri-vip-crown-line"></i>
        <div data-i18n="Icons">Icons</div>
      </a>
    </li>

    <li class="menu-item">
      <a href="javascript:void(0)" class="menu-link">
        <i class="menu-icon tf-icons ri-user-3-line"></i>
        <div data-i18n="Contact">Contact</div>
      </a>
    </li>
  </ul>
</aside>
© 2017- Pixinvent, Hand-crafted & Made with ❤️