# 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. 

### Example usage

![This menu item is related to the Sports section and marked red.](https://3066417513-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L_HLbYnejnUK_QQoiMy%2F-MFk9X4EVu5knfUR0qPq%2F-MFkA6O0yLg9XotOv2LU%2Fimage.png?alt=media\&token=38c6e019-5002-43e0-a2ee-f5c16502dddb)

## 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
}
```