> For the complete documentation index, see [llms.txt](https://docs.navigaglobal.com/everyware/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.navigaglobal.com/everyware/widgets-and-components/everyware-plugin-menu-handler/usage.md).

# Usage

## Installation

Normal WP plugin install and activation.

Then the plugin adds fields to the normal menu items, found in Appearance > Menu

The plugin adds support, doesn't modify the theme.&#x20;

### Example usage

![This menu item is related to the Sports section and marked red.](/files/-MFkA6O0yLg9XotOv2LU)

## What it does

The menu handler plugin can be used to return color and section values with the menu item.

This is what the plugin does:

```php
/**
 * Define menu custom field value for color.
 */    
public function add_custom_nav_field_color( $menu_item ) {
  $menu_item->color = get_post_meta( $menu_item->ID, '_menu_item_color', true );
  return $menu_item;
}

/**
 * Define menu custom field value for section.
 */    
public function add_custom_nav_field_section( $menu_item ) {
  $menu_item->section = get_post_meta( $menu_item->ID, '_menu_item_section', true );
  return $menu_item;
}
```

#### Example of how these might be used in a template

```php
{% block main_menu_nav %}
	<ul class="navbar-nav mr-auto flex-row navbar-nav-main" aria-expanded="true">
		{% for item in menu %}
			<li class="nav-item {% if get_permalink()|lower == item.url|lower  %}active{% endif %}">
				<a class="nav-link" data-color="{{ item.color }}" data-section="{{ item.section }}" href="{{ item.url }}" id="menu-id-{{ item.ID }}">{{ item.title }}
				</a>
			</li>
		{% endfor %}
	</ul>
{% endblock %}
```

## Using it in your own custom theme

Your theme might be different and might have a different menu set-up. This plugin gives you the option to set the values and you can do with them what you want.

In the theme you could use it like this:

```php
if ($id . ‘menu_item_color’) {
  //do this
}
```
