StoreHeader
the default bar: name left, links beside it, actions right
Install
npx shadcn-vue@latest add @trame/shell-store-header # Vue
npx shadcn@latest add @trame/shell-store-header # Reactclassic
@trame/shell-store-header--classic the default bar: name left, links beside it, actions right
centered
@trame/shell-store-header--centered a shop whose name is its mark: links left, name centred, actions right
stacked
@trame/shell-store-header--stacked a long name or many links: the name centred, the links centred in a second row
utility
@trame/shell-store-header--utility a large catalogue: the name, a search field and the actions, then the links in a bar under them
overlay
@trame/shell-store-header--overlay a page that opens on a full-bleed picture: a transparent bar with light words over it
filled
@trame/shell-store-header--filled a bar in the brand’s colour for a shop that wants it everywhere
with-account-panel
@trame/shell-store-header--with-account-panel signed-in shops: the account icon opens the customer’s entries with their live status
with-cart-panel
@trame/shell-store-header--with-cart-panel quick checkout: the cart icon opens its lines, the free-shipping progress and the checkout button
menu-panel
@trame/shell-store-header--menu-panel a shop with a short, strong range or a long one hidden away: only the name, a « Menu » button and the cart, the links open as large type over the page
category-strip
@trame/shell-store-header--category-strip fashion and home: the name centred, then a strip of category links with the current one underlined