COPY-READY BLOCKS
App bars
Eight navigation patterns. Preview device sizes and copy only the AppBar source.
01 · CLASSIC SAAS
Brand, navigation, and one clear action
Open full page
AppBar variant:"soft" scheme:"surface" position:"sticky" boxed:true py:2
start
Brand href:"/blocks/appbar" label:"Olmo home"
Flex align:"center" gap:2
Icon name:"layers-minimalistic" style:"bold" fill:"primary" w:8 h:8
Text size:"xl" weight:"black"
"OLMO."
center
NavMenu variant:"ghost" scheme:"primary" size:"sm" show:{ xs:false md:true }
item label:"Home" href:"/blocks/appbar-preview/classic-saas"
submenu label:"About"
item label:"Creative" href:"/blocks/appbar-preview/creative"
item label:"Social" href:"/blocks/appbar-preview/social-pill"
submenu label:"Auth Pages"
item label:"Floating" href:"/blocks/appbar-preview/floating-card"
item label:"Centered" href:"/blocks/appbar-preview/centered-pill"
item label:"Pricing" href:"/blocks/appbar-preview/hosting"
item label:"Blog" href:"/blocks/appbar-preview/admin"
end
Flex align:"center" gap:2
Button href:"/blocks/appbar-preview/creative" size:"sm" show:{ xs:false sm:true }
"Let's Started"
IconButton icon:"hamburger-menu" label:"Open navigation" variant:"ghost" show:{ xs:true md:false }02 · CREATIVE STUDIO
A soft campaign surface with compact controls
Open full page
AppBar variant:"soft" scheme:"danger" position:"sticky" boxed:true py:2 blurred:true
start
Brand href:"/blocks/appbar" label:"Pekoo home"
Flex align:"center" gap:2
Icon name:"bolt-circle" style:"bold" fill:"danger" w:8 h:8
Text size:"xl" weight:"black"
"PEKOO."
center
NavMenu variant:"ghost" scheme:"danger" size:"sm" show:{ xs:false md:true }
item label:"Home" href:"/blocks/appbar-preview/creative"
item label:"About Us" href:"/blocks/appbar-preview/social-pill"
item label:"Services" href:"/blocks/appbar-preview/floating-card"
item label:"Contact" href:"/blocks/appbar-preview/centered-pill"
end
Flex align:"center" gap:3
Button href:"/blocks/appbar-preview/floating-card" scheme:"danger" size:"sm" rounded:"md" show:{ xs:false sm:true }
"Get In Touch"
IconButton icon:"hamburger-menu" label:"Open navigation" variant:"outlined" scheme:"muted" rounded:"md"04 · FLOATING CARD
An inset navigation surface above campaign color
Open full page
AppBar variant:"solid" scheme:"surface" position:"sticky" boxed:true floating:true bordered:true py:2
start
Flex align:"center" gap:5
Brand href:"/blocks/appbar" label:"Pekoo home"
Flex align:"center" gap:2
Icon name:"bolt-circle" style:"bold" fill:"primary" w:8 h:8
Text size:"xl" weight:"black"
"PEKOO."
Flex align:"center" gap:2 show:{ xs:false lg:true }
IconButton icon:"global" label:"Community" scheme:"danger" rounded:"full"
IconButton icon:"figma" label:"Design profile" scheme:"info" rounded:"full"
center
NavMenu variant:"ghost" scheme:"muted" size:"sm" show:{ xs:false md:true }
item label:"Home" href:"/blocks/appbar-preview/floating-card"
item label:"About Us" href:"/blocks/appbar-preview/creative"
item label:"Services" href:"/blocks/appbar-preview/social-pill"
item label:"Contact" href:"/blocks/appbar-preview/centered-pill"
end
Button href:"/blocks/appbar-preview/centered-pill" scheme:"secondary" size:"sm" rounded:"full" show:{ xs:false sm:true }
"Get In Touch"05 · CENTERED PILL
A wide breathing rhythm with one centered menu
Open full page
AppBar variant:"soft" scheme:"info" position:"sticky" boxed:true py:2
start
Brand href:"/blocks/appbar" label:"Pekoo home"
Flex align:"center" gap:2
Icon name:"bolt-circle" style:"bold" fill:"primary" w:8 h:8
Text size:"xl" weight:"black"
"PEKOO."
center
NavMenu variant:"solid" scheme:"surface" size:"sm" rounded:"full" show:{ xs:false md:true }
item label:"Home" href:"/blocks/appbar-preview/centered-pill"
item label:"About Us" href:"/blocks/appbar-preview/creative"
item label:"Services" href:"/blocks/appbar-preview/social-pill"
item label:"Contact" href:"/blocks/appbar-preview/floating-card"
end
Button href:"/blocks/appbar-preview/dashboard" size:"sm" rounded:"full" show:{ xs:false sm:true }
"Hire Me"06 · HOSTING ANNOUNCEMENT
A utility strip above product navigation
Open full page
AppBar variant:"solid" scheme:"primary" position:"sticky" boxed:true
top
Box bg:"tertiary" color:"onTertiary" px:4 py:2
Grid columns:{ xs:1 md:3 } gap:4 align:"center"
Text size:"xs" weight:"bold"
"Contact@hostc.com"
Flex justify:"center" show:{ xs:false md:true }
Text size:"xs" weight:"bold"
"Hosting Flash Sale: Starting at $2.59/mo for a limited time"
Flex justify:"end" show:{ xs:false lg:true }
Text size:"xs" weight:"bold"
"Live Chat · Login"
start
Brand href:"/blocks/appbar" label:"Hostc home"
Flex align:"center" gap:2
Icon name:"global" style:"bold" fill:"warning" w:9 h:9
Text size:"xl" weight:"black" color:"onPrimary"
"HOSTC"
center
NavMenu variant:"soft" scheme:"surface" size:"sm" show:{ xs:false md:true }
submenu label:"Home"
item label:"Classic" href:"/blocks/appbar-preview/classic-saas"
submenu label:"Pages"
item label:"Social" href:"/blocks/appbar-preview/social-pill"
submenu label:"Services"
item label:"Dashboard" href:"/blocks/appbar-preview/dashboard"
item label:"Blogs" href:"/blocks/appbar-preview/admin"
item label:"Contact" href:"/blocks/appbar"
end
Button href:"/blocks/appbar-preview/dashboard" scheme:"warning" size:"sm" rounded:"full" show:{ xs:false sm:true }
"GET STARTED NOW"07 · DASHBOARD TOOLBAR
Search, notifications, and profile context
Open full page
AppBar variant:"solid" scheme:"surface" position:"sticky" boxed:true bordered:true py:1
start
Flex align:"center" gap:6
Text size:"lg" weight:"black"
"Dashboard"
Input label:"Search dashboard" placeholder:"Type to search ..." labelFloating:true variant:"outlined" scheme:"muted" iconStart:"magnifier" w:72 show:{ xs:false md:true }
end
Flex align:"center" gap:3
IconButton icon:"letter" label:"Open messages" variant:"ghost" scheme:"muted" size:"sm" show:{ xs:false md:true }
IconButton icon:"bell" label:"Open notifications" variant:"ghost" scheme:"muted" size:"sm"
Divider orientation:"vertical" h:8 show:{ xs:false md:true }
Avatar name:"Jonathan Stone" alt:"Jonathan Stone" scheme:"primary" size:"md" status:"online"
Grid columns:1 gap:1 show:{ xs:false md:true }
Text size:"sm" weight:"bold"
"Jonathan"
Text size:"xs" color:"muted"
"Admin"
IconButton icon:"settings" label:"Open settings" variant:"ghost" scheme:"muted" size:"sm" show:{ xs:false md:true }08 · TWO-ROW ADMIN
Global tools above a complete product menu
Open full page
AppBar variant:"solid" scheme:"surface" position:"sticky" bordered:true px:4
start
Brand href:"/blocks/appbar" label:"Vuexy home"
Flex align:"center" gap:3
Icon name:"widget-5" style:"bold" fill:"primary" w:8 h:8
Text size:"xl" weight:"black"
"Vuexy"
end
Flex align:"center" gap:2
IconButton icon:"magnifier" label:"Search" variant:"ghost" scheme:"muted" size:"sm"
IconButton icon:"translation" label:"Change language" variant:"ghost" scheme:"muted" size:"sm" show:{ xs:false md:true }
IconButton icon:"sun" label:"Change theme" variant:"ghost" scheme:"muted" size:"sm" show:{ xs:false md:true }
IconButton icon:"widget-2" label:"Open shortcuts" variant:"ghost" scheme:"muted" size:"sm" show:{ xs:false md:true }
IconButton icon:"bell" label:"Open notifications" variant:"ghost" scheme:"muted" size:"sm"
Avatar name:"Jordan Lee" alt:"Jordan Lee" scheme:"primary" size:"md" status:"online"
IconButton icon:"hamburger-menu" label:"Open navigation" variant:"ghost" scheme:"muted" size:"sm" show:{ xs:true md:false }
bottom
NavMenu variant:"ghost" scheme:"primary" size:"sm" show:{ xs:false md:true }
item label:"Dashboards" href:"/blocks/appbar-preview/dashboard"
item label:"Apps" href:"/blocks/appbar-preview/admin"
item label:"Pages" href:"/blocks/appbar-preview/classic-saas"
item label:"User Interface" href:"/blocks/appbar-preview/social-pill"
item label:"Forms" href:"/blocks/appbar-preview/floating-card"
item label:"Tables" href:"/blocks/appbar-preview/centered-pill"
item label:"Charts" href:"/blocks/appbar-preview/hosting"
item label:"Misc" href:"/blocks/appbar-preview/creative"
03 · SOCIAL PILL
Social shortcuts and centered pill navigation
Open full page