# Primary Menu

Chaos menu is built using the WordPress menu logic. It has identical classes and markup. The classes are self-descriptive as you can see in following snippet:

```
<ul id="primary-menu">
  <li class="menu-item-has-children">
    <a href="target" title="Home"><span>Home</span></a>
    <ul class="sub-menu">
      <li>
        <a href="target" title="Home #1"><span>sub menu 1</span></a>
      </li>
      <li>
        <a href="target" title="Home #1"><span>sub menu 2</span></a>
      </li>
    </ul>
  </li>
  <li class="menu-item-has-children">
    <a href="target" title="Pages"><span>Pages</span></a>
  </li>
  <li class="mega-menu menu-item-has-children">
    <a href="target" title="Shortcodes"><span>Shortcodes</span></a>
    <!-- -----Mega menu markup-->
  </li>
</ul>
```

The classes that can be applied to each li elements are listed in followin table:

| Class                   | Description                        |
| ----------------------- | ---------------------------------- |
| .current-menu           | currently active menu              |
| .current-menu-parent    | parent node of current active menu |
| .menu-item-has-children | menu item has submenu              |
| .mega-menu              | mega-menu wrapper                  |

## Mega menu

Mega menu is a fullwidth wrapper that can contain pretty much any type of content as a menu. Inside it there is stil a `ul` element with `li` childs but this lists items can be used as bootstrap normal columns that can contain any HTML markup like an image or just a normal list.

![mega menu](/files/-LLV0BjqU7fGG_JBz5UB)

**Important:** Mega menu as a fullwidth wrapper is only for large screens and desktops. In mobile devices the only thing that remains visible inside a mega menu is `ul` list with class `.nav-ul`. So if you have a mega menu that contains navigation links along side of other contents, make sure the navigation `ul` has \`.nav-ul' class.

Here is a sample markup for a mega menu item:

```
<ul class="megamenu-wrapper sub-menu ">
  <li class="col-md-3">
    <!-- -----First column markup-->
    <ul class="nav-ul">
      <li><a href="target">sub link 1</a></li>
      <li><a href="target">sub link 2</a></li>
    </ul>
  </li>
  <li class="col-md-3">
     <!-- -----Second column markup-->
  </li>
  <li class="col-md-3">
    <!-- -----Third column markup-->
  </li>
   <li class="col-md-3">
    <!-- -----Last column markup-->
  </li>
</ul>
```


---

# 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://owwwlab.gitbook.io/chaos-docs/basics/primary-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.