# 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 = '
';},
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';}
}
]
}
]
}
```