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 |
Licensed under ISC.