header-centered

Header Centered

Store header with a centred logo between a search slot (inline on wide screens, an overlay button on phones) and account and cart actions, over a full-width navigation slot.

States: Default, Focus

Parts

Part	File	Does
HeaderCentered	HeaderCentered.vue	Shows the logo and navigation with search, account and cart buttons.

Styling

Part	Recipe
HeaderCentered	header-centered
HeaderCentered	header-centered-logo
HeaderCentered	header-centered-nav

Install

Writes 2 files into components/templates/header-centered/. For agents, npx @frontic/ui docs header-centered prints this reference as markdown; the MCP server serves the same.

Installs with it: badge; button; navigation-shop
npm packages: @lucide/vue

Built from

Badge Button Navigation Shop

API reference

HeaderCentered HeaderCentered.vue

Shows the logo and navigation with search, account and cart buttons. Renders a <header>.

Prop	Type	Default
categories	NavigationCategory[]	[]

pages	NavigationLink[]	[]

menuLabel	string	'Open menu'

sheetTitle	string	—

featuredCta	string	—

logoText	string	'STORE'

logoSrc	string	''

homeHref	string	'/'

cartCount	number	0

searchLabel	string	'Search'

accountLabel	string	'Account'

cartLabel	string	'Cart'

cartOverflowLabel	string	'9+'

class	ClassValue	—

menu	string	''

menuOpen	boolean	false

Event	Payload
search	—

update:menu	value: string

update:menuOpen	value: boolean

account	—

cart	—

Slot	Slot props
navigation	{ categories: NavigationCategory[]; pages: NavigationLink[]; }

search	{ presentation: "inline" \| "overlay"; }

Recipe header-centered	Sets
base: header-centered	4 properties

Recipe header-centered-logo	Sets
base: header-centered-logo	3 properties · 2 inherited

focus-ringshared state	3 properties

Recipe header-centered-nav	Sets
base: header-centered-nav	2 properties

Example