See the Pen bronco-corner-navbar by marius2502 (@marius2502) on CodePen.
$ npm i https://github.com/marius2502/bronco-top-navbar.git
import '@marius/broncotopnavbar/dist/main';
Modern Top circular navbar built with Lit-Element
| Property | Type | Default | Description |
|---|---|---|---|
clickoutside |
false | "" |
||
hideOnMobile |
boolean |
false | Makes the navbar disappear on mobile devices |
hideOnNotTop |
boolean |
false | Makes the navbar disappear, when window is not scrolled to the top |
hideOnScrolling |
boolean |
true | Makes the navbar disappear, when user is scrolling |
isScrolling |
boolean |
required | |
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 | |
open |
boolean |
false | Attribute, which is set to true when navbar is open |
scrolledTop |
boolean |
true | True, when window is scrolled to top |
selectedItem |
string |
"Components" | Sets selected item. Default is first item |
title |
string |
"Bronconents" | Change the title of the navbar in the top left corner |
| 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 item, when not hovered or selected |
--color |
text color |
--height |
Navbar height |
--position |
Positioning of navBar. Default: fixed |
--primary-color |
Change primary color easily |
--width |
Navbar width. Default: 100vw |
--z-index |
Default: 2 |
 |
|
|---|---|
| Marius Bongarts | You? |
| marius@bongarts.net | |
| 🔥 |
Licensed under ISC.