Page Menu

The Color Admin 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
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 Color Admin 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.colorAdmin.menu().render("#color-admin-menu", {
  configUrl: "../lib/color-admin/color-admin-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
click	A JavaScript function to call when the menu item is clicked
css	CSS classes to add to the menu item
data	jQuery data attributes to add to the menu item
href	The URL of the page to load when the menu item is selected
icon	The CSS class(s) that will display the icon for the menu item
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 Color Admin for WireBootstrap project showing two of the items in the menu.

[
    {
        "icon": "fa fa-tachometer",
        "label": "Dashboards",
        "href": null,
        "items": [
            {"label": "Dashboard", "href": "../pages/index.html"}
        ]
    },
    {
        "icon": "fa fa-table",
        "label": "Tables",
        "href": null,
        "items": [
            {"label": "Bootstrap", "href": "../pages/tables-bootstrap.html"},
            {"label": "DataTables", "href": "../pages/tables-datatables.html"}
        ]
    }
]