need help in wordpress navbar setup - wordpress

Question

i am searching from a whole day long for a easy way to create a dynamic wordpress nested navbar.
now i am looking for a function if there is to get all pages list as a nested object
i am using get_pages() which is giving me flat array with parent_page_id
[
{
"ID": 2,
"post_author": "1",
"post_date": "2021-10-10 05:21:26",
"post_date_gmt": "2021-10-10 05:21:26",
"post_content": "<!-- wp:paragraph -->\n<p>This is an example page. It's different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:quote -->\n<blockquote class=\"wp-block-quote\"><p>Hi there! I'm a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin' caught in the rain.)</p></blockquote>\n<!-- /wp:quote -->\n\n<!-- wp:paragraph -->\n<p>...or something like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:quote -->\n<blockquote class=\"wp-block-quote\"><p>The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.</p></blockquote>\n<!-- /wp:quote -->\n\n<!-- wp:paragraph -->\n<p>As a new WordPress user, you should go to your dashboard to delete this page and create new pages for your content. Have fun!</p>\n<!-- /wp:paragraph -->",
"post_title": "Sample Page",
"post_excerpt": "",
"post_status": "publish",
"comment_status": "closed",
"ping_status": "closed",
"post_password": "",
"post_name": "sample-page",
"to_ping": "",
"pinged": "",
"post_modified": "2021-10-10 19:14:00",
"post_modified_gmt": "2021-10-10 19:14:00",
"post_content_filtered": "",
"post_parent": 0,
"guid": "http://localhost:8000/?page_id=2",
"menu_order": 2,
"post_type": "page",
"post_mime_type": "",
"comment_count": "0",
"filter": "raw"
},
{
"ID": 28,
"post_author": "1",
"post_date": "2021-10-10 19:11:08",
"post_date_gmt": "2021-10-10 19:11:08",
"post_content": "<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column {\"width\":\"100%\"} -->\n<div class=\"wp-block-column\" style=\"flex-basis:100%\"><!-- wp:query {\"queryId\":21,\"query\":{\"perPage\":\"100\",\"pages\":0,\"offset\":0,\"postType\":\"post\",\"categoryIds\":[4,3,1],\"tagIds\":[],\"order\":\"desc\",\"orderBy\":\"date\",\"search\":\"\",\"exclude\":[],\"sticky\":\"exclude\",\"inherit\":false},\"displayLayout\":{\"type\":\"flex\",\"columns\":4}} -->\n<div class=\"wp-block-query\"><!-- wp:post-template -->\n<!-- wp:post-featured-image /-->\n\n<!-- wp:post-title {\"isLink\":true,\"textColor\":\"vivid-cyan-blue\",\"fontSize\":\"medium\"} /-->\n\n<!-- wp:post-date {\"fontSize\":\"small\"} /-->\n<!-- /wp:post-template --></div>\n<!-- /wp:query --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->",
"post_title": "Products",
"post_excerpt": "",
"post_status": "publish",
"comment_status": "closed",
"ping_status": "closed",
"post_password": "",
"post_name": "products",
"to_ping": "",
"pinged": "",
"post_modified": "2021-10-11 22:01:39",
"post_modified_gmt": "2021-10-11 22:01:39",
"post_content_filtered": "",
"post_parent": 0,
"guid": "http://localhost:8000/?page_id=28",
"menu_order": 1,
"post_type": "page",
"post_mime_type": "",
"comment_count": "0",
"filter": "raw"
},
{
"ID": 156,
"post_author": "1",
"post_date": "2021-10-11 23:25:00",
"post_date_gmt": "2021-10-11 23:25:00",
"post_content": "",
"post_title": "dresses",
"post_excerpt": "",
"post_status": "publish",
"comment_status": "closed",
"ping_status": "closed",
"post_password": "",
"post_name": "dresses",
"to_ping": "",
"pinged": "",
"post_modified": "2021-10-11 23:25:00",
"post_modified_gmt": "2021-10-11 23:25:00",
"post_content_filtered": "",
"post_parent": 28,
"guid": "http://localhost:8000/?page_id=156",
"menu_order": 0,
"post_type": "page",
"post_mime_type": "",
"comment_count": "0",
"filter": "raw"
},
{
"ID": 158,
"post_author": "1",
"post_date": "2021-10-11 23:45:04",
"post_date_gmt": "2021-10-11 23:45:04",
"post_content": "",
"post_title": "2 level child",
"post_excerpt": "",
"post_status": "publish",
"comment_status": "closed",
"ping_status": "closed",
"post_password": "",
"post_name": "2-level-child",
"to_ping": "",
"pinged": "",
"post_modified": "2021-10-12 00:03:19",
"post_modified_gmt": "2021-10-12 00:03:19",
"post_content_filtered": "",
"post_parent": 156,
"guid": "http://localhost:8000/?page_id=158",
"menu_order": 0,
"post_type": "page",
"post_mime_type": "",
"comment_count": "0",
"filter": "raw"
},
{
"ID": 5,
"post_author": "1",
"post_date": "2021-10-10 06:48:19",
"post_date_gmt": "2021-10-10 06:48:19",
"post_content": "[contact-form-7 id=\"16\" title=\"Contact Us\"]",
"post_title": "Contact Us",
"post_excerpt": "",
"post_status": "publish",
"comment_status": "closed",
"ping_status": "closed",
"post_password": "",
"post_name": "contact-us",
"to_ping": "",
"pinged": "",
"post_modified": "2021-10-10 19:14:09",
"post_modified_gmt": "2021-10-10 19:14:09",
"post_content_filtered": "",
"post_parent": 0,
"guid": "http://localhost:8000/?page_id=5",
"menu_order": 3,
"post_type": "page",
"post_mime_type": "",
"comment_count": "0",
"filter": "raw"
}
]
now what i want is a nested object so i can make recursive function to iterate and generate fully custom navbar
is there any way to achieve such nested object ? its a easy question for an experienced wp developer i am new so i dont know much about available functions though i have researched quit well

Answer 1

You could use the built-in interface and function
when using menus... first register a location/several location
/*** REGISTER MENU ***/
register_nav_menus(array(
'topmenu' => __( 'Top Menu', THEME_NAME ),
'topmenumobile' => __( 'Top Mobile Menu', THEME_NAME ),
'footermenu' => __( 'Footer Menu', THEME_NAME ),
'footermenumob' => __( 'Footer Mobile Menu', THEME_NAME ),
));
Then build your menu in the backend:
Now you can output it the frontend using wp_nav_menu
for example:
<?php
wp_nav_menu( array(
'theme_location' => (wp_is_mobile() ? 'topmenumobile' : 'topmenu'),
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'topmenu',
'menu_class' => 'nav navbar-nav',
) );
?>
On the resulting HTML, you can apply CSS and JS or even use a walker library if your working with bootstrap (for example).
Hope this helps, I am not sure I completely understand your needs so I here for edits and additional information.