# Get started just define menu items to make a simple navigation [see example](simple_nav.html) ``` const def = { nav:{ menu:[ { title:"menu 1", onclick:function(mainarea){mainarea.innerHTML = '
menu 1
';} }, { title:"default menu", onclick:function(mainarea){mainarea.innerHTML = '
default menu
';}, default:true // the menu item will be executed when its default property is true } ] } }; // bs_handler will be provided window.addEventListener("load",function(){ bs_handler.displayNavBar(def.nav); }); ```
# Add a brand We can add the **brand** property to definition. The brand can have **title**, **href** and **icon** properties. The icon can be provided as a file or as an inner html. [see example](with_brand.html) ``` nav:{ brand:{ title:"Awesome App", href:"#", icon:{html:''} //icon:{src:"circle.svg"} }, menu:[...] } ```
# Get colored We can add colors by definition. **colorpole** property is generally for navbar and can be 'light' or 'dark.' The default value of colorpole is 'light.' **classes** property will hold the definitions for some elements. The class names in **classes.navbar** will reflects in navbar. [see example](get_colored.html) ``` nav:{ colorpole:"dark", classes:{ navbar:["bg-dark"] }, brand:{...}, menu:[...] } ```
# Add dropdown We can add dropdown menu. Add a menu item with "dropdown" as **type**. And add the dropdown items in **dropdowns**. The dropdown items are like menu items. [see example](add_dropdown.html) ``` nav:{ colorpole:"dark", classes:{...}, brand:{...}, menu:[ {title:"menu 1",...}, {title:"default menu",...}, { type:"dropdown", title:"dropdown menu", dropdowns:[ { title:"dropdown 1", onclick:function(area){area.innerHTML = 'dropdown 1';} }, { title:"dropdown 2", onclick:function(area){area.innerHTML = 'dropdown 2';} } ] } ] } ```
# Add sidebar Write ```bs_handler.displaySideBar();``` to display the sidebar. [see example](add_sidebar.html) ``` const def = { nav:{ colorpole:"dark", classes:{...}, brand:{...}, menu:[ {title:"menu 1",...}, {title:"default menu",...}, {type:"dropdown",title:"dropdown",...}, { title:"sidebar", onclick:function(){bs_handler.displaySideBar(def.sidebar);} } ] }, sidebar:{ menu:[ { title:"side 1", onclick:function(area){area.innerHTML = "side 1";} }, { title:"side 2", onclick:function(area){area.innerHTML = "side 2";} } ] } }; ```
# Display modal Use ```bs_handler.displayModal()``` to display modal form. [see example](display_modal.html) ``` nav:{ colorpole:"dark", classes:{...}, brand:{...}, menu:[ {title:"menu 1",...}, {title:"default menu",...}, {type:"dropdown",...}, {title:"sidebar",...}, { title:"modal", onclick:function(){const modalobj = bs_handler.displayModal(); modalobj.body.innerHTML = "this is modal";} } ] } ```
# Details - nav
# Nav ``` const def_nav = { brand:{ icon:{html:""}, title:"Title", href:"#" }, colorpole:"dark", classes:{ navbar:["bg-dark"], brand:[], menu_li:[], menu_a:["text-warning"], dropdownmenu:["bg-transparent"], dropdownitem:[], spinner:["text-danger"] }, menu:[ { type:"executable", title:"menu 1", classes:{li:[],a:[]}, onclick:function(mainarea){mainarea.innerHTML = "test 1";} }, { type:"dropdown", title:"ドロップダウン", classes:{li:[],a:[]}, dropdowns:[ { type:"executable", title:"ドロップダウン1", classes:{a:["bg-danger"]}, onclick:function(mainarea){ mainarea.innerHTML = "dropdown 1"; } }, { type:"executable", title:"ドロップダウン2", classes:{a:["bg-warning"]}, onclick:function(mainarea){ mainarea.innerHTML = "dropdown 2"; } } ] } ] }; ```