Admin Builder

Admin Builder is a Javascript script which allows you to quickly create your admin template.

It's an easy way to customize your admin.

Admin Builder also allows for basic content editing, allowing users to changes text, icons and other contents.

Go to Admin Builder

Customize your admin template

Step 1. Left or Right side

First of all, you have to define if you want sidebar on the left or in the right side. In general, right side is used for specific languages, such as Arabic.

Step 2. Choose sidebar main style

We have created 3 differents styles. Each style come with a collapsed option.

Large Sidebar: it's default sidebar with 240px width.

Condensed Sidebar: with 190px width, this sidebar offer bigger icons and menu element. It could be interesting if you don't have too many menu elements.

Light Sidebar: 220px width. It's lighter because it's separated from page corner and less "visible".

Step 3. Sidebar content

Each sidebar comes with 2 main options: top content and footer content.

Top content: you can choose between 4 possibilities here:
=> Big User Image / Small User Image / Search and Icon / No Top Content.

Footer content: you can choose between 4 possibilities here too:
=> Folders List / Sparkline Bar Charts / Progress Bar Charts / No Footer Content.

Step 4. Sidebar behaviour

Here you have 3 main options depending of what you are looking for and your needs:

Sidebar Fixed / Fluid: common behaviour for sidebar, it permit you to define if you want that your sidebar move with page content or not.

Sidebar on Hover: here is a good way to have more space for your page content and to access easily to sidebar menu. Indeed, sidebar is completly hidden and will appear only if your mouse is in a left corner(or right if choose right sidebar).

Submenu on Hover: here sidebar is visible, but submenu show out of sidebar with mouse over. So, you don't have to click to show submenu.

Step 5. topbar Style

Topbar have 2 styles:

Topbar with Icons: if you just want quick access to main function, you may choose this topbar.

Topbar with Menu: if you need a top menu with access to menu and submenu elements, choose this one.

Step 6. theme colors: 28 variations

Default color is dark, but we know that sometimes other colors could be useful, and maybe you want to let your users choose their own style.

An admin template, in general, have 3 main parts: sidebar, topbar and main content. So, we wanted to give you the possibility to choose color for each part.

For that reason, we have added 7 main colors, that you can apply in 4 differents ways, with 28 variations in total.

You can change background color too with 7 colors.

Edit text and icons

You can modify text, links and icons by right clicking on sidebar and topbar elements

You can also remove and add sidebar menu / submenu.

If you click on settings icon in sidebar at the left of "Navigation" title, a submenu will appear. Here you can reorder menu elements, and remove elements as well.

Export your template

When you have made all your style choices and edit your sidebar / topbar content, you are ready to export your admin template in order to use it in your project.

Just click on button "Export Admin Template".

A modal window will appear and you will be able to choose your file name.

Once you have click on save, your page template will be downloaded inside your-custom-admin folder.