Get Menu Items from REST API (React)

getMenu() fetches data from the GET /wp/v2/menus/<id> endpoint, whereas getMenuItem() fetches data from the GET /wp/v2/menu-items/<id> endpoint, but they have the same usage syntax, where you just need to pass the ID of a menu or menu item.

As for getMenuItems() and another function you can use — getMenus(), the endpoints are GET /wp/v2/menu-items (for fetching menu items) and GET /wp/v2/menus (for fetching menus), respectively. These functions have the same syntax, where you can pass an object containing the arguments accepted by their respective REST API endpoint, but these arguments are optional and when the function is called without any arguments specified (e.g. getMenuItems()), all menu items or menus will be returned.

  • You can find the list of accepted arguments by visiting <your site URL>/wp-json/wp/v2 and check the args property for the above endpoints. For example, using your browser console, run fetch( '/wp-json/wp/v2' ).then( res => res.json() ).then( data => console.log( data ) ) while viewing your site’s homepage or maybe an admin page, and you’d see something like so for the menu items endpoint:

    Preview image

    Or in the above case where the endpoint index is 0, this JS will easily show you the arguments..

    fetch( '/wp-json/wp/v2' ).then( res => res.json() ).then( data => console.log( data.routes['/wp/v2/menu-items'].endpoints[0].args ) )

Examples:

  • getMenu( 449 ) — get the data (a menu object like the one in your post) for the menu with the ID 449

  • getMenuItem( 456 ) — get the data (a menu item object) for the menu item with the ID 456

  • getMenuItems( { menus: 449 } ) — get the menu items for the menu with the ID 449

  • getMenus( { search: 'legal' } ) — search for a menu where for example the title contains legal