# 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](broken://pages/-MMmkWVkFQygSGMtdxji#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`.

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

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wirebootstrap.com/gentelella/page-menu.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.