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

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

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

Last updated