Sash – Bootstrap 5 Admin & Dashboard HTML Template

How to add Sticky Header

Add sticky class as shown below For Particular div 

	
		
	
	
    
<!-- STICKY JS -->
<script src="../assets/js/stiky.js"></script>
How to Add Perfect pscroll

You can Declare Both id's and classes

You can Declare classes in place of pscroll

	
		
		
	
    

<!-- Perfect SCROLLBAR JS -->
<script src="../assets/plugins/p-scroll/perfect-scrollbar.js"></script>
<script src="../assets/plugins/p-scroll/pscroll.js"></script>

Below js is in p-scroll-1.js(assets/js/p-scroll-1.js)



//P-scrolling
const ps = new PerfectScrollbar('.app-sidebar', {
	useBothWheelAxes:true,
	suppressScrollX:true,
});

Note : After Changing scss you must run gulp command i.e, gulp watch . Refer gulp page for more gulp commands click here.

Type URL
Plugin Link https://plugins.jquery.com/perfect-scrollbar/
How to Add Loader
	
		
	
	

	
	
    
<!-- Custom js-->
<script src="../assets/js/custom.js"></script>

Below js is in custom.js(assets/js/custom.js)


// ______________ PAGE LOADING
$(window).on("load", function(e) {
	$("#global-loader").fadeOut("slow");
})

Note : After Changing scss you must run gulp command i.e, gulp watch . Refer gulp page for more gulp commands click here.

How to Add Back To Top
	
		
		
	
	
		
		
	
    <!-- Custom js-->
<script src="../assets/js/custom.js"></script>

Below js is in custom.js(assets/js/custom.js)


// ______________ BACK TO TOP BUTTON
$(window).on("scroll", function(e) {
	if ($(this).scrollTop() > 0) {
		$('#back-to-top').fadeIn('slow');
	} else {
		$('#back-to-top').fadeOut('slow');
	}
});
$(document).on("click", "#back-to-top", function(e) {
	$("html, body").animate({
		scrollTop: 0
	}, 600);
	return false;
});

Note : After Changing scss you must run gulp command i.e, gulp watch . Refer gulp page for more gulp commands click here.

How to Add FullScreen in Header

Add class fullscreen-button to icon as shown below For Particular Icon 

	
		
    
<!-- Custom js-->
<script src="../assets/js/custom.js"></script>

Below js is in custom.js(assets/js/custom.js)


// ______________Full screen
$(document).on("click", ".fullscreen-button", function toggleFullScreen() {
	$('html').addClass('fullscreen-button');
	if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) {
		if (document.documentElement.requestFullScreen) {
			document.documentElement.requestFullScreen();
		} else if (document.documentElement.mozRequestFullScreen) {
			document.documentElement.mozRequestFullScreen();
		} else if (document.documentElement.webkitRequestFullScreen) {
			document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
		} else if (document.documentElement.msRequestFullscreen) {
			document.documentElement.msRequestFullscreen();
		}
	} else {
		$('html').removeClass('fullscreen-button');
		if (document.cancelFullScreen) {
			document.cancelFullScreen();
		} else if (document.mozCancelFullScreen) {
			document.mozCancelFullScreen();
		} else if (document.webkitCancelFullScreen) {
			document.webkitCancelFullScreen();
		} else if (document.msExitFullscreen) {
			document.msExitFullscreen();
		}
	}
})
How to Add Tooltip

Add The HTML Properties data-bs-toggle, data-bs-placement, title and Property Values to Button as shown below For the Particular button

	
		
    
<!-- Custom js-->
<script src="../assets/js/custom.js"></script>

Below js is in custom.js(assets/js/custom.js)

    
// ___________TOOLTIP
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
	return new bootstrap.Tooltip(tooltipTriggerEl)
})
How to Add Popover

Add The HTML Properties data-bs-toggle, data-bs-container, data-bs-placement, title,data-bs-content and Property Values to Button as shown below For the Particular button

	
		
    
<!-- Custom js-->
<script src="../assets/js/custom.js"></script>

Below js is in custom.js(assets/js/custom.js)

    
// __________POPOVER
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
Card
Remove Card
	
		
    
<!-- Custom js-->
<script src="../assets/js/custom.js"></script>

Below js is in custom.js(assets/js/custom.js)

    
// ______________ CARD
const DIV_CARD = 'div.card';
// ______________ FUNCTION FOR REMOVE CARD
$(document).on('click', '[data-bs-toggle="card-remove"]', function(e) {
	let $card = $(this).closest(DIV_CARD);
	$card.remove();
	e.preventDefault();
	return false;
});
Card Collapse
	
		
    <!-- Custom js-->
<script src="../assets/js/custom.js"></script>

Below js is in custom.js(assets/js/custom.js)

    
// ______________ CARD
const DIV_CARD = 'div.card';
// ______________ FUNCTIONS FOR COLLAPSED CARD
$(document).on('click', '[data-bs-toggle="card-collapse"]', function(e) {
	let $card = $(this).closest(DIV_CARD);
	$card.toggleClass('card-collapsed');
	e.preventDefault();
	return false;
});
Card FullScreen
	
		
    
<!-- Custom js-->
<script src="../assets/js/custom.js"></script>

Below js is in custom.js(assets/js/custom.js)

    
// ______________ CARD
const DIV_CARD = 'div.card';
// ______________Card Full Screen
$(document).on('click', '[data-bs-toggle="card-fullscreen"]', function(e) {
	let $card = $(this).closest(DIV_CARD);
	$card.toggleClass('card-fullscreen').removeClass('card-collapsed');
	e.preventDefault();
	return false;
});
Important License Terms
  • You cannot charge from your end product end users with a Regular License.
  • If you want to collect payments from end product end users then you must buy an Extended License for each of the end product.
  • You must buy one license for one domain only.(i.e Either Regular or Extended)
  • You cannot use Multi Domain,Multi Client, Multiple end Products with any of the licenses (i.e Either Regular or Extended).

for more details please click the link

Font Used

Google fonts are used in the template. They are as follows: Google Fonts

Images are credited by : vecteezy.com. All images are used from vecteezy website. Only we used for preview purpose if you want to use purchase vecteezy

Icons are used from iconscout website: iconscout.com.

THANK YOU!