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">Materio</a>
</div>App Brand Logo
To add only brand logo image use .app-brand-logo class
Tip:
Here showing an Example with PNG image but you can use SVG also. Use
utility classes For example,
.w-px-40,
.h-auto to apply brand image size.
<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-4 border p-4">
<a href="index.html" class="app-brand-link gap-2">
<img src="assets/img/branding/logo.png" class="app-brand-logo w-px-20 h-auto" alt="logo" />
<span class="app-brand-text text-body fw-bold">Materio</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.
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-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-20 h-auto" alt="logo" />
<span class="app-brand-text demo menu-text fw-bold">Materio</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-20 h-auto" alt="logo" />
<span class="app-brand-text menu-text fw-bold">Materio
<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>