Hope-Ui | Responsive Bootstrap 5 Admin doc Template

HTML

Vue

Laravel

React

Tailwind

Angular

CodeIgniter

Sidebar

Here is how you can change sidebar as by-default settings in gulp:

Only you have to add some classes in sidebar parent section for making default sidebar type, steps are given bellow:

You can change the class name from ./src/templates/partials/dashboard/sidebar.hbs file.

For example you have to set sidebar color as dark then you will have to add sidebar-dark class at aside of the sidebar.

For sidebar color as dark

<aside class="... sidebar-dark">
    .......
</aside>

For sidebar color as solid color

<aside class="... sidebar-color">
    .......
</aside>

For sidebar as Transparent

<aside class="... sidebar-transparent">
    .......
</aside>

For example you have to set sidebar type as mini then you will have to add sidebar-mini class at aside of the sidebar.

For sidebar type as mini

<aside class="... sidebar-mini">
    .......
</aside>

For sidebar type as hover

<aside class="... sidebar-hover">
    .......
</aside>

For sidebar type as boxed

<aside class="... sidebar-boxed">
    .......
</aside>

For example you have to set sidebar active as rounded then you will have to add navs-rounded class at aside of the sidebar.

For sidebar active as rounded one side

<aside class="... navs-rounded">
    .......
</aside>

For sidebar active as rounded all

<aside class="... navs-rounded-all">
    .......
</aside>

For sidebar active as one side pill

<aside class="... navs-pill">
    .......
</aside>

For sidebar active as pill all

<aside class="... navs-pill-all">
    .......
</aside>

Was this page helpful? Yes No