Sample PHP code:
//suppose we have a list of pages (associative array or other data structure)
//$menu_list = ... //retrieved from database
//or
$menu_list = array(
'id or name of page 1' => array (
'href' => '#link1',
'text' => 'item name or text',
'parent' => 'parent id or name'
)
,
'id or name of page 2' => array (
'href' => '#link2',
'text' => 'item name or text',
'parent' => 'parent id or name'
)
,
'new-user' => array (
'href' => 'user/create',
'text' => 'Add User',
'parent' => 'operations'
)
...
);
//we somehow know the ID or tag or hash of the current page
//perhapse from a database lookup or by simply checking its URL
//for some pointers such as ID, file name, category name, etc ...
$current_page = 'new-user';
$breadcrumbs = array();//let's create our breadcrumbs array as well
//make_me should be a reference to current_item not a copy of it
$mark_me = &$menu_list[$current_page];
$open = false;
while(true) {//you can also use a recursive function instead of a loop
$mark_me['active'] = true;//mark this as "active"
if( $open ) $mark_me['open'] = true;//mark this as "open"
$breadcrumbs[] = $mark_me;
$parent_id = $mark_me['parent'];//see if it has a parent
if( $parent_id == null || !isset($menu_list[$parent_id]) ) break;//if not, break
$mark_me = &$menu_list[$parent_id];//set item's parent as the new "mark_me" and repeat
$open = true;//parent elements should be marked as "open" too
}
foreach($menu_list as $id => $menu_item) {
print('<li class="');
if( $menu_item['active'] ) print('active');
if( $menu_item['open'] ) print(' open');
print('">');
//something like <li class="active open"> will be printed
//...
//print other parts of menu item
}
//now we also have a list of breadcrumb items to print later
Sample Javascript code (for example in Nodejs):
//suppose we have a list of pages (associative array or other data structure)
//var menu_list = ... //retrieved from database
//or
var menu_list = {
'id or name of page 1' : {
'href' : '#link1',
'text' : 'item name or text',
'parent' : 'parent id or name'
}
,
'id or name of page 2' : {
'href' : '#link2',
'text' : 'item name or text',
'parent' : 'parent id or name'
}
,
'new-user' : {
'href' : 'user/create',
'text' : 'Add User',
'parent' : 'operations'
}
...
};
//we somehow know the ID or tag or hash of the current page
//perhapse from a database lookup or by simply checking its URL
//for some pointers such as ID, file name, category name, etc ...
var current_page = 'new-user';
var breadcrumbs = [];//let's create our breadcrumbs array as well
//make_me should be a reference to current_item not a copy of it
var mark_me = menu_list[current_page];
var open = false;
while(true) {//you can also use a recursive function instead of a loop
mark_me['active'] = true;//mark this as "active"
if( open ) mark_me['open'] = true;//mark this as "open"
breadcrumbs.push(mark_me);
var parent_id = mark_me['parent'];//see if it has a parent
if( parent_id == null || !(parent_id in menu_list) ) break;//if not, break
mark_me = menu_list[parent_id];//set item's parent as the new "mark_me" and repeat
open = true;//parent elements should be marked as "open" too
}
var output = '';
for(var id in menu_list) if(menu_list.hasOwnProperty(id)) {
var menu_item = menu_list[id];
output += '<li class="';
if( menu_item['active'] ) output += 'active';
if( menu_item['open'] ) output += ' open';
output += '">';
//something like <li class="active open"> will be printed
//...
//print other parts of menu item
}
console.log(output);
//now we also have a list of breadcrumb items to print later
