# TopBar

Top Bar component with righ or left aligned content.

# Most common usage scenario

<template>
  <SfTopBar>
    <template #center>
      <p style="margin-right: 5px;">Download our application.</p>
      <SfButton class="sf-button--text">Find out more</SfButton>
    </template>
    <template #left>
      <SfButton class="sf-button--text">Help & FAQs</SfButton>
    </template>
    <template #right>
      <div style="margin-right: 27px;">Location:</div>
      <SfImage
        src="/assets/storybook/SfTopBar/flag.png"
        alt="flag of the USA"
      />
    </template>
  </SfTopBar>
</template>
<script>
import { SfTopBar } from "@storefront-ui/vue";
import { SfButton } from "@storefront-ui/vue";
import { SfImage } from "@storefront-ui/vue";
export default {
  components: {
    SfTopBar,
    SfButton,
    SfImage,
  },
};
</script>

# Props

None.

# Slots

  • left

    • Custom left content
  • center

    • Custom center content
  • right

    • Custom right content

# Events

None.

# CSS modifiers

None.

# CSS custom properties (variables)

  • --top-bar-background
  • --top-bar-height

# Overridden other components CSS variables

None.

You can override CSS variables values bound to this component.

# Play with this component

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