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" position:"sticky" boxed:true py:2
start
Brand href:"/blocks/appbar" label:"Olmo home"
Flex align:"center" gap:2
Icon name:"layers-minimalistic-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-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" show:{ xs:false sm:true }
"Get In Touch"
IconButton icon:"hamburger-menu" label:"Open navigation" variant:"outlined" scheme:"muted"04 ยท FLOATING CARD
An inset navigation surface above campaign color
Open full page
AppBar 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-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-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 scheme:"primary" position:"sticky" boxed:true
top
Box bg:"tertiary" color:"tertiaryText" 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-bold" fill:"warning" w:9 h:9
Text size:"xl" weight:"black" color:"primaryText"
"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 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 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 position:"sticky" bordered:true px:4
start
Brand href:"/blocks/appbar" label:"Vuexy home"
Flex align:"center" gap:3
Icon name:"widget-5-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