Title: WP_Customize_Nav_Menu_Item_Control::content_template
Published: August 18, 2015
Last modified: May 20, 2026

---

# WP_Customize_Nav_Menu_Item_Control::content_template()

## In this article

 * [Source](https://developer.wordpress.org/reference/classes/wp_customize_nav_menu_item_control/content_template/?output_format=md#source)
 * [Hooks](https://developer.wordpress.org/reference/classes/wp_customize_nav_menu_item_control/content_template/?output_format=md#hooks)
 * [Related](https://developer.wordpress.org/reference/classes/wp_customize_nav_menu_item_control/content_template/?output_format=md#related)
 * [Changelog](https://developer.wordpress.org/reference/classes/wp_customize_nav_menu_item_control/content_template/?output_format=md#changelog)

[ Back to top](https://developer.wordpress.org/reference/classes/wp_customize_nav_menu_item_control/content_template/?output_format=md#wp--skip-link--target)

JS/Underscore template for the control UI.

## 󠀁[Source](https://developer.wordpress.org/reference/classes/wp_customize_nav_menu_item_control/content_template/?output_format=md#source)󠁿

    ```php
    public function content_template() {
    	?>
    	<div class="menu-item-bar">
    		<div class="menu-item-handle">
    			<span class="item-type" aria-hidden="true">{{ data.item_type_label }}</span>
    			<span class="item-title" aria-hidden="true">
    				<span class="spinner"></span>
    				<span class="menu-item-title<# if ( ! data.title && ! data.original_title ) { #> no-title<# } #>">{{ data.title || data.original_title || wp.customize.Menus.data.l10n.untitled }}</span>
    				<# if ( 0 === data.depth ) { #>
    					<span class="is-submenu" style="display: none;"><?php _e( 'sub item' ); ?></span>
    				<# } else { #>
    					<span class="is-submenu"><?php _e( 'sub item' ); ?></span>
    				<# } #>
    			</span>
    			<span class="item-controls">
    				<button type="button" class="button-link item-edit" aria-expanded="false"><span class="screen-reader-text">
    				<# if ( 0 === data.depth ) { #>
    					<?php
    					/* translators: 1: Title of a menu item, 2: Type of a menu item. 3: Item index, 4: Total items. */
    					printf( __( 'Edit %1$s (%2$s, %3$d of %4$d)' ), '{{ data.title || data.original_title || wp.customize.Menus.data.l10n.untitled }}', '{{ data.item_type_label }}', '', '' );
    					?>
    				<# } else if ( 1 === data.depth ) { #>
    					<?php
    						/* translators: 1: Title of a menu item, 2: Type of a menu item, 3, Item index, 4, Total items, 5: Item parent. */
    						printf( __( 'Edit %1$s (%2$s, sub-item %3$d of %4$d under %5$s)' ), '{{ data.title || data.original_title || wp.customize.Menus.data.l10n.untitled }}', '{{ data.item_type_label }}', '', '', '' );
    					?>
    				<# } else { #>
    					<?php
    						/* translators: 1: Title of a menu item, 2: Type of a menu item, 3, Item index, 4, Total items, 5: Item parent, 6: Item depth. */
    						printf( __( 'Edit %1$s (%2$s, sub-item %3$d of %4$d under %5$s, level %6$s)' ), '{{ data.title || data.original_title || wp.customize.Menus.data.l10n.untitled }}', '{{ data.item_type_label }}', '', '', '', '{{data.depth}}' );
    					?>
    				<# } #>
    				</span><span class="toggle-indicator" aria-hidden="true"></span></button>
    				<button type="button" class="button-link item-delete submitdelete deletion"><span class="screen-reader-text">
    				<?php
    					/* translators: 1: Title of a menu item, 2: Type of a menu item. */
    					printf( __( 'Remove Menu Item: %1$s (%2$s)' ), '{{ data.title || data.original_title || wp.customize.Menus.data.l10n.untitled }}', '{{ data.item_type_label }}' );
    				?>
    				</span></button>
    			</span>
    		</div>
    	</div>

    	<div class="menu-item-settings" id="menu-item-settings-{{ data.menu_item_id }}">
    		<# if ( 'custom' === data.item_type ) { #>
    		<p class="field-url description description-thin">
    			<label for="edit-menu-item-url-{{ data.menu_item_id }}">
    				<?php _e( 'URL' ); ?><br />
    				<input class="widefat code edit-menu-item-url" type="text" id="edit-menu-item-url-{{ data.menu_item_id }}" name="menu-item-url" />
    			</label>
    		</p>
    	<# } #>
    		<p class="description description-thin">
    			<label for="edit-menu-item-title-{{ data.menu_item_id }}">
    				<?php _e( 'Navigation Label' ); ?><br />
    				<input type="text" id="edit-menu-item-title-{{ data.menu_item_id }}" placeholder="{{ data.original_title }}" class="widefat edit-menu-item-title" name="menu-item-title" />
    			</label>
    		</p>
    		<p class="field-link-target description description-thin">
    			<label for="edit-menu-item-target-{{ data.menu_item_id }}">
    				<input type="checkbox" id="edit-menu-item-target-{{ data.menu_item_id }}" class="edit-menu-item-target" value="_blank" name="menu-item-target" />
    				<?php _e( 'Open link in a new tab' ); ?>
    			</label>
    		</p>
    		<p class="field-title-attribute field-attr-title description description-thin">
    			<label for="edit-menu-item-attr-title-{{ data.menu_item_id }}">
    				<?php _e( 'Title Attribute' ); ?><br />
    				<input type="text" id="edit-menu-item-attr-title-{{ data.menu_item_id }}" class="widefat edit-menu-item-attr-title" name="menu-item-attr-title" />
    			</label>
    		</p>
    		<p class="field-css-classes description description-thin">
    			<label for="edit-menu-item-classes-{{ data.menu_item_id }}">
    				<?php _e( 'CSS Classes' ); ?><br />
    				<input type="text" id="edit-menu-item-classes-{{ data.menu_item_id }}" class="widefat code edit-menu-item-classes" name="menu-item-classes" />
    			</label>
    		</p>
    		<p class="field-xfn description description-thin">
    			<label for="edit-menu-item-xfn-{{ data.menu_item_id }}">
    				<?php _e( 'Link Relationship (XFN)' ); ?><br />
    				<input type="text" id="edit-menu-item-xfn-{{ data.menu_item_id }}" class="widefat code edit-menu-item-xfn" name="menu-item-xfn" />
    			</label>
    		</p>
    		<p class="field-description description description-thin">
    			<label for="edit-menu-item-description-{{ data.menu_item_id }}">
    				<?php _e( 'Description' ); ?><br />
    				<textarea id="edit-menu-item-description-{{ data.menu_item_id }}" class="widefat edit-menu-item-description" rows="3" cols="20" name="menu-item-description">{{ data.description }}</textarea>
    				<span class="description"><?php _e( 'The description will be displayed in the menu if the active theme supports it.' ); ?></span>
    			</label>
    		</p>

    		<?php
    		/**
    		 * Fires at the end of the form field template for nav menu items in the customizer.
    		 *
    		 * Additional fields can be rendered here and managed in JavaScript.
    		 *
    		 * @since 5.4.0
    		 */
    		do_action( 'wp_nav_menu_item_custom_fields_customize_template' );
    		?>

    		<div class="menu-item-actions description-thin submitbox">
    			<# if ( ( 'post_type' === data.item_type || 'taxonomy' === data.item_type ) && '' !== data.original_title ) { #>
    			<p class="link-to-original">
    				<?php
    					/* translators: Nav menu item original title. %s: Original title. */
    					printf( __( 'Original: %s' ), '<a class="original-link" href="{{ data.url }}">{{ data.original_title }}</a>' );
    				?>
    			</p>
    			<# } #>

    			<button type="button" class="button-link button-link-delete item-delete submitdelete deletion"><?php _e( 'Remove' ); ?></button>
    			<span class="spinner"></span>
    		</div>
    		<input type="hidden" name="menu-item-db-id[{{ data.menu_item_id }}]" class="menu-item-data-db-id" value="{{ data.menu_item_id }}" />
    		<input type="hidden" name="menu-item-parent-id[{{ data.menu_item_id }}]" class="menu-item-data-parent-id" value="{{ data.parent }}" />
    	</div><!-- .menu-item-settings-->
    	<ul class="menu-item-transport"></ul>
    	<?php
    }
    ```

[View all references](https://developer.wordpress.org/reference/files/wp-includes/customize/class-wp-customize-nav-menu-item-control.php/)
[View on Trac](https://core.trac.wordpress.org/browser/tags/7.0/src/wp-includes/customize/class-wp-customize-nav-menu-item-control.php#L64)
[View on GitHub](https://github.com/WordPress/wordpress-develop/blob/7.0/src/wp-includes/customize/class-wp-customize-nav-menu-item-control.php#L64-L183)

## 󠀁[Hooks](https://developer.wordpress.org/reference/classes/wp_customize_nav_menu_item_control/content_template/?output_format=md#hooks)󠁿

 [do_action( ‘wp_nav_menu_item_custom_fields_customize_template’ )](https://developer.wordpress.org/reference/hooks/wp_nav_menu_item_custom_fields_customize_template/)

Fires at the end of the form field template for nav menu items in the customizer.

## 󠀁[Related](https://developer.wordpress.org/reference/classes/wp_customize_nav_menu_item_control/content_template/?output_format=md#related)󠁿

| Uses | Description | 
| [_e()](https://developer.wordpress.org/reference/functions/_e/)`wp-includes/l10n.php` |

Displays translated text.

  | 
| [__()](https://developer.wordpress.org/reference/functions/__/)`wp-includes/l10n.php` |

Retrieves the translation of $text.

  | 
| [do_action()](https://developer.wordpress.org/reference/functions/do_action/)`wp-includes/plugin.php` |

Calls the callback functions that have been added to an action hook.

  |

[Show 1 more](https://developer.wordpress.org/reference/classes/wp_customize_nav_menu_item_control/content_template/?output_format=md#)
[Show less](https://developer.wordpress.org/reference/classes/wp_customize_nav_menu_item_control/content_template/?output_format=md#)

## 󠀁[Changelog](https://developer.wordpress.org/reference/classes/wp_customize_nav_menu_item_control/content_template/?output_format=md#changelog)󠁿

| Version | Description | 
| [4.3.0](https://developer.wordpress.org/reference/since/4.3.0/) | Introduced. |

## User Contributed Notes

You must [log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fclasses%2Fwp_customize_nav_menu_item_control%2Fcontent_template%2F)
before being able to contribute a note or feedback.