MariusBongarts / bronco-corner-navbar

Modern circular corner navbar

➤ Live demo

See the Pen bronco-corner-navbar by marius2502 (@marius2502) on CodePen.

➤ bronco-corner-navbar

Modern corner circular navbar built with Lit-Element

Properties

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

Events

Event	Description
selected	Dispatches a CustomEvent when nav item is selected. Selected item is stored in detail of Custom event

CSS Custom Properties

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

➤ Contributors

Marius Bongarts	You?
[e-mail]
🔥

➤ License

Licensed under ISC.