#### i18 Support

#### Example

##### You can change the language of demo text as well as the menu with simple function fire on buttons click. Try it:

##### Example:

##### i18support Configuration

Step 1

To enable i18n support in your application, you need to define all translatable text. The most effective way to do this is by storing the text in an external JSON file. For example:

##### en.json

                                            {
                                                "dashboards": "Dashboards",
                                                "dashboard-one": "Dashboard v.1",
                                                "dashboard-two": "Dashboard v.2"
                                            }

##### es.json

                                            {
                                                "dashboards": "Paneles",
                                                "dashboard-one": "Panel v.1",
                                                "dashboard-two": "Panel v.2"
                                            }

##### ru.json

                                                {
                                                    "dashboards": "Панели",
                                                    "dashboard-one": "Панель v.1",
                                                    "dashboard-two": "Панель v.2"
                                                }

Step 2

Next you need to add html indicators in all place you want to use `data-lang`.

                                    <div>
                                        <span data-lang="dashboards"> Dashboards </span>
                                        <span data-lang="dashboard-one"> Dashboard v.1 </span>
                                        <span data-lang="dashboard-two"> Dashboard v.2 </span>
                                    </div>

Step 3

After that if you want to change the language you just need to add buttons and fire the `selectedLanguage`.

##### HTML Code

                                        <a class="btn btn-light" data-translator-lang="en"> Set EN language</a>

                                        <a class="btn btn-light" data-translator-lang="es"> Set ES language</a>

##### Javascript Code

                                            let selectedLanguage = "en";

##### Admin Customizer

Easily configure layout, styles, and preferences for your admin interface.

##### Select Theme

##### Default

##### Material

##### Modern

##### SaaS

##### Flat

##### Minimal

##### Color Scheme

##### Light

##### Dark

##### System

##### Topbar Color

##### Light

##### Dark

##### Gray

##### Gradient

##### Sidenav Color

##### Light

##### Dark

##### Gray

##### Gradient

##### Image

##### Sidebar Size

##### Default

##### Compact

##### Condensed

##### On Hover

##### On Hover - Show

##### Offcanvas

##### Layout Position

Fixed Scrollable

##### Sidebar User Info