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

Name	Description
collapsed	Boolean that determines whether the menu starts out collapsed on the left or expanded out into the page.
configUrl	The URL to the data configuration file for the menu. See Menu Data for details.
currentPage	The name of the page to highlight in the menu as being currently selected.

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"            
});

Menu Data

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.

Name	Description
class	The CSS class(s) that will display the icon for the menu item
href	The URL of the page to load when the menu item is selected
items	An array of child menu items to how under the menu item
label	The display label for the menu item

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"}
        ]
    }
]