Tocly - Responsive Bootstrap 5 Admin Dashboard

Horizontal Layouts

If you would like to have Horizontal Menu (or Topnav) based layout,

You can use Horizontal folder for horizontal layout and if you want to change layout from vertical to hoizontal then perform the below changes.
You need to update the below code in the templates/partials/base.html

<body data-layout="horizontal" data-topbar="colored">

And in templates/partials/base.html

To change Horizontal layout header, comment vertical block topbar & block sidebar as shown below.

 {% comment %} {% block topbar %}
        {% endblock topbar %}

        {% block sidebar %}
            {% include "partials/sidebar.html" %}
{% endblock sidebar %} {% endcomment %}

and un-comment block header as shown below.

{% block horizontal %}
{% endblock horizontal %}

Ex . index.html page

comment

{% block topbar %}
{% include "partials/topbar.html" with title="Dashboard" %}
{% endblock topbar %}

and add

{% block horizontal %}
{% include "partials/horizontal.html" with title="Dashboard" %}
{% endblock horizontal %}

It will set horizontal layouts in the particular page.

In order to add, change or remove any ui elements from the topbar, simply edit in file src/partials/horizontal.html. The change would reflect in all the files automatically.

How to use pre-built layouts?

Each of the layout options is provided below with steps you would need to perform:

Topbar Light

Keep your body element with data attribute data-topbar="light" data-layout="horizontal" E.g. <body data-topbar="light" data-layout="horizontal"> to have light topbar and dark menubar.

Topbar Dark

Keep your body element with data attribute data-topbar="dark" data-layout="horizontal" E.g. <body data-topbar="dark" data-layout="horizontal"> to have light topbar and dark menubar.

Colored Header

Keep your body element with data attribute data-layout-size="boxed" data-layout="horizontal" E.g. <body data-layout-size="boxed" data-layout="horizontal"> to have boxed layout.

Boxed Width

Keep your body element with data attribute data-layout-size="boxed" data-layout="horizontal" E.g. <body data-layout-size="boxed" data-layout="horizontal"> to have boxed layout.

Preloader

In order to add pre-loader in your page, include following html after body element.

<div id="preloader">
                                                <div id="status">
                                                    <div class="spinner-chase">
                                                        <div class="chase-dot"></div>
                                                        <div class="chase-dot"></div>
                                                        <div class="chase-dot"></div>
                                                        <div class="chase-dot"></div>
                                                        <div class="chase-dot"></div>
                                                        <div class="chase-dot"></div>
                                                    </div>
                                                </div>
                                            </div>