See the Pen
bronco-corner-navbar by marius2502 (@marius2502)
on CodePen.
Modern corner circular navbar built with Lit-Element
Property |
Type |
Default |
Description |
clickoutside |
false | "" |
|
|
hideOnScrolling |
boolean |
false |
Makes the navbar disappear, when user is scrolling |
hideOnTop |
boolean |
false |
Makes the navbar disappear, when window is scrolled to the top |
isScrolling |
boolean |
required |
|
itemsCount |
string |
required |
|
mobile |
boolean |
false |
|
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 |
|
selectedItem |
string |
"Components" |
Sets selected item. Default is first item |
Event |
Description |
selected |
Dispatches a CustomEvent when nav item is selected. Selected item is stored in detail of Custom event |
Property |
Description |
--bg-color-hover |
Color when item is hovered |
--bg-color-item |
Background color of item, when not hovered or selected |
--circle-color-transparent1 |
First, less transparent, color of circle |
--circle-color-transparent2 |
Second, more transparent, color of circle |
--circle-radius |
Sets the radius of the inner circle |
--color |
text color |
--item-radius |
Radius of the nav items inside of circle |
--item-shadow |
Shadow of item, when not selected |
--item-shadow-selected |
Shadow of item, when selected |
--position |
Default: fixed |
--primary-color |
Change primary color easily |
--right |
Position of icon |
--shadow-x |
Shadow-x of item |
--shadow-y |
Shadow-y of item |
--top |
Position of icon |
--z-index |
Default: 3 |
Licensed under ISC.