Page Menu

The Gentelella for WireBootstrap Page Menu component dynamically generates menu items. It reads the configuration for the items from a JSON configuration file.

Use the following configuration options to bind the menu component.

Configuration

The example below is the code used on in the Gentelella for WireBootstrap project. It loads the menu data from the location specified in configUrl and also highlights the menu item for the Bootstrap Select page as being current using currentPage.

new wire.gentelella.menu().render("#gentelella-menu", {
  configUrl: "../../lib/gentelella/gentelella-menu.json",
  currentPage: "Select"            
});

The menu is loaded from a JSON file that contains an array of menu items and their attributes.

Below is the list of menu item properties.

Below is an excerpt from the menu data file for the Gentelella for WireBootstrap project showing two of the items in the menu.

[
    {
        "class": "fa fa-tachometer",
        "label": "Dashboards",
        "href": null,
        "items": [
            {"label": "Standard Dashboard", "href": "../pages/dashboard-standard.html"},
            {"label": "Pro Dashboard", "href": "../pages/dashboard-pro.html"}
        ]
    },
    {
        "class": "fa fa-table",
        "label": "Tables",
        "href": null,
        "items": [
            {"label": "Bootstrap", "href": "../pages/tables-bootstrap.html"},
            {"label": "DataTables", "href": "../pages/tables-datatables.html"}
        ]
    }
]

Last updated