Navbar Kit · How it works
One navbar. Every setting.
Pick a layout, then change the hover, speed and extras from the properties panel. Nothing to rebuild, no layers to dig through. Every example on this page is the same component with different settings.
01
Style
Pick the layout
02
Content
Logo, links, button text
03
Show / hide
Buttons, search, extras
04
Hover
Links, button, logo, speed
05
Colors
Seven color slots
06
Fonts & shape
Type, radius, height
01 · Link hover · 11 effects
Link hover
One dropdown, eleven effects, the same on every layout. Below is the same navbar each time, with only the Link hover setting changed. "Layout default" keeps each layout's own effect.
Underline · left
Underline · center
Edge line
Spotlight
Chip
Fill
Color tint
Dim others
Roll
Dot
Lift
02 · Button hover · 7 effects
Button hover
The call-to-action button has its own dropdown, separate from the links, so any link effect can pair with any button effect. Hover the button in each example.
Darken
Grow
Arrow nudge
Arrow reveal
Shine
Lift
Roll
03 · Show / hide
Extras are switches, not new navbars
Everything is included and on a switch: second button, search, announcement bar, bottom row, icons, logo mark and the button itself. Turning one off is easier than finding a version without it.
+ 2nd button
+ Search
+ Announcement
+ Bottom row
Stripped · icons, logo mark and button off
04 · Speed
Speed
Three words instead of spring physics. Speed applies to every hover effect on the navbar at once. Move across the links quickly to feel the difference.
Snappy
Smooth · default
Slow