# MenuItem

# Most common usage scenario

<template>
  <div style="max-width: 300px;">
    <SfMenuItem :label="label" :count="count" :icon="icon" :link="link" />
  </div>
</template>
<script>
import { SfMenuItem } from "@storefront-ui/vue";
import {} from "@storefront-ui/vue";
export default {
  components: {
    SfMenuItem,
  },
  data() {
    return {
      label: "Red",
      count: "30",
      icon: "chevron_right",
      link: "https://www.storefrontui.io/",
    };
  },
};
</script>

# Props

  • label

    • Menu-item label
    • type: string
    • defaultValue: ""
  • icon

    • Menu-item icon (visible on mobile)
    • type: string|array
    • defaultValue: "chevron_right"
  • count

    • Menu-item count of items
    • type: string|number
    • defaultValue: ""
  • link

    • Menu-item link (if is empty then SfMenuItem is SfButton)
    • type: string|object
    • defaultValue: ""

# Slots

  • icon

    • for menu item icon
  • label

    • for menu item label
    • bindings: label
  • count

    • for items count
    • bindings: count
  • mobile-nav-icon

    • bindings: icon

# Events

None.

# CSS modifiers

  • .sf-menu-item--is-active

# CSS custom properties (variables)

  • --menu-item-text-transform
  • --menu-item-font
  • --menu-item-font-weight
  • --menu-item-font-size
  • --menu-item-font-line-height
  • --menu-item-font-family
  • --menu-item-icon-margin
  • --menu-item-count-margin
  • --menu-item-count-color
  • --menu-item-mobile-nav-icon-display
  • --menu-item-mobile-nav-icon-margin
  • --menu-item-label-color

# Overridden other components CSS variables

  • --link-text-decoration
  • --button-width
  • --icon-color

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.