Example

Same functionality as the bootstrap navbar component or Main Menu now with searchable items.
The search is à la Mac OS menu bar.
Normally on select you would open the link, but this can be changed for other usages.

Element(link, id, label icon(optional), active(optional) )
Submenu('submenu', id, label, Array() )
Dropdown('dropdown', id, label, Array() )


home
link1
link2
DropDown [ link3
           link4
           Submenu [  link5
                      link6
                    ]
          ]
link7
link8
Dropdown  [ link9
            link10
          ]

Markup

A multidimensional array can be built with javascript or your favourite language. The array can include elements, multiple submenus and multiple dropdowns.
The id="" of the elements have to be unique otherwise the search will only find the first path. But you already knew that right? The search is .pull-right so the unfold of the submenus doesn't overlap the autocompletion box.
The same array that generates the navbar is used for the search autocomplete and to generate the path to the selected element.

Arguments

searchableNavbar() function get as parameter the id to append the navbar, an array of items and a bolean true if you want the arrow hovering next to the result.

<script type="text/javascript">
//Element(link, id, label icon(optional), active(optional) )
//Submenu("submenu", id, label, Array() )
//Dropdown("dropdown", id, label, Array() )
  var NavPoints = new Array();
  NavPoints.push( new Array('#homeLink', "11", "Home", "icon-home"));
  NavPoints.push( new Array( "", "12", "Vdivider"));
  NavPoints.push( new Array('#link1',  "13", "link1"));
  NavPoints.push( new Array('#link2', "15", "link2"));
  NavPoints.push( new Array("NotUsed", "16", "Vdivider"));
  NavPoints.push( new Array("dropdown", "17", "Go Down",  DropDown));

  var DropDown = new Array();
  DropDown.push( new Array("link3", "21", "label1", "icon-signal"));
  DropDown.push( new Array("link4", "22", "label2", "icon-cog"));
  DropDown.push( new Array("", "23", "Hseparator"));
  DropDown.push( new Array("submenu", "24", "Go right", subMenu ));

  var SubMenu = new Array();
  SubMenu.push( new Array("#link5", "31", "link5" ));
  SubMenu.push( new Array("#link6", "32", "link6", "icon-align-center" ));
  SubMenu.push( new Array("", "33", "Hseparator"));
  SubMenu.push( new Array("submenu", "34", "Right Again", subMenu2));

  searchableNavbar("NewNav", NavPoints);

</script>

<div id="NewNav"></div>

Two way

You can use either just the builder or the searchable function.

Options

The navbar structure can be stored in a database and sent from your favorite language to javascript.

PHP

Using json_encode is a good way to parse a multidimetional array from php to javascript.

<?php

//fetch structure from DB (this case Doctrine)
  $navBar = Doctrine::getTable('navbar')->findOneByUser('admin');

?>

<script>

  var NavPoints = <?php echo json_encode( $navBar->getStructure() )?>;
  searchableNavbar("NewNav", NavPoints);

</script>


<div id="NewNav"></div>

.NET

Still to come

Dependencies

Done with Bootstrap Version 2.1.0 and jQuery UI. It could be changed in the future for bootstrap Typeahead.

<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/jquery.ui.css" rel="stylesheet">
<link href="assets/css/searchable-navbar.css" rel="stylesheet">

<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.ui.js"></script>
<script src="assets/js/bootstrap-searchablenavbar.js"></script>

Download

ToDos:

Check if jquery ui can be changed to typehead function.

Add shortcut to the elements.

Better division from build navbar and search.