Extend and remove toolbar buttons

We have develop toolbar(bootstrap- navbar)that contain number of button/control. this toolbar is working as expected.now there is some requirement to provide some mechanism to extend this toolbar with new buttons from outside or remove the default buttons, for example think that we provided this toolbar as some service and there is option to be able to add/remove buttons by configuration or something.

Currently I've two main question:

1. How to structure the html which provided the toolbar with the buttons

2. which pattern(design pattern) should I use to extend this toolbar, please keep im mind that that it should provide the buttons with the logic.

Any example will be very helpful

This is for example of the HTML code and all the handlers logic inside the jsFile

 <div class="toggle-button">
      <div class="wrapper">
        <div class="menu-bar menu-bar-top"></div>
        <div class="menu-bar menu-bar-middle"></div>
        <div class="menu-bar menu-bar-bottom"></div>
      </div>


    </div>

    <nav id="navi" class="navbar navbar-inverse menuBar">
      <div class="container-fluid back">
        <div class="navbar-header">
          <a class="navbar-brand glyphicon glyphicon-dashboard" href="#"></a>
        </div>
        <ul class="nav navbar-nav">
          <li id="dropdown1" class="dropdown open keep-open">
            <a id="qlabel" class="dropdown-toggle glyphicon glyphicon-phone" data-toggle="dropdown" href="#">
            <span class="caret"></span></a>
            <ul class="dropdown-menu">
            <div class="panel-group" id="accordion">
      <div class="panel panel-default">
        <div class="panel-heading"  data-toggle="collapse" data-parent="#accordion" href="#collapse1">
            <a>
            Collapsible Group 1</a>
        </div>
        <div id="collapse1" class="panel-collapse collapse in">
          <div class="panel-body">
          <ul class="nav navbar-nav">
          <li ><a id="s_e_1" onclick="dropDown1_1(this)">SubEntry 1.1.1</a></li>
          <li ><a id="s_e_2" onclick="dropDown1_2(this)">SubEntry 1.1.1</a></li>
           <li ><a id="s_e_3" onclick="dropDown1_3(this)">SubEntry 1.1.1</a></li>

          </ul>
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
            Collapsible Group 2</a>
        </div>
        <div id="collapse2" class="panel-collapse collapse">
          <div class="panel-body">
             <ul class="nav navbar-nav">
          <li ><a id="s_e2_1" onclick="dropDown1_1(this)">SubEntry 1.1.1</a></li>
          <li ><a id="s_e2_2" onclick="dropDown1_2(this)">SubEntry 1.1.1</a></li>
           <li ><a id="s_e1_3" onclick="dropDown1_3(this)">SubEntry 1.1.1</a></li>
           </ul>
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
            Collapsible Group 3</a>
        </div>
        <div id="collapse3" class="panel-collapse collapse">
          <div class="panel-body">

          </div>
        </div>
      </div>
    </div>
            </ul>
          </li>

          <li><a href="#" id="list1" class="glyphicon glyphicon-phone" onclick="list1(this)"></a></li>

        </ul>
        <ul class="nav navbar-nav" style="margin-left:25%;">
         <form class="navbar-form navbar-left">
          <div class="input-group">

             <span style="float:left; margin-top:3%; margin-right:3%; color:white;" class="box glyphicon glyphicon-search"></span>   
            <input type="search" class="form-control" style="height:30px; width:70%;" placeholder="Search" oninput="search(this)">
          </div>
        </form>
        </ul>

         <ul class="nav navbar-nav navbar-right">


    <li class="dropdown">

           <a class="dropdown-toggle glyphicon glyphicon-bell" data-toggle="dropdown" href="#" >
             <span class="badge badge-danger">2</span><span class="caret"></span>
            </a>
            <ul class="dropdown-menu notif" style="padding:20%;">
              <li>Hello</li>
              <hr>
              <li>Notif 2</li>
              <hr>
              <li>Notif 3</li>
            </ul>
          </li>
     <li class="dropdown">
            <a class="dropdown-toggle glyphicon glyphicon-globe" data-toggle="dropdown" href="#">
            <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#" onclick="language(this)">English</a></li>
              <li><a href="#" onclick="language(this)">Hebrew</a></li>
              <li><a href="#" onclick="language(this)">Finnish</a></li>
            </ul>
          </li>
          <li><a href="#" onclick="logout()"><span class="glyphicon glyphicon-log-in"></span> </a></li>
        </ul>
      </div>
    </nav>