Layout Customization
By default, DashTail Alpine includes three predefined layouts. However, you can create new layouts based on your requirements.
Adding a New Layout:
Start by opening the layout.njk file and adding your new layout using the provided code snippet.
layout.njk
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="Dashtail Alpine – Tailwind, Alpine Admin Dashboard Template"/>
<meta name="keywords" content="admin, admin dashboard, admin dashboard template, admin themes, analytics dashboard, dashboard, e-commerce dashboard, alpine js, html, responsive dashboard, css3, Tailwind CSS, html dashboard, ui component library, ui kit"/>
<meta name="author" content="Codeshaper"/>
<title>Dashtail Alpine</title>
<!-- Favicon CSS -->
<link rel="icon" type="image/png" href="assets/images/favicon.ico"/>
<!-- Fonts CSS -->
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
<style>
[x-cloak] {
display: none !important;
}
</style>
<!-- Include App CSS -->
<link rel="stylesheet" href="assets/css/app.css"/>
<!-- Alpine JS -->
<script src="assets/js/alpinejs-twmerge.js"></script>
<script defer src="assets/js/alpinejs-collapse.js"></script>
<script defer src="assets/js/alpinejs-focus.js"></script>
<script defer src="assets/js/alpine.js"></script>
<!-- MapBox -->
<link href="assets/css/mapbox-gl.css" rel="stylesheet"/>
<script defer src="assets/js/mapbox-gl.js"></script>
<!-- Charts -->
<script src="assets/js/apexchart.js"></script>
<script src="assets/js/chart.js"></script>
<script src="assets/js/chartjs.js"></script>
<script src="assets/js/fullcalendar.js"></script>
<script src="assets/js/calendar.js"></script>
<!-- Leaflet -->
<link rel="stylesheet" href="assets/css/leaflet.css"/>
<link href="assets/css/quill.snow.css" rel="stylesheet"/>
<script src="assets/js/leaflet.js"></script>
<!-- Quill JS -->
<script src="assets/js/quill.js"></script>
<!-- Vector Map -->
<link rel="stylesheet" href="assets/css/jsvectormap.min.css"/>
<script src="assets/js/jsvectormap.js"></script>
<script src="assets/js/jsvectormap-world.js"></script>
<!-- Main Js -->
<script src="assets/js/app.js"></script>
</head>
<body
class="{{ body_class }} font-inter dash-tail-app "
x-data
:dir="$store.app.direction"
x-bind:class="{
'dark': $store.app.isDark,
['theme-' + $store.app.theme]: true
}"
>
<!-- START: Loader -->
<div x-show="$store.app.loading">
{% include "../partials/loader.njk" %}
</div>
<!-- END: Loader-->
<div class="flex min-h-svh w-full flex-col bg-[#EEF1F9] dark:bg-background" x-cloak x-show="!$store.app.loading">
<!-- *************************
START: Header Wrapper
*************************** -->
{% include "../partials/header.njk" %}
<!-- *************************
END: Header Wrapper
*************************** -->
<!-- *************************
START: Sidebar Wrapper
*************************** -->
{% include "../partials/sidebar.njk" %}
<!-- *************************
END: Sidebar Wrapper
*************************** -->
<!-- *************************
START: Mobile Menu
*************************** -->
{% include "../partials/mobile-menu.njk" %}
<!-- *************************
END: Mobile Menu
*************************** -->
<!-- *************************
START: Main
*************************** -->
<main
x-twmerge="{
'flex-1': true,
'pb-6 pt-6 px-4 xl:px-6': $store.app.layout !== 'vertical' ,
'pb-6 pt-6': $store.app.layout === 'vertical',
'xl:px-0': $store.app.sidebarType === 'module'
}"
>
<div
x-twmerge="{
'xl:ms-[72px]': $store.app.collapsed ,
'xl:ms-[272px]': !$store.app.collapsed ,
' xl:px-14': $store.app.layout !== 'horizontal',
'!m-0': $store.app.layout === 'horizontal',
'xl:ms-[248px]': $store.app.layout === 'vertical' && !$store.app.collapsed,
'px-4 xl:px-6': $store.app.layout === 'vertical',
'xl:ms-[300px]': $store.app.sidebarType === 'module' && !$store.app.collapsed,}"
x-show="!$store.app.loading"
x-transition:enter="transition ease-out duration-300 transform"
x-transition:enter-start="opacity-0 translate-y-5"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-200 transform"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 translate-y-5"
>
<!-- START: Slot -->
{% block content %}{% endblock %}
<!-- END: Slot -->
</div>
</main>
<!-- *************************
END: Main
*************************** -->
<!-- *************************
START: Footer Wrapper
*************************** -->
{% include "../partials/footer.njk" %}
<!-- *************************
END: Footer Wrapper
*************************** -->
</div>
<!-- START: Customizer -->
{% include "../customizer/customizer.njk" %}
<!-- END: Customizer -->
</body>
</html>
Defining Your Layout:
Once you've created your layout, define it in the app.js file by following the code snippet provided.
js/app.js
collapsed: false, // Sidebar collapsed state
direction: 'ltr', // ltr, rtl
mobileMenuOpen: false,
currentPage: window.location.pathname.substring(1), // Current page tracking
isDark: false,
layout: 'vertical', // vertical, horizontal, semi-box
theme: 'violet', //"zinc", "slate", "stone", "gray", "neutral", "red", "rose", "orange", "blue", "yellow", "violet"
sidebarType: 'classic', //'module', 'popover', 'classic'
headerType: 'sticky', //'static', 'sticky', floating, 'hidden'
footerType: 'static', //'static', 'sticky', 'hidden'
sidebarBg: 'none',
radius: 0.5,