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.
To add only brand logo image use .app-brand-logo
class
.w-px-40,
.h-auto
to apply brand image size.
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.
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-20 h-auto" alt="logo">
<span class="app-brand-text text-body fw-bold">Sneat</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>
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 bx bx-home"></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 bx bx-message"></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 bx bx-envelope"></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 bx bx-box"></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 bx bx-cube"></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 bx bx-crown"></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 bx bx-user"></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">Sneat</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 bx bx-home"></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 bx bx-message"></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 bx bx-envelope"></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 bx bx-box"></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 bx bx-cube"></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 bx bx-crown"></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 bx bx-user"></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">Sneat
<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="bx bx-menu d-none d-lg-block bx-sm align-middle"></i>
<i class="bx bx-x d-block d-lg-none bx-sm 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 bx bx-home"></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 bx bx-message"></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 bx bx-envelope"></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 bx bx-box"></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 bx bx-cube"></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 bx bx-crown"></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 bx bx-user"></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="bx bx-menu d-none d-lg-block bx-sm align-middle"></i>
<i class="bx bx-x d-block d-lg-none bx-sm 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 bx bx-home"></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 bx bx-message"></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 bx bx-envelope"></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 bx bx-box"></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 bx bx-cube"></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 bx bx-crown"></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 bx bx-user"></i>
<div data-i18n="Contact">Contact</div>
</a>
</li>
</ul>
</aside>