# 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](https://docs.wirebootstrap.com/color-admin/broken-reference) 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`.

```javascript
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.

```javascript
[
    {
        "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"}
        ]
    }
]
```