It is ok to put other elements as child elements. I don’t see any problem with this.
To add custom elements you have to add custom metabox to menu administration. WordPress will handle saving your custom elements automatically so you don’t need to worry about this. To display your custom elements you can create custom walker class or hook into walker_nav_menu_start_el filter. Depending on the type of current item you can display menu item differently.
/**
* Add meta box to admin menu view
*/
function wpse_287629_add_nav_menu_meta_boxes() {
add_meta_box( 'wpse_287629_custom', 'Custom boxes' , 'wpse_287629_nav_menu_links', 'nav-menus', 'side', 'low' );
}
add_action( 'admin_head-nav-menus.php', 'wpse_287629_add_nav_menu_meta_boxes' );
/**
* Output custom boxes nav menu items
*/
function wpse_287629_nav_menu_links() {
?>
<div id="posttype-wpse_287629" class="posttypediv">
<div id="tabs-panel-wpse_287629" class="tabs-panel tabs-panel-active">
<ul id ="wpse_287629-checklist" class="categorychecklist form-no-clear">
<li>
<label class="menu-item-title">
<input type="checkbox" class="menu-item-checkbox" name="menu-item[-1][menu-item-object-id]" value="-1"> Contact box
</label>
<input type="hidden" class="menu-item-type" name="menu-item[-1][menu-item-type]" value="wpse_287629_contact">
<input type="hidden" class="menu-item-title" name="menu-item[-1][menu-item-title]" value="Contact box">
<input type="hidden" class="menu-item-url" name="menu-item[-1][menu-item-url]" value="#">
<input type="hidden" class="menu-item-classes" name="menu-item[-1][menu-item-classes]" value="wpse_287629_contact-box">
</li>
<li>
<label class="menu-item-title">
<input type="checkbox" class="menu-item-checkbox" name="menu-item[-1][menu-item-object-id]" value="-1"> HTML box
</label>
<input type="hidden" class="menu-item-type" name="menu-item[-1][menu-item-type]" value="wpse_287629_html">
<input type="hidden" class="menu-item-title" name="menu-item[-1][menu-item-title]" value="HTML box">
<input type="hidden" class="menu-item-url" name="menu-item[-1][menu-item-url]" value="#">
<input type="hidden" class="menu-item-classes" name="menu-item[-1][menu-item-classes]" value="wpse_287629_html-box">
</li>
</ul>
</div>
<p class="button-controls">
<span class="add-to-menu">
<input type="submit" class="button-secondary submit-add-to-menu right" value="<?php esc_attr_e( 'Add to menu', 'wpse_287629' ); ?>" name="add-post-type-menu-item" id="submit-posttype-wpse_287629">
<span class="spinner"></span>
</span>
</p>
</div>
<?php
}
function wpse_287629_display_custom_nav_items($item_output, $item, $depth, $args) {
if( $item->type === 'wpse_287629_contact' ) {
// Return contact box
}
if( $item->type === 'wpse_287629_html' ) {
// Return html box
}
return $item_output;
}
add_filter('walker_nav_menu_start_el', 'wpse_287629_display_custom_nav_items', 10, 4);