header-shop
Header Shop
Store header with an announcement bar, logo, a navigation slot, a search slot that sits inline on wide screens and behind a button that opens an overlay on phones, and account and cart actions.
States: Default, Focus
Parts
| Part | File | Does |
|---|---|---|
| HeaderShop | HeaderShop.vue | Shows an optional announcement, the logo, navigation, and search, account and cart buttons. |
Styling
| Part | Recipe |
|---|---|
| HeaderShop | header-shop |
| HeaderShop | header-shop-announcement |
| HeaderShop | header-shop-bar |
| HeaderShop | logo |
Install
Writes 2 files into components/templates/header-shop/. For agents, npx @frontic/ui docs header-shop prints this reference as markdown; the MCP server serves the same.
- npm packages
- @lucide/vue
Built from
API reference
HeaderShop HeaderShop.vue
Shows an optional announcement, the logo, navigation, and search, account and cart buttons. Renders a <header>.
| Prop | Type | Default | |
|---|---|---|---|
| categories | NavigationCategory[] | [] | |
| pages | NavigationLink[] | [] | |
| menuLabel | string | — | |
| sheetTitle | string | — | |
| featuredCta | string | — | |
| announcement | 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-shop | Sets | |
|---|---|---|
| base: header-shop | 1 property | |
| Recipe header-shop-announcement | Sets | |
|---|---|---|
| base: header-shop-announcement | 5 properties | |
| Recipe header-shop-bar | Sets | |
|---|---|---|
| base: header-shop-bar | 3 properties | |
| Recipe logo | Sets | |
|---|---|---|
| base: logo | 3 properties | |
| focus-ringshared state | 3 properties | |
Example