# Header

Header component for page navigation.

# Most common usage scenario

<template>
  <div>
    <SfHeader
      :class="customClass"
      :title="title"
      :logo="logo"
      :active-icon="activeIcon"
      :search-placeholder="searchPlaceholder"
      :search-value="searchValue"
      :cart-icon="cartIcon"
      :wishlist-icon="wishlistIcon"
      :is-sticky="isSticky"
      :account-icon="accountIcon"
      :style="spacer"
      :cart-items-qty="cartItemsQty"
      :wishlist-items-qty="wishlistItemsQty"
      @click:cart="alert('@click:cart')"
      @click:wishlist="alert('@click:wishlist')"
      @click:account="alert('@click:account')"
      @change:search="searchValue = $event"
    >
      <template #navigation>
        <SfHeaderNavigationItem v-for="item in navigation" :key="item">
          <template slot="desktop-navigation-item">
            <SfLink href="#">{{ item }}</SfLink>
          </template>
        </SfHeaderNavigationItem>
      </template>
    </SfHeader>
    <div
      style="
        display: flex;
        align-items: center;
        justify-content: center;
        height: 155vh;
        background-color: #f2f2f2;
      "
    >
      [page content]
    </div>
  </div>
</template>
<script>
import { SfHeader } from "@storefront-ui/vue";
import { SfLink } from "@storefront-ui/vue";
export default {
  components: {
    SfHeader,
    SfLink,
  },
  data() {
    return {
      isMobile: false,
      navigation: ["women", "man", "kids"],
      searchValue: "",
      title: "Storefront UI",
      logo: {
        mobile: { url: "/assets/logo.svg" },
        desktop: { url: "/assets/logo.svg" },
      },
      activeIcon: "account",
      isSticky: true,
      searchPlaceholder: "Search for items",
      cartIcon: "empty_cart",
      wishlistIcon: "heart",
      accountIcon: "profile",
      cartItemsQty: "0",
      wishlistItemsQty: "0",
    };
  },
};
</script>

# Props

  • logo

    • Header logo
    • type: string|object
    • defaultValue: ""
  • title

    • Header title
    • type: string
    • defaultValue: ""
  • cartIcon

    • Header cartIcon (accepts same value as SfIcon)
    • type: string|boolean|array
    • defaultValue: "empty_cart"
  • wishlistIcon

    • Header wishlistIcon (accepts same value as SfIcon)
    • type: string|boolean|array
    • defaultValue: "heart"
  • accountIcon

    • Header accountIcon (accepts same value as SfIcon)
    • type: string|boolean|array
    • defaultValue: "profile"
  • activeIcon

    • Header activeIcon (accepts account, wishlist and cart)
    • type: string
    • defaultValue: ""
  • searchPlaceholder

    • Header search placeholder
    • type: string
    • defaultValue: "Search for items"
  • searchValue

    • Header search phrase
    • type: string
    • defaultValue: ""
  • wishlistItemsQty

    • Header cart items quantity
    • type: string|number
    • defaultValue: "0"
  • cartItemsQty

    • Header cart items quantity
    • type: string|number
    • defaultValue: "0"
  • isSticky

    • Header sticky to top
    • type: boolean
    • defaultValue: false
  • isNavVisible

    • Header search on mobile
    • type: boolean
    • defaultValue: false

# Slots

  • logo

    • Use this slot to replace logo with text or image
    • bindings: logo, title
  • aside

    • Use this slot for language or currency selector
  • navigation

  • search

    • Use this slot to replace default search bar
    • bindings: searchValue, searchPlaceholder
  • header-icons

    • Use this slot to replace default header icons with custom content
    • bindings: activeIcon, cartHasProducts, cartItemsQty, cartIcon, wishlistIcon, accountIcon

# Events

None.

# CSS modifiers

  • .sf-header-navigation-item--not-stretched
  • .sf-header-navigation-item__item--desktop
  • .sf-header-navigation-item__item--mobile
  • .sf-header--has-mobile-search
  • .sf-header--has-mobile-navigation
  • .sf-header--multiline

# CSS custom properties (variables)

  • --header-navigation-item-position
  • --header-navigation-item-flex
  • --header-navigation-item-content-position
  • --header-navigation-item-content-width
  • --header-navigation-item-text-decoration
  • --header-navigation-item-menu-item-display
  • --header-navigation-item-menu-item-padding
  • --header-navigation-item-menu-item-margin
  • --header-navigation-item-menu-item-border
  • --header-navigation-item-menu-item-border-width
  • --header-navigation-item-display
  • --header-navigation-item-color
  • --header-navigation-item-padding
  • --header-navigation-item-margin
  • --header-navigation-item-border
  • --header-navigation-item-border-width
  • --header-navigation-item-transition
  • --header-navigation-item-font
  • --header-navigation-item-font-weight
  • --header-navigation-item-font-size
  • --header-navigation-item-font-line-height
  • --header-navigation-item-font-family
  • --header-navigation-item-width

# Overridden other components CSS variables

  • --menu-item-font
  • --font-size--base
  • --menu-item-font
  • --font-weight--medium
  • --menu-item-text-transform
  • --header-navigation-item-border-color
  • --link-color
  • --menu-item-font
  • --font-size--base
  • --menu-item-font
  • --font-weight--medium
  • --header-navigation-menu-display
  • --sidebar-content-padding
  • --header-navigation-sidebar-display
  • --image-width
  • --image-height
  • --header-navigation-display
  • --header-navigation-margin
  • --search-bar-display
  • --header-search-flex
  • --header-icons-display
  • --icon-color
  • --icon-badge-top
  • --icon-badge-right
  • --header-wrapper-position
  • --header-wrapper-transform
  • --header-wrapper-transition
  • --header-box-shadow
  • --header-icons-margin
  • --header-icons-order
  • --header-actions-flex-wrap

You can override CSS variables values bound to this component.

# Internal components

# HeaderNavigation

# Props

  • isVisibleOnMobile
    • type: boolean
    • defaultValue: false

# Slots

  • default

# Events

None.

# CSS modifiers

None.

# CSS variables

None.

# HeaderNavigationItem

# Props

  • label

    • type: string
    • defaultValue: ""
  • link

    • type: string|object
    • defaultValue: ""

# Slots

  • desktop-navigation-item

  • default

  • mobile-navigation-item

# Events

None.

# CSS modifiers

None.

# CSS variables

None.

# Play with this component

See all available configurations and play with this component on Storybook.