PHP Generate a UL menu from an array

Take an array and build a menu UL list from it. The array should support top-level as well as child links. In fact, it should support an unlimited number of child links.

Array

$links = [
    [
        'name' => 'Introduction',
        'url' => 'introduction',
    ],
    [
        'name' => 'Install',
        'url' => 'install',
    ]
];

This contains 2 links, both would be top level.

BuildList Function

Creating a function to build the UL menu.

function buildList(array $array): string
{
    $menu = "<ul>";
    foreach($array as $item) {
        $menu .= "<li><a href='{$item['url']}'>{$item['name']}</a></li>";
    }
    $menu .= "</ul>";

    return $menu;
}

Pass in the array. Define a $menu string this will hold the ul items.

Loop over the array, for each item print out an LI link. Using the keys url and name.

Finally return the menu.

To print the menu:

Usage

echo buildList($links);

This would output:

• Introduction

• Install

Adding Child items

Let's add children to the array. Add a children array, this will contain its own array keys for each item:

$links = [
    [
        'name' => 'Introduction',
        'url' => 'introduction',
        'children' => [
            [
                'name' => 'Install',
                'url' => 'introduction/install'
            ],
            [
                'name' => 'Application Register',
                'url' => 'introduction/application-register',
            ],
        ],
    ]
];

Now update the function to handle children:

function buildList(array $array): string
{
    $menu = "<ul>";
    foreach($array as $item) {
        $menu .= "<li><a href='{$item['url']}'>{$item['name']}</a></li>";
       if (isset($item['children'])) {
            $menu .= $this->buildList($item['children']);
       }
    }
    $menu .= "</ul>";

    return $menu;
}

Check if the array item contains a children key, if it does then pass the children segment to the same function, this is a recursive function so it can call this as many times as the children key exists.

This will now output:

• Introduction

  <ul>
  	<li>
  	<p>Install</p>
  	</li>
  	<li>
  	<p>Application Register</p>
  	</li>
  </ul>
  </li>
  

Multiple Items

Now lets add more items to the array:

$links = [
    [
        'name' => 'Introduction',
        'url' => 'introduction',
        'children' => [
            [
                'name' => 'Install',
                'url' => 'introduction/install'
            ],
            [
                'name' => 'Application Register',
                'url' => 'introduction/application-register',
            ],
        ],
    ],
    [
        'name' => 'MsGraph',
        'url' => 'msgraph',
        'children' => [
            [
                'name' => 'Login with MsGraph',
                'url' => 'msgraph/login'
            ],
            [
                'name' => 'Contacts',
                'url' => 'msgraph/contacts',
                'children' => [
                [
                    'name' => 'Create',
                    'url' => 'msgraph/contacts/create'
                ],
                [
                    'name' => 'Edit',
                    'url' => 'msgraph/contacts/edit',
                ],
            ],
            ],
        ],
    ]
];

We don't need to update the function since its recursive. Again calling

echo buildList($links);

Will output:

• Introduction

  <ul>
  	<li>
  	<p>Install</p>
  	</li>
  	<li>
  	<p>Application Register</p>
  	</li>
  </ul>
  </li>
  <li>
  <p>MsGraph</p>
  
  <ul>
  	<li>
  	<p>Login with MsGraph</p>
  	</li>
  	<li>
  	<p>Contacts</p>
  
  	<ul>
  		<li>
  		<p>Create</p>
  		</li>
  		<li>
  		<p>Edit</p>
  		</li>
  	</ul>
  	</li>
  </ul>
  </li>
  

I've removed all the links from the outputs above.

This now allows you to build a UL menu with unlimited items.