Dynamic Navigation Tree using PHP Multi-Level Array Source Code

Submitted by oretnom23 on Thursday, November 10, 2022 - 15:49.

Language

Introduction

In this article, I will show you how to Create a Dynamic Navigation Tree in PHP. This kind of feature might be useful for you for your current or future project especially if you are planning to develop a broad and dynamic website or web application. Here, snippets and a sample web application source code are provided.

What is a Dynamic Navigation Tree?

A Dynamic Navigation Tree is a multi-level navigation that is dynamically displayed in a Tree Style. This feature is commonly found in broad web applications with multiple pages.

Here's a visual example of a Dynamic Navigation Tree:

The example above is the MariaDB PHPMyAdmin Front-end. The dynamic tree navigation is located on the left side.

How to Create a Dynamic Navigation Tree?

To create a Dynamic Navigation Tree in PHP, we can manage the navigation data parent and child using PHP Multi-level Array. By that, we can simply separate the parent navigations from the child navigation without exhausting our database by doing multiple redundant queries.

Example of Creating a Dynamic Navigation Tree using PHP

Let's pretend that we have the following MySQL Schema with Navigation Table Data.

    CREATE TABLE `page_list` (
        `id` int(30) NOT NULL,
        `label` varchar(250) NOT NULL,
        `link` text NOT NULL,
        `title` text NOT NULL,
        `parent_id` int(30) DEFAULT NULL,
        `is_new_tab` tinyint(1) NOT NULL DEFAULT 0 COMMENT '0= no , 1= yes',
        `created_at` datetime NOT NULL DEFAULT current_timestamp(),
        `updated_at` datetime DEFAULT NULL ON UPDATE current_timestamp()
      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
      INSERT INTO `page_list` (`id`, `label`, `link`, `title`, `parent_id`, `is_new_tab`, `created_at`, `updated_at`) VALUES
        (1, 'Home', '?page=home', 'Home', NULL, 0, '2022-11-10 11:01:00', '2022-11-10 11:01:21'),
        (2, 'Page 1', '?page=main_nav_1', 'Sample Navigation Page #1', NULL, 0, '2022-11-10 11:02:51', NULL),
        (3, 'Page 1.1', '?page=main_nav_1_1', 'Page 1.1', 2, 0, '2022-11-10 11:03:33', NULL),
        (4, 'Page 1.1.1', '?page=main_nav_1_1_1', 'Page 1.1.1', 3, 0, '2022-11-10 11:21:50', NULL),
        (5, 'Page 1.2', '?page=main_nav_1_2', 'Page 1.2', 2, 0, '2022-11-10 11:58:24', NULL),
        (6, 'Page 1.1.2', '?page=main_nav_1_1_2', 'Page 1.1.2', 3, 0, '2022-11-10 13:10:45', NULL),
        (7, 'External', 'https://www.sourcecodester.com/', 'External Link', NULL, 1, '2022-11-10 13:53:33', NULL);

Next, we need to fetch all the navigation data from the database.

Database Connection

db-connect.php

<?php 
$host = "localhost";
$username = "root";
$pw = "";
$db_name = "dummy_db";
 
$conn = new mysqli($host, $username, $pw, $db_name);
    if(!$conn){
    die('Database connection failed');
    }
?>

Fetching Data

<?php 
$nav_sql = "SELECT * FROM `page_list` order by `label` asc";
$nav_qry = $conn->query($nav_sql);
if(!$conn->error){
    $qry_count = $nav_qry->num_rows;
    $nav_results = $nav_qry->fetch_all(MYSQLI_ASSOC);
    /*
    * Listing Navigation Label
    */
    $nav_list_by_label = array_column($nav_results, 'label', 'id'); 
 
    /*
    * Listing All parent ID
    */
    $nav_parents = array_column($nav_results, 'parent_id'); 
    $nav_parents = array_unique($nav_parents);
    $nav_parents = array_filter($nav_parents);
}else{
    die("Query Failed! Error: ".$conn->error);
}
?>

Next, let's pretend we have the following script that builds the complete URL of the web application page

<?php 
/**
 * Defining Site URL
 */
if(!defined('site_url'))
define('site_url', 'http://localhost/dynamic_nav_tree/');
 
/**
 * Validating Link whether to add the site url or not
 */
 
function esc_link($link=""){
    if(preg_match('/^http:\/\/|^https:\/\//',$link)){
        $link = $link;
    }else{
        $link = site_url.$link;
    }
    return $link;
}
?>

Then we will display the dynamic navigation menu using the HTML unordered list tag (ul).

<?php 
/**
 * Display Nav Child
 */
function get_child($parent_id = 0){
    global $nav_tree;
    ob_start();
    ?>
    <ul class="nav-list-child" data-parent="<?= $parent_id ?>">
    <?php if(isset($nav_tree[$parent_id])): ?>
        <?php foreach($nav_tree[$parent_id] as $nav): ?>
            <li class="nav-item" data-link="<?= esc_link($nav['link']) ?>">
                <div class="d-flex w-100">
                    <a class="col-auto flex-shrink-1 px-2 flex-grow-1 fw-bold w-100 text-decoration-none text-dark" href="<?= esc_link($nav['link']) ?>" <?= $nav['is_new_tab'] == 1 ? "target='_blank'" : '' ?> title="<?=  $nav['title'] ?>"><?=  $nav['label'] ?></a>
                    <div class="col-auto">
                        <div class="dropdown">
                            <a class="text-dark mx-3" href="#" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="fa-solid fa-ellipsis-vertical"></i>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item edit" data-id='<?= $nav['id'] ?>' href="#">Edit</a></li>
                                <li><a class="dropdown-item delete" data-id='<?= $nav['id'] ?>' href="#">Delete</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <?php 
                    if($nav['is_parent'] == 1):
                        echo get_child($nav['id']);
                    endif; 
                    ?>
            </li>
        <?php endforeach; ?>
    <?php endif; ?>
    </ul>
    <?php
    return ob_get_clean();
}
?>
<!-- Navigation ul list -->
<ul id="nav-list">
    <?php if(isset($nav_tree[0])): ?>
        <?php foreach($nav_tree[0] as $nav): ?>
            <li class="nav-item" data-link="<?= esc_link($nav['link']) ?>">
                <div class="d-flex w-100">
                    <a class="col-auto flex-shrink-1 flex-grow-1 fw-bold w-100 text-decoration-none text-dark px-2" href="<?= esc_link($nav['link']) ?>" <?= $nav['is_new_tab'] == 1 ? "target='_blank'" : '' ?> title="<?=  $nav['title'] ?>"><?=  $nav['label'] ?></a>
                    <div class="col-auto">
                        <div class="dropdown">
                            <a class="text-dark mx-3" href="#" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="fa-solid fa-ellipsis-vertical"></i>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item edit" data-id='<?= $nav['id'] ?>' href="#">Edit</a></li>
                                <li><a class="dropdown-item delete" data-id='<?= $nav['id'] ?>' href="#">Delete</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <?php 
                    if($nav['is_parent'] == 1):
                        echo get_child($nav['id']);
                    endif; 
                 ?>
            </li>
        <?php endforeach; ?>
    <?php endif; ?>
</ul>

In the above script, you can see that on the main list, I only loop the main navigation, doing so, will result in to display of the main navigation menu. Then using the get_child() function, it will loop all the child menus under their designated parent menu.

For the tree design, you will need to code using the CSS Script. Here, I also provided a sample web application source code that demonstrates the above scripts.

Application Snapshot

Main Page

Navigation Tree Panel

Content Panel

Technologies

Here are the following technologies used for developing the web application.

HTML
CSS
JavaScript
PHP
MySQL Database
Bootstrap Framework
jQuery Library
Select2 Library
Fontawesome Library

Features and Functionalities

Here are the following features and functionalities of the web application.

Add New Navigation Menu
List Navigation Menu (Tree View)
Edit Navigation Menu
Delete Navigation Menu
Page Content Panel

The source code was only developed for educational purposes only and not intended commercially. Feel free to download and modify the source code.

How to Run?

Requirements

Download and Install any local web server such as XAMPP.
Download the provided source code zip file. (download button is located below)

System Installation/Setup

Open your XAMPP Control Panel and start Apache and MySQL.
Extract the downloaded source code zip file.
Copy the extracted source code folder and paste it into the XAMPP's "htdocs" directory.
Browse the PHPMyAdmin in a browser. i.e. http://localhost/phpmyadmin
Create a new database named dummy_db.
Import the provided SQL file. The file is known as dummy_db.sql located inside the source code root folder.
Browse the Web Application in a browser. i.e. http://localhost/dynamic_nav_tree/.

DEMO VIDEO

That's it! I hope this will help you with what you are looking for and that you'll find this useful for your current and future PHP Projects.

Explore more on this website for more Tutorials and Free Source Codes.

Enjoy :)

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Comments

Problem deleting a menu item with children

Deleting a parent leaves the children in the database, but they are no longer displayed. The deletion should be extended to the extent that all entries that 'parent_id' corresponds to 'id' are deleted beforehand. Of course, it must also be checked again whether there are other children.

Add new comment

Add new comment
2113 views