See the Pen bronco-button by marius2502 (@marius2502) on CodePen.
$ npm i https://github.com/marius2502/bronco-side-navbar.git
import '@marius/broncosidenavbar/dist/main';
Left sidebar. To include icons following has to be included in index.html =>
| Property | Type | Default | Description |
|---|---|---|---|
dragBtn |
HTMLElement |
required | |
hideOnMobile |
boolean |
true | Makes the navbar disappear on mobile devices |
mobile |
boolean |
false | If true, either navbar is completely hidden, when hideOnMobile = true or only leftHeader and rightHeader are shown |
navItems |
string[] |
Takes an array to set (minimum: 3, maximum 5) nav items, of this component | |
selectedItem |
string |
"Components" | Sets selected item. Default is first item |
sideBar |
HTMLElement |
required |
| Event | Description |
|---|---|
selected |
Dispatches a CustomEvent when nav item is selected. Selected item is stored in detail of Custom event |
| Property | Description |
|---|---|
--bg-color |
Background color of navitem |
--bg-color-hover |
Hover background color of navItem |
--bg-color-icon-hover |
Hover color of icon |
--color |
Font color |
--padding-top |
Defines where navItems should begin |
--position |
Position of ul |
--primary-color |
Change primary color easily |
--sidebar-min-height |
Sidebar min height. Default: inherit |
--sidebar-width |
Sidebar width. Default: 100%; |
 |
|
|---|---|
| Marius Bongarts | You? |
| marius@bongarts.net | |
| 🔥 |
Licensed under ISC.