Manual v0.1 // Component Library
The Navbar "Logo, links, actions. Three slots, and a burger that takes over below 768px." Four real <Navbar> variants from echo-ui. Each tile has its own Desktop / Mobile toggle, that's the real component's preview prop forcing the layout, not a screenshot, so the burger/drawer behaviour is exactly what ships.
Desktop Mobile
echov2 / echo
No fill background Default text cream ink slate porcelain midnight navy oat walnut chalk ember olive teal gold peri grape bloom tide lavender red flame sage mellow lilac sky rose lime deep black grey Default font kepler satoshi ibm familjen urbanist ubuntu cascadia syne stella sifonn paralucent spacegrotesk jakarta thiery heart pixel europa univia glyke No hover glow
No fill by design. Bg only shows in the mobile drawer, not the desktop bar.
No hover glow to swap. Links here use underline/opacity, not a background chip.
Spec 6rem tall / hard dividers / IBM caps
variant="bordered" (default)
Desktop Mobile
dermageddon / samSepiol
No fill background Default text cream ink slate porcelain midnight navy oat walnut chalk ember olive teal gold peri grape bloom tide lavender red flame sage mellow lilac sky rose lime deep black grey Default font kepler satoshi ibm familjen urbanist ubuntu cascadia syne stella sifonn paralucent spacegrotesk jakarta thiery heart pixel europa univia glyke No hover glow
No fill by design. Bg only shows in the mobile drawer, not the desktop bar.
No hover glow to swap. Links here use underline/opacity, not a background chip.
Spec borderless / wide tracking / slide-in mobile
variant="minimal"
Default background cream ink slate porcelain midnight navy oat walnut chalk ember olive teal gold peri grape bloom tide lavender red flame sage mellow lilac sky rose lime deep black grey Default text cream ink slate porcelain midnight navy oat walnut chalk ember olive teal gold peri grape bloom tide lavender red flame sage mellow lilac sky rose lime deep black grey Default font kepler satoshi ibm familjen urbanist ubuntu cascadia syne stella sifonn paralucent spacegrotesk jakarta thiery heart pixel europa univia glyke Default hover glow cream ink slate porcelain midnight navy oat walnut chalk ember olive teal gold peri grape bloom tide lavender red flame sage mellow lilac sky rose lime deep black grey
Spec floating capsule / neu-strong links
variant="pill"
No fill background Default text cream ink slate porcelain midnight navy oat walnut chalk ember olive teal gold peri grape bloom tide lavender red flame sage mellow lilac sky rose lime deep black grey Default font kepler satoshi ibm familjen urbanist ubuntu cascadia syne stella sifonn paralucent spacegrotesk jakarta thiery heart pixel europa univia glyke No hover glow
No fill by design. Bg only shows in the mobile drawer, not the desktop bar.
No hover glow to swap. Links here use underline/opacity, not a background chip.
Spec serif italic logo / airy centered links
variant="editorial"
How to use
import { Navbar } from "echo-ui";<Navbar variant="pill">
<template #logo>
<img src="/logo.svg" />
</template>
<NuxtLink to="/work">Work</NuxtLink>
<NuxtLink to="/contact">Contact</NuxtLink>
<template #actions>
<a href="mailto:hi@you.com">Get in touch</a>
</template>
</Navbar>variant accepts bordered (default), minimal , pill , or editorial . bg /text /font override a variant's default colours and font without forking it. hover overrides the glow colour on pill's link chips. No more forcing everyone into echo orange. preview accepts mobile /desktop to force that layout regardless of real viewport width, that's what powers the toggle buttons above.
Base rule
burger overlay is position: fixed, full-viewport (unless preview forces it)
Source
echo-ui/components/Navbar.vue
