[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of menu/messages/ko-KR.json from the menu VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.menu-link": "메뉴",
  "admin/editor.menu-link.title": "제목",
  "admin/editor.menu-link.description": "링크 메뉴 모음",
  "admin/editor.menu-link.links": "링크",
  "admin/editor.menu-link.links.link": "링크",
  "admin/editor.menu-link.links.link.text": "링크 텍스트",
  "admin/editor.menu-link.links.link.internalPage": "타켓 페이지",
  "admin/editor.menu-link.links.link.internalPage.description": "내부인 경우",
  "admin/editor.menu-link.links.link.params": "매개 변수",
  "admin/editor.menu-link.links.link.params.description": "쉼표로 구분된 매개 변수(예: 키=값, a=b,c=d)",
  "admin/editor.menu-link.links.link.externalPage": "URL(https 또는 http로 시작해야 함)",
  "admin/editor.menu-link.links.link.externalPage.description": "외부인 경우",
  "admin/editor.menu-link.links.link.typeOfRoute": "경로 유형",
  "admin/editor.menu-link.links.link.typeOfRoute.internal": "내부",
  "admin/editor.menu-link.links.link.typeOfRoute.external": "외부",
  "admin/editor.menu-link.links.link.position": "위치",
  "admin/editor.menu-link.links.link.position.left": "왼쪽",
  "admin/editor.menu-link.links.link.position.middle": "중간",
  "admin/editor.menu-link.links.link.position.right": "오른쪽",
  "admin/editor.future-menu.title": "메뉴",
  "admin/editor.future-menu.description": "The VTEX 메뉴 앱",
  "admin/editor.menu.typography.title": "타이포그래피",
  "admin/editor.menu.typography.description": "사용자가 메뉴 항목에 사용할 타이포그래피 클래스를 선택할 수 있습니다.",
  "admin/editor.menu.orientation.title": "방향",
  "admin/editor.menu.orientation.vertical.label": "수직",
  "admin/editor.menu.orientation.horizontal.label": "수평",
  "admin/editor.menu.items.title": "메뉴 항목",
  "admin/editor.menu.item.id.title": "아이디",
  "admin/editor.menu.item.type.title": "유형",
  "admin/editor.menu.item.category.title": "카테고리",
  "admin/editor.menu.item.custom.title": "사용자 지정",
  "admin/editor.menu.item.iconProps.id.title": "아이콘 ID",
  "admin/editor.menu.item.onMountBehavior.title": "가리키면 하위 메뉴 열림",
  "admin/editor.menu.item.editorItemTitle.title": "메뉴 항목 이름",
  "admin/editor.menu.item.editorItemTitle.description": "이것은 사이트 편집기에만 표시됩니다.",
  "admin/editor.menu.item.iconProps": "아이콘 Props",
  "admin/editor.menu.item.iconProps.id.title": "아이콘 ID",
  "admin/editor.menu.item.highlight.title": "하이라이트",
  "admin/editor.menu.item.submenuWidth.title": "하위 메뉴 너비",
  "admin/editor.menu.item.params.title": "매개 변수",
  "admin/editor.menu.item.params.categoryId.title": "카테고리 ID",
  "admin/editor.menu.item.params.text.title": "텍스트",
  "admin/editor.menu.item.params.type.title": "유형",
  "admin/editor.menu.item.params.internal.title": "내부",
  "admin/editor.menu.item.params.external.title": "외부",
  "admin/editor.menu.item.params.href.title": "href",
  "admin/editor.menu.item.params.noFollow.title": "nofollow 속성",
  "admin/editor.menu.item.params.tagTitle.title": "제목 속성",
  "admin/editor.menu.submenu.title": "하위 메뉴",
  "admin/editor.menu.additionalDef.title": "추가 정의",
  "admin/editor.menu.def.none": "없음",
  "admin/editor.menu.def.title": "제목",
  "admin/editor.menu.def.category": "카테고리",
  "admin/editor.menu.categoryId.title": "카테고리 ID"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of menu/messages/ja-JP.json from the menu VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.menu-link": "メニュー",
  "admin/editor.menu-link.title": "タイトル",
  "admin/editor.menu-link.description": "リンクのメニューバー",
  "admin/editor.menu-link.links": "リンク",
  "admin/editor.menu-link.links.link": "リンク",
  "admin/editor.menu-link.links.link.text": "リンクテキスト",
  "admin/editor.menu-link.links.link.internalPage": "ターゲットページ",
  "admin/editor.menu-link.links.link.internalPage.description": "社内の場合",
  "admin/editor.menu-link.links.link.params": "パラメータ",
  "admin/editor.menu-link.links.link.params.description": "コンマで区切られたパラメータ。例: key=value,a=b,c=d",
  "admin/editor.menu-link.links.link.externalPage": "URL (https または http から始めてください)",
  "admin/editor.menu-link.links.link.externalPage.description": "外部の場合",
  "admin/editor.menu-link.links.link.typeOfRoute": "ルートのタイプ",
  "admin/editor.menu-link.links.link.typeOfRoute.internal": "社内",
  "admin/editor.menu-link.links.link.typeOfRoute.external": "外部",
  "admin/editor.menu-link.links.link.position": "ポジション",
  "admin/editor.menu-link.links.link.position.left": "左",
  "admin/editor.menu-link.links.link.position.middle": "中央",
  "admin/editor.menu-link.links.link.position.right": "右",
  "admin/editor.future-menu.title": "メニュー",
  "admin/editor.future-menu.description": "VTEX メニューアプリ",
  "admin/editor.menu.typography.title": "タイポグラフィ",
  "admin/editor.menu.typography.description": "メニュー項目でどのタイポグラフィタイプを使うか、ユーザーが選べるようにします",
  "admin/editor.menu.orientation.title": "方向",
  "admin/editor.menu.orientation.vertical.label": "垂直",
  "admin/editor.menu.orientation.horizontal.label": "水平",
  "admin/editor.menu.items.title": "メニュー項目",
  "admin/editor.menu.item.id.title": "ID",
  "admin/editor.menu.item.type.title": "タイプ",
  "admin/editor.menu.item.category.title": "カテゴリ",
  "admin/editor.menu.item.custom.title": "カスタム",
  "admin/editor.menu.item.iconProps.id.title": "アイコン ID",
  "admin/editor.menu.item.onMountBehavior.title": "マウスを重ねるとサブメニューが開きます",
  "admin/editor.menu.item.editorItemTitle.title": "メニュー項目名",
  "admin/editor.menu.item.editorItemTitle.description": "これはサイト編集者にのみ表示されます",
  "admin/editor.menu.item.iconProps": "アイコンプロパティ",
  "admin/editor.menu.item.iconProps.id.title": "アイコン ID",
  "admin/editor.menu.item.highlight.title": "ハイライト",
  "admin/editor.menu.item.submenuWidth.title": "サブメニュー幅",
  "admin/editor.menu.item.params.title": "パラメータ",
  "admin/editor.menu.item.params.categoryId.title": "カテゴリ ID",
  "admin/editor.menu.item.params.text.title": "テキスト",
  "admin/editor.menu.item.params.type.title": "タイプ",
  "admin/editor.menu.item.params.internal.title": "社内",
  "admin/editor.menu.item.params.external.title": "外部",
  "admin/editor.menu.item.params.href.title": "href",
  "admin/editor.menu.item.params.noFollow.title": "nofollow 属性",
  "admin/editor.menu.item.params.tagTitle.title": "title 属性",
  "admin/editor.menu.submenu.title": "サブメニュー",
  "admin/editor.menu.additionalDef.title": "追加定義",
  "admin/editor.menu.def.none": "なし",
  "admin/editor.menu.def.title": "タイトル",
  "admin/editor.menu.def.category": "カテゴリ",
  "admin/editor.menu.categoryId.title": "カテゴリ ID"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of menu/messages/bg-BG.json from the menu VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.menu-link": "Меню",
  "admin/editor.menu-link.title": "Заглавие",
  "admin/editor.menu-link.description": "Лента от меню с линкове",
  "admin/editor.menu-link.links": "Линкове",
  "admin/editor.menu-link.links.link": "Линк",
  "admin/editor.menu-link.links.link.text": "Текст на линк",
  "admin/editor.menu-link.links.link.internalPage": "Целева страница",
  "admin/editor.menu-link.links.link.internalPage.description": "Ако е вътрешно",
  "admin/editor.menu-link.links.link.params": "Параметри",
  "admin/editor.menu-link.links.link.params.description": "Параметри, разделени със запетая, напр.: key=value,a=b,c=d",
  "admin/editor.menu-link.links.link.externalPage": "URL (трябва да започва с https или http)",
  "admin/editor.menu-link.links.link.externalPage.description": "Ако е външно",
  "admin/editor.menu-link.links.link.typeOfRoute": "Тип пътека",
  "admin/editor.menu-link.links.link.typeOfRoute.internal": "Вътрешно",
  "admin/editor.menu-link.links.link.typeOfRoute.external": "Външно",
  "admin/editor.menu-link.links.link.position": "Позиция",
  "admin/editor.menu-link.links.link.position.left": "Ляво",
  "admin/editor.menu-link.links.link.position.middle": "Средно",
  "admin/editor.menu-link.links.link.position.right": "Дясно",
  "admin/editor.future-menu.title": "Меню",
  "admin/editor.future-menu.description": "Приложение с менюто на VTEX",
  "admin/editor.menu.typography.title": "Типография",
  "admin/editor.menu.typography.description": "Позволява на потребителите да изберат кой клас типография да се използва за елементите от менюто",
  "admin/editor.menu.orientation.title": "Ориентация",
  "admin/editor.menu.orientation.vertical.label": "вертикално",
  "admin/editor.menu.orientation.horizontal.label": "хоризонтално",
  "admin/editor.menu.items.title": "Елемент от менюто",
  "admin/editor.menu.item.id.title": "ИД",
  "admin/editor.menu.item.type.title": "Тип",
  "admin/editor.menu.item.category.title": "Категория",
  "admin/editor.menu.item.custom.title": "По избор",
  "admin/editor.menu.item.iconProps.id.title": "Икона на ИД",
  "admin/editor.menu.item.editorItemTitle.title": "Наименование на елемент от меню",
  "admin/editor.menu.item.editorItemTitle.description": "Това ще е видимо само в редактора за сайтове",
  "admin/editor.menu.item.highlight.title": "Акцент",
  "admin/editor.menu.item.submenuWidth.title": "Широчина на подменю",
  "admin/editor.menu.item.params.title": "Параметри",
  "admin/editor.menu.item.params.categoryId.title": "ИД на категория",
  "admin/editor.menu.item.params.text.title": "Текст",
  "admin/editor.menu.item.params.type.title": "Тип",
  "admin/editor.menu.item.params.internal.title": "Вътрешно",
  "admin/editor.menu.item.params.external.title": "Външно",
  "admin/editor.menu.item.params.href.title": "href",
  "admin/editor.menu.item.params.noFollow.title": "атрибут nofollow",
  "admin/editor.menu.item.params.tagTitle.title": "Атрибут на заглавието",
  "admin/editor.menu.submenu.title": "Подменю",
  "admin/editor.menu.additionalDef.title": "Допълнителна дефиниция",
  "admin/editor.menu.def.none": "Няма",
  "admin/editor.menu.def.title": "Заглавие",
  "admin/editor.menu.def.category": "Категория",
  "admin/editor.menu.categoryId.title": "ИД на категория"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of menu/messages/pt.json from the menu VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.menu-link": "Menu",
  "admin/editor.menu-link.title": "Título",
  "admin/editor.menu-link.description": "Uma barra de menu com links",
  "admin/editor.menu-link.links": "Links",
  "admin/editor.menu-link.links.link": "URL",
  "admin/editor.menu-link.links.link.text": "Texto do Link",
  "admin/editor.menu-link.links.link.internalPage": "Página Alvo",
  "admin/editor.menu-link.links.link.internalPage.description": "Se interna",
  "admin/editor.menu-link.links.link.params": "Parâmetros",
  "admin/editor.menu-link.links.link.params.description": "Parâmetros separados por vírgula, e.g.: chave=valor,a=b,c=d",
  "admin/editor.menu-link.links.link.externalPage": "URL (deve começar com https ou http)",
  "admin/editor.menu-link.links.link.externalPage.description": "Se externa",
  "admin/editor.menu-link.links.link.typeOfRoute": "Tipo da Rota",
  "admin/editor.menu-link.links.link.typeOfRoute.internal": "Interna",
  "admin/editor.menu-link.links.link.typeOfRoute.external": "Externa",
  "admin/editor.menu-link.links.link.position": "Posição",
  "admin/editor.menu-link.links.link.position.left": "Esquerda",
  "admin/editor.menu-link.links.link.position.middle": "Centro",
  "admin/editor.menu-link.links.link.position.right": "Direita",
  "admin/editor.future-menu.title": "Menu",
  "admin/editor.future-menu.description": "Menu de navegação",
  "admin/editor.menu.typography.title": "Tipografia",
  "admin/editor.menu.typography.description": "Permite escolher a classe de tipografia para ser usada pelos itens do menu",
  "admin/editor.menu.orientation.title": "Orientação",
  "admin/editor.menu.orientation.vertical.label": "vertical",
  "admin/editor.menu.orientation.horizontal.label": "horizontal",
  "admin/editor.menu.items.title": "Item do Menu",
  "admin/editor.menu.item.id.title": "Código",
  "admin/editor.menu.item.type.title": "Tipo",
  "admin/editor.menu.item.category.title": "Categoria",
  "admin/editor.menu.item.custom.title": "Customizado",
  "admin/editor.menu.item.iconProps.id.title": "ID do ícone",
  "admin/editor.menu.item.onMountBehavior.title": "Submenu aberto no hover",
  "admin/editor.menu.item.editorItemTitle.title": "Nome do Ítem do Menu",
  "admin/editor.menu.item.editorItemTitle.description": "Só será visível dentro do Site Editor",
  "admin/editor.menu.item.highlight.title": "Destaque",
  "admin/editor.menu.item.submenuWidth.title": "Largura do Submenu",
  "admin/editor.menu.item.params.title": "Parâmetros",
  "admin/editor.menu.item.params.categoryId.title": "ID da Categoria",
  "admin/editor.menu.item.params.text.title": "Texto",
  "admin/editor.menu.item.params.type.title": "Tipo de link",
  "admin/editor.menu.item.params.internal.title": "Interno",
  "admin/editor.menu.item.params.external.title": "Externo",
  "admin/editor.menu.item.params.href.title": "href",
  "admin/editor.menu.item.params.noFollow.title": "Atributo nofollow",
  "admin/editor.menu.item.params.tagTitle.title": "Atributo title",
  "admin/editor.menu.submenu.title": "Submenu",
  "admin/editor.menu.additionalDef.title": "Definições adicionais",
  "admin/editor.menu.def.none": "Nenhuma",
  "admin/editor.menu.def.title": "Título",
  "admin/editor.menu.def.category": "Categoria",
  "admin/editor.menu.categoryId.title": "Id da Categoria"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of menu/messages/en.json from the menu VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.menu-link": "Menu",
  "admin/editor.menu-link.title": "Title",
  "admin/editor.menu-link.description": "A menu bar of links",
  "admin/editor.menu-link.links": "Links",
  "admin/editor.menu-link.links.link": "Link",
  "admin/editor.menu-link.links.link.text": "Link Text",
  "admin/editor.menu-link.links.link.internalPage": "Target Page",
  "admin/editor.menu-link.links.link.internalPage.description": "If internal",
  "admin/editor.menu-link.links.link.params": "Params",
  "admin/editor.menu-link.links.link.params.description": "Comma separated params, e.g.: key=value,a=b,c=d",
  "admin/editor.menu-link.links.link.externalPage": "URL (should start with https or http)",
  "admin/editor.menu-link.links.link.externalPage.description": "If external",
  "admin/editor.menu-link.links.link.typeOfRoute": "Type of Route",
  "admin/editor.menu-link.links.link.typeOfRoute.internal": "Internal",
  "admin/editor.menu-link.links.link.typeOfRoute.external": "External",
  "admin/editor.menu-link.links.link.position": "Position",
  "admin/editor.menu-link.links.link.position.left": "Left",
  "admin/editor.menu-link.links.link.position.middle": "Middle",
  "admin/editor.menu-link.links.link.position.right": "Right",

  "admin/editor.future-menu.title": "Menu",
  "admin/editor.future-menu.description": "The VTEX Menu app",
  "admin/editor.menu.typography.title": "Typography",
  "admin/editor.menu.typography.description": "Allows users to choose which typography class will be used in the menu items",

  "admin/editor.menu.orientation.title": "Orientation",
  "admin/editor.menu.orientation.vertical.label": "vertical",
  "admin/editor.menu.orientation.horizontal.label": "horizontal",

  "admin/editor.menu.items.title": "Menu Item",
  "admin/editor.menu.item.id.title": "ID",
  "admin/editor.menu.item.type.title": "Type",
  "admin/editor.menu.item.category.title": "Category",
  "admin/editor.menu.item.custom.title": "Custom",
  "admin/editor.menu.item.iconProps.id.title": "Icon ID",
  "admin/editor.menu.item.onMountBehavior.title": "Submenu is open on hover",
  "admin/editor.menu.item.editorItemTitle.title": "Menu Item Name",
  "admin/editor.menu.item.editorItemTitle.description": "This will only be visible on Site Editor",

  "admin/editor.menu.item.highlight.title": "Highlight",
  "admin/editor.menu.item.submenuWidth.title": "Submenu Width",
  "admin/editor.menu.item.params.title": "Params",
  "admin/editor.menu.item.params.categoryId.title": "Category ID",
  "admin/editor.menu.item.params.text.title": "Text",
  "admin/editor.menu.item.params.type.title": "Type",
  "admin/editor.menu.item.params.internal.title": "Internal",
  "admin/editor.menu.item.params.external.title": "External",
  "admin/editor.menu.item.params.href.title": "href",
  "admin/editor.menu.item.params.noFollow.title": "nofollow attribute",
  "admin/editor.menu.item.params.tagTitle.title": "title attribute",
  "admin/editor.menu.submenu.title": "Submenu",

  "admin/editor.menu.additionalDef.title": "Additional Definition",
  "admin/editor.menu.def.none": "None",
  "admin/editor.menu.def.title": "Title",
  "admin/editor.menu.def.category": "Category",
  "admin/editor.menu.categoryId.title": "Category ID"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of menu/messages/ro-RO.json from the menu VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.menu-link": "Meniu",
  "admin/editor.menu-link.title": "Titlu",
  "admin/editor.menu-link.description": "O bară de meniu cu link-uri",
  "admin/editor.menu-link.links": "Link-uri",
  "admin/editor.menu-link.links.link": "Link",
  "admin/editor.menu-link.links.link.text": "Text link",
  "admin/editor.menu-link.links.link.internalPage": "Pagină țintă",
  "admin/editor.menu-link.links.link.internalPage.description": "Dacă intern",
  "admin/editor.menu-link.links.link.params": "Parametri",
  "admin/editor.menu-link.links.link.params.description": "Parametri separați de virgule, de exemplu: key=value,a=b,c=d",
  "admin/editor.menu-link.links.link.externalPage": "URL (trebuie să înceapă cu https sau http)",
  "admin/editor.menu-link.links.link.externalPage.description": "Dacă extern",
  "admin/editor.menu-link.links.link.typeOfRoute": "Tipul rutei",
  "admin/editor.menu-link.links.link.typeOfRoute.internal": "Intern",
  "admin/editor.menu-link.links.link.typeOfRoute.external": "Extern",
  "admin/editor.menu-link.links.link.position": "Poziție",
  "admin/editor.menu-link.links.link.position.left": "Stânga",
  "admin/editor.menu-link.links.link.position.middle": "Mijloc",
  "admin/editor.menu-link.links.link.position.right": "Dreapta",
  "admin/editor.future-menu.title": "Meniu",
  "admin/editor.future-menu.description": "Aplicația VTEX Menu",
  "admin/editor.menu.typography.title": "Tipografie",
  "admin/editor.menu.typography.description": "Permite utilizatorilor să aleagă ce clasă de tipografie va fi folosite în articolele meniului",
  "admin/editor.menu.orientation.title": "Orientare",
  "admin/editor.menu.orientation.vertical.label": "vertical",
  "admin/editor.menu.orientation.horizontal.label": "orizontal",
  "admin/editor.menu.items.title": "Articol meniu",
  "admin/editor.menu.item.id.title": "ID",
  "admin/editor.menu.item.type.title": "Tip",
  "admin/editor.menu.item.category.title": "Categorie",
  "admin/editor.menu.item.custom.title": "Personalizat",
  "admin/editor.menu.item.iconProps.id.title": "ID iconiță",
  "admin/editor.menu.item.onMountBehavior.title": "Submeniul se deschide la trecerea cu mouse-ul",
  "admin/editor.menu.item.editorItemTitle.title": "Denumire articol meniu",
  "admin/editor.menu.item.editorItemTitle.description": "Acest lucru va fi vizibil doar în Site Editor",
  "admin/editor.menu.item.iconProps": "Props Iconiță",
  "admin/editor.menu.item.highlight.title": "Evidențiere",
  "admin/editor.menu.item.submenuWidth.title": "Lățime sub-meniu",
  "admin/editor.menu.item.params.title": "Parametri",
  "admin/editor.menu.item.params.categoryId.title": "ID Categorie",
  "admin/editor.menu.item.params.text.title": "Text",
  "admin/editor.menu.item.params.type.title": "Tip",
  "admin/editor.menu.item.params.internal.title": "Intern",
  "admin/editor.menu.item.params.external.title": "Extern",
  "admin/editor.menu.item.params.href.title": "href",
  "admin/editor.menu.item.params.noFollow.title": "atribut nofollow",
  "admin/editor.menu.item.params.tagTitle.title": "atribut titlu",
  "admin/editor.menu.submenu.title": "Sub-meniu",
  "admin/editor.menu.additionalDef.title": "Definiție suplimentară",
  "admin/editor.menu.def.none": "Niciunul",
  "admin/editor.menu.def.title": "Titlu",
  "admin/editor.menu.def.category": "Categorie",
  "admin/editor.menu.categoryId.title": "ID Categorie"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of menu/messages/context.json from the menu VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.menu-link": "admin/editor.menu-link",
  "admin/editor.menu-link.title": "admin/editor.menu-link.title",
  "admin/editor.menu-link.description": "admin/editor.menu-link.description",
  "admin/editor.menu-link.links": "admin/editor.menu-link.links",
  "admin/editor.menu-link.links.link": "admin/editor.menu-link.links.link",
  "admin/editor.menu-link.links.link.text": "admin/editor.menu-link.links.link.text",
  "admin/editor.menu-link.links.link.internalPage": "admin/editor.menu-link.links.link.internalPage",
  "admin/editor.menu-link.links.link.internalPage.description": "admin/editor.menu-link.links.link.internalPage.description",
  "admin/editor.menu-link.links.link.params": "admin/editor.menu-link.links.link.params",
  "admin/editor.menu-link.links.link.params.description": "admin/editor.menu-link.links.link.params.description",
  "admin/editor.menu-link.links.link.externalPage": "admin/editor.menu-link.links.link.externalPage",
  "admin/editor.menu-link.links.link.externalPage.description": "admin/editor.menu-link.links.link.externalPage.description",
  "admin/editor.menu-link.links.link.typeOfRoute": "admin/editor.menu-link.links.link.typeOfRoute",
  "admin/editor.menu-link.links.link.typeOfRoute.internal": "admin/editor.menu-link.links.link.typeOfRoute.internal",
  "admin/editor.menu-link.links.link.typeOfRoute.external": "admin/editor.menu-link.links.link.typeOfRoute.external",
  "admin/editor.menu-link.links.link.position": "admin/editor.menu-link.links.link.position",
  "admin/editor.menu-link.links.link.position.left": "admin/editor.menu-link.links.link.position.left",
  "admin/editor.menu-link.links.link.position.middle": "admin/editor.menu-link.links.link.position.middle",
  "admin/editor.menu-link.links.link.position.right": "admin/editor.menu-link.links.link.position.right",
  "admin/editor.future-menu.title": "Title of the menu editor used in storefront",
  "admin/editor.future-menu.description": "Description of the menu",
  "admin/editor.menu.typography.title": "Title of the editor 'typography' item.",
  "admin/editor.menu.typography.description": "Allows users to choose which typography class will be used in the menu items",
  "admin/editor.menu.orientation.title": "Title for the orientation option",
  "admin/editor.menu.orientation.vertical.label": "Label for vertical orientation",
  "admin/editor.menu.orientation.horizontal.label": "Label for horizontal orientation",
  "admin/editor.menu.items.title": "menu items title",
  "admin/editor.menu.item.id.title": "item id title",
  "admin/editor.menu.item.type.title": "item type title",
  "admin/editor.menu.item.category.title": "'category' item type title",
  "admin/editor.menu.item.custom.title": "'custom' item type title",
  "admin/editor.menu.item.editorItemTitle.title": "editorItemTitle title",
  "admin/editor.menu.item.editorItemTitle.description": "editorItemTitle description",
  "admin/editor.menu.item.onMountBehavior.title": "onMountBehavior title",
  "admin/editor.menu.item.iconProps": "iconProps title",
  "admin/editor.menu.item.iconProps.id.title": "icon ID title",
  "admin/editor.menu.item.highlight.title": "highlight title",
  "admin/editor.menu.item.submenuWidth.title": "subMenuWidth title",
  "admin/editor.menu.item.params.title": "params Title",
  "admin/editor.menu.item.params.categoryId.title": "Category id title",
  "admin/editor.menu.item.params.text.title": "params text title",
  "admin/editor.menu.item.params.type.title": "params type title",
  "admin/editor.menu.item.params.internal.title": "params link internal type",
  "admin/editor.menu.item.params.external.title": "params link external type",
  "admin/editor.menu.item.params.href.title": "params href title",
  "admin/editor.menu.item.params.noFollow.title": "params noFollow title",
  "admin/editor.menu.item.params.tagTitle.title": "params tagTitle title",
  "admin/editor.menu.submenu.title": "Submenu's title",
  "admin/editor.menu.additionalDef.title": "Additional Definition title",
  "admin/editor.menu.def.none": "None value used in radio button",
  "admin/editor.menu.def.title": "Title value used in radio button",
  "admin/editor.menu.def.category": "Category value used in radio button",
  "admin/editor.menu.categoryId.title": "Category ID title"
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of menu/messages/de-DE.json from the menu VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.menu-link": "Menü",
  "admin/editor.menu-link.title": "Titel",
  "admin/editor.menu-link.description": "Eine Menüleiste von Links",
  "admin/editor.menu-link.links": "Links",
  "admin/editor.menu-link.links.link": "Link",
  "admin/editor.menu-link.links.link.text": "Link-Text",
  "admin/editor.menu-link.links.link.internalPage": "Zielseite",
  "admin/editor.menu-link.links.link.internalPage.description": "Wenn intern",
  "admin/editor.menu-link.links.link.params": "Parameter",
  "admin/editor.menu-link.links.link.params.description": "Durch Komma getrennte Parameter, z. B.: key=value,a=b,c=d",
  "admin/editor.menu-link.links.link.externalPage": "URL (sollte mit https oder http) beginnen",
  "admin/editor.menu-link.links.link.externalPage.description": "Wenn extern",
  "admin/editor.menu-link.links.link.typeOfRoute": "Art der Route",
  "admin/editor.menu-link.links.link.typeOfRoute.internal": "Intern",
  "admin/editor.menu-link.links.link.typeOfRoute.external": "Extern",
  "admin/editor.menu-link.links.link.position": "Position",
  "admin/editor.menu-link.links.link.position.left": "Links",
  "admin/editor.menu-link.links.link.position.middle": "Mitte",
  "admin/editor.menu-link.links.link.position.right": "Rechts",
  "admin/editor.future-menu.title": "Menü",
  "admin/editor.future-menu.description": "Die VTEX-Menü-App",
  "admin/editor.menu.typography.title": "Typografie",
  "admin/editor.menu.typography.description": "Erlaubt Benutzern auszuwählen, welche Typografieklasse in den Menüeinträgen verwendet werden soll",
  "admin/editor.menu.orientation.title": "Ausrichtung",
  "admin/editor.menu.orientation.vertical.label": "vertikal",
  "admin/editor.menu.orientation.horizontal.label": "horizontal",
  "admin/editor.menu.items.title": "Menüpunkt",
  "admin/editor.menu.item.id.title": "ID",
  "admin/editor.menu.item.type.title": "Typ",
  "admin/editor.menu.item.category.title": "Kategorie",
  "admin/editor.menu.item.custom.title": "Benutzerdefiniert",
  "admin/editor.menu.item.iconProps.id.title": "Symbol-ID",
  "admin/editor.menu.item.onMountBehavior.title": "Untermenü ist bei Mausverschiebung geöffnet",
  "admin/editor.menu.item.editorItemTitle.title": "Name des Menüpunkts",
  "admin/editor.menu.item.editorItemTitle.description": "Dies wird nur im Site-Editor sichtbar sein",
  "admin/editor.menu.item.highlight.title": "Hervorhebung",
  "admin/editor.menu.item.submenuWidth.title": "Untermenü-Breite",
  "admin/editor.menu.item.params.title": "Parameter",
  "admin/editor.menu.item.params.categoryId.title": "Kategorie-ID",
  "admin/editor.menu.item.params.text.title": "Text",
  "admin/editor.menu.item.params.type.title": "Typ",
  "admin/editor.menu.item.params.internal.title": "Intern",
  "admin/editor.menu.item.params.external.title": "Extern",
  "admin/editor.menu.item.params.href.title": "href",
  "admin/editor.menu.item.params.noFollow.title": "nofollow Attribut",
  "admin/editor.menu.item.params.tagTitle.title": "title Attribut",
  "admin/editor.menu.submenu.title": "Untermenü",
  "admin/editor.menu.additionalDef.title": "Zusätzliche Definition",
  "admin/editor.menu.def.none": "Keine",
  "admin/editor.menu.def.title": "Titel",
  "admin/editor.menu.def.category": "Kategorie",
  "admin/editor.menu.categoryId.title": "Kategorie-ID"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of menu/messages/fr-FR.json from the menu VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.menu-link": "Menu",
  "admin/editor.menu-link.title": "Titre",
  "admin/editor.menu-link.description": "Une barre de menu des liens",
  "admin/editor.menu-link.links": "Liens",
  "admin/editor.menu-link.links.link": "Lien",
  "admin/editor.menu-link.links.link.text": "Texte du lien",
  "admin/editor.menu-link.links.link.internalPage": "Page cible",
  "admin/editor.menu-link.links.link.internalPage.description": "Si interne",
  "admin/editor.menu-link.links.link.params": "Paramètres",
  "admin/editor.menu-link.links.link.params.description": "Les paramètres sont séparés par des virgules, par exemple : clé=valeur,a=b,c=d",
  "admin/editor.menu-link.links.link.externalPage": "L’URL (doit commencer par https ou http)",
  "admin/editor.menu-link.links.link.externalPage.description": "Si externe",
  "admin/editor.menu-link.links.link.typeOfRoute": "Type d’itinéraire",
  "admin/editor.menu-link.links.link.typeOfRoute.internal": "Interne",
  "admin/editor.menu-link.links.link.typeOfRoute.external": "Externe",
  "admin/editor.menu-link.links.link.position": "Position",
  "admin/editor.menu-link.links.link.position.left": "Gauche",
  "admin/editor.menu-link.links.link.position.middle": "Milieu",
  "admin/editor.menu-link.links.link.position.right": "Droite",
  "admin/editor.future-menu.title": "Menu",
  "admin/editor.future-menu.description": "L’application VTEX Menu",
  "admin/editor.menu.typography.title": "Typographie",
  "admin/editor.menu.typography.description": "Permet aux utilisateurs de choisir la typographie qui sera utilisée dans les éléments du menu",
  "admin/editor.menu.orientation.title": "Orientation",
  "admin/editor.menu.orientation.vertical.label": "verticale",
  "admin/editor.menu.orientation.horizontal.label": "horizontale",
  "admin/editor.menu.items.title": "Élément de menu",
  "admin/editor.menu.item.id.title": "Identité",
  "admin/editor.menu.item.type.title": "Type",
  "admin/editor.menu.item.category.title": "Categorie",
  "admin/editor.menu.item.custom.title": "Personnaliser",
  "admin/editor.menu.item.iconProps.id.title": "ID de l’icône",
  "admin/editor.menu.item.onMountBehavior.title": "Le sous-menu est ouvert sur pointage",
  "admin/editor.menu.item.editorItemTitle.title": "Nom de l’item du menu",
  "admin/editor.menu.item.editorItemTitle.description": "Ceci ne sera visible que dans l’éditeur du site (Site Editor)",
  "admin/editor.menu.item.iconProps": "Propriétés d’icônes",
  "admin/editor.menu.item.iconProps.id.title": "ID de l’icône",
  "admin/editor.menu.item.highlight.title": "Point fort",
  "admin/editor.menu.item.submenuWidth.title": "Largeur du sous-menu",
  "admin/editor.menu.item.params.title": "Paramètres",
  "admin/editor.menu.item.params.categoryId.title": "ID de la catégorie",
  "admin/editor.menu.item.params.text.title": "Texte",
  "admin/editor.menu.item.params.type.title": "Type",
  "admin/editor.menu.item.params.internal.title": "Interne",
  "admin/editor.menu.item.params.external.title": "Externe",
  "admin/editor.menu.item.params.href.title": "href",
  "admin/editor.menu.item.params.noFollow.title": "attribut nofollow",
  "admin/editor.menu.item.params.tagTitle.title": "attribut title",
  "admin/editor.menu.submenu.title": "Sous-menu",
  "admin/editor.menu.additionalDef.title": "Définition supplémentaire",
  "admin/editor.menu.def.none": "Aucun",
  "admin/editor.menu.def.title": "Titre",
  "admin/editor.menu.def.category": "Catégorie",
  "admin/editor.menu.categoryId.title": "ID de la catégorie"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of menu/messages/nl-NL.json from the menu VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.menu-link": "Menu",
  "admin/editor.menu-link.title": "Titel",
  "admin/editor.menu-link.description": "Een menubalk met links",
  "admin/editor.menu-link.links": "Links",
  "admin/editor.menu-link.links.link": "Link",
  "admin/editor.menu-link.links.link.text": "Linktekst",
  "admin/editor.menu-link.links.link.internalPage": "Doelpagina",
  "admin/editor.menu-link.links.link.internalPage.description": "Indien intern",
  "admin/editor.menu-link.links.link.params": "Params",
  "admin/editor.menu-link.links.link.params.description": "Door komma's gescheiden parameters, bijvoorbeeld: sleutel=waarde, a=b, c=d",
  "admin/editor.menu-link.links.link.externalPage": "URL (moet beginnen met https of http)",
  "admin/editor.menu-link.links.link.externalPage.description": "Indien intern",
  "admin/editor.menu-link.links.link.typeOfRoute": "Type route",
  "admin/editor.menu-link.links.link.typeOfRoute.internal": "Intern",
  "admin/editor.menu-link.links.link.typeOfRoute.external": "Externe",
  "admin/editor.menu-link.links.link.position": "Positie",
  "admin/editor.menu-link.links.link.position.left": "Links",
  "admin/editor.menu-link.links.link.position.middle": "Midden",
  "admin/editor.menu-link.links.link.position.right": "Rechts",
  "admin/editor.future-menu.title": "Menu",
  "admin/editor.future-menu.description": "De VTEX Menu-app",
  "admin/editor.menu.typography.title": "Typografie",
  "admin/editor.menu.typography.description": "Stelt gebruikers in staat om te kiezen welke typografieklasse zal worden gebruikt in de menu-items",
  "admin/editor.menu.orientation.title": "Orientatie",
  "admin/editor.menu.orientation.vertical.label": "verticaal",
  "admin/editor.menu.orientation.horizontal.label": "horizontaal",
  "admin/editor.menu.items.title": "Menu-item",
  "admin/editor.menu.item.id.title": "ID",
  "admin/editor.menu.item.type.title": "Type",
  "admin/editor.menu.item.category.title": "Category",
  "admin/editor.menu.item.custom.title": "Aangepast",
  "admin/editor.menu.item.iconProps.id.title": "Icoon-id",
  "admin/editor.menu.item.onMountBehavior.title": "Submenu wordt geopend bij beweging van de cursor over het scherm",
  "admin/editor.menu.item.editorItemTitle.title": "Naam menu-item",
  "admin/editor.menu.item.editorItemTitle.description": "Dit zal alleen zichtbaar zijn op Site Editor",
  "admin/editor.menu.item.iconProps": "Pictogram props",
  "admin/editor.menu.item.iconProps.id.title": "Icoon-id",
  "admin/editor.menu.item.highlight.title": "Highlight",
  "admin/editor.menu.item.submenuWidth.title": "Breedte submenu",
  "admin/editor.menu.item.params.title": "Params",
  "admin/editor.menu.item.params.categoryId.title": "Categorie-id",
  "admin/editor.menu.item.params.text.title": "Tekst",
  "admin/editor.menu.item.params.type.title": "Type",
  "admin/editor.menu.item.params.internal.title": "Intern",
  "admin/editor.menu.item.params.external.title": "Externe",
  "admin/editor.menu.item.params.href.title": "href",
  "admin/editor.menu.item.params.noFollow.title": "nofollow-attribuut",
  "admin/editor.menu.item.params.tagTitle.title": "titel attribuut",
  "admin/editor.menu.submenu.title": "Submenu",
  "admin/editor.menu.additionalDef.title": "Aanvullende definitie",
  "admin/editor.menu.def.none": "Geen",
  "admin/editor.menu.def.title": "Titel",
  "admin/editor.menu.def.category": "Categorie",
  "admin/editor.menu.categoryId.title": "Categorie-id"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of menu/messages/es.json from the menu VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.menu-link": "Menú",
  "admin/editor.menu-link.title": "Título",
  "admin/editor.menu-link.description": "Una barra de menú de enlaces",
  "admin/editor.menu-link.links": "Enlaces",
  "admin/editor.menu-link.links.link": "Enlace",
  "admin/editor.menu-link.links.link.text": "Texto del enlace",
  "admin/editor.menu-link.links.link.internalPage": "Página de destino",
  "admin/editor.menu-link.links.link.internalPage.description": "Si es interno",
  "admin/editor.menu-link.links.link.params": "Parámetros",
  "admin/editor.menu-link.links.link.params.description": "Parámetros separados por coma, por ejemplo: key=value,a=b,c=d",
  "admin/editor.menu-link.links.link.externalPage": "URL (debe empezar con https o http)",
  "admin/editor.menu-link.links.link.externalPage.description": "Si es externo",
  "admin/editor.menu-link.links.link.typeOfRoute": "Tipo de ruta",
  "admin/editor.menu-link.links.link.typeOfRoute.internal": "Interna",
  "admin/editor.menu-link.links.link.typeOfRoute.external": "Externa",
  "admin/editor.menu-link.links.link.position": "Posición",
  "admin/editor.menu-link.links.link.position.left": "Izquierda",
  "admin/editor.menu-link.links.link.position.middle": "Centro",
  "admin/editor.menu-link.links.link.position.right": "Derecha",
  "admin/editor.future-menu.title": "Menú",
  "admin/editor.future-menu.description": "Aplicación VTEX Menu",
  "admin/editor.menu.typography.title": "Tipografía",
  "admin/editor.menu.typography.description": "Permite a los usuarios seleccionar la clase de tipografía que se utilizará en los ítems del menú",
  "admin/editor.menu.orientation.title": "Orientación",
  "admin/editor.menu.orientation.vertical.label": "vertical",
  "admin/editor.menu.orientation.horizontal.label": "horizontal",
  "admin/editor.menu.items.title": "Ítem del menú",
  "admin/editor.menu.item.id.title": "ID",
  "admin/editor.menu.item.type.title": "Tipo",
  "admin/editor.menu.item.category.title": "Categoría",
  "admin/editor.menu.item.custom.title": "Personalizado",
  "admin/editor.menu.item.iconProps.id.title": "ID del ícono",
  "admin/editor.menu.item.onMountBehavior.title": "El submenú se abre al pasar el mouse",
  "admin/editor.menu.item.editorItemTitle.title": "Nombre del ítem del menú",
  "admin/editor.menu.item.editorItemTitle.description": "Esto solo se verá en Site Editor",
  "admin/editor.menu.item.highlight.title": "En destaque",
  "admin/editor.menu.item.submenuWidth.title": "Anchura del submenú",
  "admin/editor.menu.item.params.title": "Parámetros",
  "admin/editor.menu.item.params.categoryId.title": "ID de la categoría",
  "admin/editor.menu.item.params.text.title": "Texto",
  "admin/editor.menu.item.params.type.title": "Tipo",
  "admin/editor.menu.item.params.internal.title": "Interno",
  "admin/editor.menu.item.params.external.title": "Externo",
  "admin/editor.menu.item.params.href.title": "href",
  "admin/editor.menu.item.params.noFollow.title": "Atributo nofollow",
  "admin/editor.menu.item.params.tagTitle.title": "Atributo title",
  "admin/editor.menu.submenu.title": "Submenú",
  "admin/editor.menu.additionalDef.title": "Definición adicional",
  "admin/editor.menu.def.none": "Ninguna",
  "admin/editor.menu.def.title": "Título",
  "admin/editor.menu.def.category": "Categoría",
  "admin/editor.menu.categoryId.title": "ID de la categoría"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of menu/docs/README.md from the menu VTEX app.

[Assistant]
Here's the implementation:

```markdown
📢 Don't fork this project. Use, contribute, or open issues through [Store Discussion](https://github.com/vtex-apps/store-discussion).

# Menu

<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->

[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors)

<!-- ALL-CONTRIBUTORS-BADGE:END -->

The Menu component displays a navigation bar with links and dropdown submenus. It can be configured to display internal or external links and supports both category-based and custom menu items.

![menu-app](https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-menu-0.png)

## Configuration

1. Add the app to the store theme dependencies in the `manifest.json` file.

```json
  "dependencies": {
    "vtex.menu": "2.x"
  }
```

2. Add the `vtex.menu@2.x:menu` block to the [store header](https://github.com/vtex-apps/store-header/blob/master/store/interfaces.json) template.

3. Configure the `menu-item` blocks to build the store menu options. These can be declared in two ways in `vtex.menu@2.x:menu`: as children or as props. The advantage of the second type of `menu-item` configuration is that Site Editor can be used to edit the blocks.

### `menu-item` as children

_Example:_

```json
"vtex.menu@2.x:menu#websites": {
  "children": [
    "menu-item#shop",
    "menu-item#about-us"
  ]
},
"menu-item#shop": {
  "props": {
    "id": "menu-item-shop",
    "type": "custom",
    "highlight": false,
    "itemProps": {
      "type": "internal",
      "href": "#",
      "noFollow": false,
      "tagTitle": "Shop",
      "text": "Shop"
    },
    "iconProps": {
      "id": "bnd-logo",
      "size": 16,
      "viewBox": "0 0 16 16",
      "activeClassName": "rebel-pink",
      "mutedClassName": "c-action-primary"
    },
    "iconToTheRight": true
  }
}
```

### `menu-item` as props

_Example:_

```json
"vtex.menu@2.x:menu#websites": {
  "props": {
    "items": [
      {
        "id": "menu-item-shop",
        "type": "custom",
        "highlight": false,
        "itemProps": {
          "type": "internal",
          "href": "#",
          "noFollow": false,
          "tagTitle": "Shop",
          "text": "Shop"
        }
      },
      {
        "id": "menu-item-about-us",
        "type": "custom",
        "highlight": false,
        "itemProps": {
          "type": "internal",
          "href": "/about-us",
          "noFollow": false,
          "tagTitle": "about-us",
          "text": "About Us"
        }
      }
    ]
  }
}
```

### Adding a submenu

You can define a submenu by adding the `submenu` block to a `menu-item`:

```jsonc
"menu-item#shop": {
  "props": {
    "type": "custom",
    "highlight": false,
    "itemProps": {
      "type": "internal",
      "href": "#",
      "noFollow": false,
      "tagTitle": "Shop",
      "text": "Shop"
    },
  },
  "blocks": ["vtex.menu@2.x:submenu#shop"] // Defining a submenu
},
"vtex.menu@2.x:submenu#shop": {
  "children": [
    "vtex.menu@2.x:menu#submenushop"
  ]
},
"vtex.menu@2.x:menu#submenushop": {
  "children": [
    "menu-item#shop"
  ]
}
```

>ℹ The Menu block doesn't require any specific child blocks to work

## `menu-item` props

The available `menu-item` block props are:

| Prop name         | Type                           | Description                                                                                | Default value |
| ----------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| `type`            | `string`                       | Menu item type, either `category` or `custom`                                                                                | `category`    |
| `id`              | `string`                       | Menu item ID                                                                                | `undefined`   |
| `highlight`       | `boolean`                      | Indicates whether the item has a highlight                                                                                | `undefined`   |
| `iconPosition`    | `string`                       | Icon position relative to the menu item text, either to the `left` or `right`                                                                                | `left`        |
| `iconProps`       | `IconProps`                    | Icon props                                                                                | `undefined`   |
| `onMountBehavior` | `enum`                         | Indicates whether the submenu should always be automatically displayed when its parent is hovered/clicked on (`open`) or (`close`)                                                                                | `closed`      |
| `itemProps`       | `CategoryItem` or `CustomItem` | Item props                                                                                | `undefined`   |
| `blockClass`         | `CustomCSSClasses`             | Used to override default CSS handles. To learn how this prop works, check this description of [useCustomClasses](https://github.com/vtex-apps/css-handles#usecustomclasses). Please note that this is only useful when importing this block as a React component. | `undefined`   |

### Icon props

| Prop name         | Type      | Description                             | Default value |
| ----------------- | --------- | --------------------------------------- | ------------- |
| `id`              | `string`  | Icon ID                                 | N/A           |
| `isActive`        | `boolean` | Indicates if the item is active       | `true`        |
| `size`            | `number`  | Icon size                               | 16            |
| `viewBox`         | `string`  | Icon view box                           | `0 0 16 16`   |
| `activeClassName` | `string`  | Icon classname when `isActive` is true  | N/A           |
| `mutedClassName`  | `string`  | Icon classname when `isActive` is false | N/A           |

### Category-specific props

| Prop name    | Type     | Description      | Default value |
| ------------ | -------- | ---------------- | ------------- |
| `categoryId` | `number` | Item category ID | N/A           |
| `text`       | `string` | Menu item text   | N/A           |

### Custom item props

| Prop name  | Type      | Description                                     | Default value |
| ---------- | --------- | ----------------------------------------------- | ------------- |
| `type`     | `string`  | Menu item type, either `internal` or `external` | `internal`    |
| `href`     | `string`  | Link to the menu item destination               | N/A           |
| `noFollow` | `boolean` | No follow attribute                             | N/A           |
| `tagTitle` | `string`  | Menu item tag                                   | N/A           |
| `text`     | `string`  | Menu item text                                  | N/A           |

## Customization

To apply CSS customizations to this and other blocks, please follow the instructions in [Using CSS Handles for store customization](https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization).

| CSS Handle                 |
| -------------------------- |
| `accordionIcon--isClosed`  |
| `accordionIcon--isOpen`    |
| `accordionIcon`            |
| `container`                |
| `linkLeft`                 |
| `linkMiddle`               |
| `linkRight`                |
| `menuContainerNav`         |
| `menuContainer`            |
| `menuItemInnerDiv`         |
| `menuItem`                 |
| `menuItem--isOpen`         |
| `menuItem--isClosed`       |
| `menuLinkDivLeft`          |
| `menuLinkDivMiddle`        |
| `menuLinkDivRight`         |
| `menuLinkNav`              |
| `renderLink`               |
| `styledLinkContainer`      |
| `styledLinkContent`        |
| `styledLinkIcon`           |
| `styledLink`               |
| `submenuAccordion`         |
| `submenuColumn`            |
| `submenuContainer`         |
| `submenuWrapper--isClosed` |
| `submenuWrapper--isOpen`   |
| `submenuWrapper`           |
| `submenu`                  |

## Contributors

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore -->
<table><tr><td align="center"><a href="http://giovanapereira.com.br/"><img src="https://avatars3.githubusercontent.com/u/26018620?v=4" width="100px;" alt="Giovana Pereira"/><br /><sub><b>Giovana Pereira</b></sub></a><br /><a href="https://github.com/vtex-apps/menu/commits?author=giovanapereira" title="Code">💻</a></td></tr></table>

<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind are welcome!

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of menu/react/index.tsx from the menu VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { ReactNode } from 'react'
import { useCssHandles, CssHandlesTypes } from 'vtex.css-handles'
import { Link } from 'vtex.render-runtime'
import { Container } from 'vtex.store-components'

import Options from './constants/Options'

// This is required because is used in static schema attribute of Menu Component
const GLOBAL_PAGES =
  (global as any).__RUNTIME__ && Object.keys((global as any).__RUNTIME__.pages)

const MAX_ITEMS = 10

const CSS_HANDLES = [
  'container',
  'linkLeft',
  'linkMiddle',
  'linkRight',
  'menuLinkNav',
  'menuLinkDivLeft',
  'menuLinkDivMiddle',
  'menuLinkDivRight',
  'renderLink',
] as const

interface Link {
  text?: string | null
  internalPage?: string
  params?: string | null
  externalPage?: string | null
  typeOfRoute?: string | null
  page?: string | null
  position?: string | null
}

interface Options {
  LEFT: string
  MIDDLE: string
  RIGHT: string
  INTERNAL: string
  EXTERNAL: string
}

interface Props {
  links?: Link[]
  classes?: CssHandlesTypes.CustomClasses<typeof CSS_HANDLES>
}

/**
 * Convert the string params to a js object
 */
const getParams = (params?: string | null): { [key: string]: string } => {
  const json: { [key: string]: string } = {}

  if (params) {
    const array: string[] = params.split(',')
    array.forEach((item: string) => {
      const pair: string[] = item.split('=')
      json[pair[0]] = pair[1]
    })
  }

  return json
}

const getValidPage = (page?: string | null): string => {
  if (!page || (!page.startsWith('http://') && !page.startsWith('https://'))) {
    page = `http://${page}`
  }

  return page
}

/**
 * Links MenuLink Component.
 * Shows a menu bar with links.
 */
const MenuLink: StorefrontFunctionComponent<Props> = ({
  links = [],
  classes,
}) => {
  const { handles } = useCssHandles(CSS_HANDLES, { classes })

  const renderLink = (link: Link, index: number): ReactNode => {
    let className = `${handles.renderLink} t-small link c-muted-2 dib dim mr3 mr4-ns`

    // eslint-disable-next-line default-case
    switch (link.position) {
      case Options.LEFT:
        className = `${handles.linkLeft} ${className}`
        break
      case Options.MIDDLE:
        className = `${handles.linkMiddle} ${className}`
        break
      case Options.RIGHT:
        className = `${handles.linkRight} ${className}`
        break
    }

    return link.typeOfRoute === Options.INTERNAL ? (
      <Link
        className={className}
        key={`${link.text}-${link.position}-${index}`}
        page={link.internalPage}
        params={getParams(link.params)}
      >
        {link.text}
      </Link>
    ) : (
      <a
        className={className}
        key={`${link.text}-${link.position}-${index}`}
        href={getValidPage(link.externalPage)}
        // eslint-disable-next-line react/jsx-no-target-blank
        target="_blank"
      >
        {link.text}
      </a>
    )
  }

  if (!links.length) {
    return null
  }

  return (
    <div className={`${handles.container} bg-base h2 c-muted-2 w-100 dn db-ns`}>
      <Container>
        <nav className={`${handles.menuLinkNav} flex justify-between`}>
          <div
            className={`${handles.menuLinkDivLeft} flex-grow pa3 flex items-center`}
          >
            {links
              .filter(link => link.position === Options.LEFT)
              .map((link, index) => {
                return renderLink(link, index)
              })}
          </div>
          <div
            className={`${handles.menuLinkDivMiddle} flex-grow pa3 flex items-center`}
          >
            {links
              .filter(link => link.position === Options.MIDDLE)
              .map((link, index) => {
                return renderLink(link, index)
              })}
          </div>
          <div
            className={`${handles.menuLinkDivRight} flex-grow pa3 flex items-center`}
          >
            {links
              .filter(link => link.position === Options.RIGHT)
              .map((link, index) => {
                return renderLink(link, index)
              })}
          </div>
        </nav>
      </Container>
    </div>
  )
}

MenuLink.schema = {
  title: 'admin/editor.menu-link',
  description: 'admin/editor.menu-link.description',
  type: 'object',
  properties: {
    links: {
      title: 'admin/editor.menu-link.links',
      type: 'array',
      minItems: 0,
      maxItems: MAX_ITEMS,
      items: {
        title: 'admin/editor.menu-link.links.link',
        type: 'object',
        properties: {
          text: {
            title: 'admin/editor.menu-link.links.link.text',
            type: 'string',
          },
          internalPage: {
            title: 'admin/editor.menu-link.links.link.internalPage',
            description:
              'admin/editor.menu-link.links.link.internalPage.description',
            type: 'string',
            enum: GLOBAL_PAGES,
          },
          params: {
            title: 'admin/editor.menu-link.links.link.params',
            description: 'admin/editor.menu-link.links.link.params.description',
            type: 'string',
          },
          externalPage: {
            title: 'admin/editor.menu-link.links.link.externalPage',
            description:
              'admin/editor.menu-link.links.link.externalPage.description',
            type: 'string',
          },
          typeOfRoute: {
            title: 'admin/editor.menu-link.links.link.typeOfRoute',
            type: 'string',
            enum: [Options.INTERNAL, Options.EXTERNAL],
            enumNames: [
              'admin/editor.menu-link.links.link.typeOfRoute.internal',
              'admin/editor.menu-link.links.link.typeOfRoute.external',
            ],
            default: Options.INTERNAL,
            widget: {
              'ui:widget': 'radio',
              'ui:options': {
                inline: true,
              },
            },
          },
          position: {
            title: 'admin/editor.menu-link.links.link.position',
            type: 'string',
            enum: [Options.LEFT, Options.MIDDLE, Options.RIGHT],
            enumNames: [
              'admin/editor.menu-link.links.link.position.left',
              'admin/editor.menu-link.links.link.position.middle',
              'admin/editor.menu-link.links.link.position.right',
            ],
            default: Options.MIDDLE,
          },
        },
      },
    },
  },
}

export default MenuLink

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of menu/react/Submenu.tsx from the menu VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import classNames from 'classnames'
import { defineMessages } from 'react-intl'
import { useCssHandles, CssHandlesTypes } from 'vtex.css-handles'

const CSS_HANDLES = ['submenu', 'submenuWrapper', 'submenuContainer'] as const

export interface SubmenuProps extends SubmenuSchema {
  isOpen: boolean
  orientation: Orientation
  paddingTop: number | string
  paddingBottom: number | string
  blockClass?: string
  classes?: CssHandlesTypes.CustomClasses<typeof CSS_HANDLES>
}

const MAX_TACHYONS_SCALE = 11
export type TachyonsScaleInput = string | number | undefined

/** TODO: This function is copied from the flex-layout app.
 * It should probably be exported to a separate package.
 */
const parseTachyonsValue = (value: TachyonsScaleInput, name?: string) => {
  if (!value) {
    return 0
  }

  const parsedValue = typeof value === 'string' ? parseInt(value, 10) : value

  if (
    // eslint-disable-next-line no-restricted-globals
    isNaN(parsedValue) ||
    String(parsedValue) !== String(value) ||
    parsedValue < 0 ||
    parsedValue > MAX_TACHYONS_SCALE
  ) {
    if (name) {
      console.warn(
        `Invalid ${name} value. It should be an integer between 0 and ${MAX_TACHYONS_SCALE}.`
      )
    }
    return 0
  }

  return parsedValue
}

const Submenu: StorefrontFunctionComponent<SubmenuProps> = ({
  isOpen,
  width,
  children,
  classes,
  orientation = Orientation.horizontal,
  paddingTop = 4,
  paddingBottom = 4,
}) => {
  const { handles, withModifiers } = useCssHandles(CSS_HANDLES, { classes })

  return (
    <div
      className={`${handles.submenuContainer} ${
        width === '100%' ? '' : 'relative'
      }`}
    >
      <div
        className={classNames(
          withModifiers('submenuWrapper', isOpen ? 'isOpen' : 'isClosed'),
          `absolute left-0 bg-base pt${parseTachyonsValue(
            paddingTop,
            'paddingTop'
          )} pb${parseTachyonsValue(
            paddingBottom,
            'paddingBottom'
          )} bw1 bb b--muted-3 z-2`,
          {
            dn: !isOpen,
            flex: isOpen,
            'w-100': width === '100%',
            'w-auto ml6': width === 'auto',
          }
        )}
      >
        <section
          className={classNames(handles.submenu, 'w-100 flex justify-center', {
            'flex-column': orientation === Orientation.vertical,
          })}
        >
          {children}
        </section>
      </div>
    </div>
  )
}

enum Orientation {
  horizontal = 'horizontal',
  vertical = 'vertical',
}

interface SubmenuSchema {
  width: '100%' | 'auto'
}

const messages = defineMessages({
  submenuTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.submenu.title',
  },
  submenuWidthTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.item.submenuWidth.title',
  },
})

// tslint:disable: object-literal-sort-keys
Submenu.getSchema = () => ({
  title: messages.submenuTitle.id,
})

export default Submenu

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of menu/react/SubmenuAccordion.tsx from the menu VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { defineMessages } from 'react-intl'
import { useCssHandles, CssHandlesTypes } from 'vtex.css-handles'

import Collapsible from './components/Collapsible'

const CSS_HANDLES = ['submenuAccordion'] as const

interface Props {
  isOpen: boolean
  blockClass?: string
  classes?: CssHandlesTypes.CustomClasses<typeof CSS_HANDLES>
}

const SubmenuAccordion: StorefrontFunctionComponent<Props> = ({
  isOpen,
  classes,
  children,
}) => {
  const { handles } = useCssHandles(CSS_HANDLES, { classes })

  return (
    <Collapsible open={isOpen}>
      <section className={`${handles.submenuAccordion} w-100 flex pl4 flex`}>
        {children}
      </section>
    </Collapsible>
  )
}

const messages = defineMessages({
  submenuTitle: {
    defaultMessage: '',
    id: 'editor.menu.submenu.title',
  },
})

SubmenuAccordion.getSchema = () => ({
  title: messages.submenuTitle.id,
  type: 'object',
})

export default SubmenuAccordion

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of menu/react/MenuItem.tsx from the menu VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, {
  Reducer,
  useReducer,
  useContext,
  useState,
  useEffect,
  useCallback,
  useRef,
} from 'react'
import classNames from 'classnames'
import { defineMessages } from 'react-intl'
import { ExtensionPoint } from 'vtex.render-runtime'
import {
  useCssHandles,
  applyModifiers,
  CssHandlesTypes,
} from 'vtex.css-handles'

import { CategoryItemSchema } from './components/CategoryItem'
import { CustomItemSchema } from './components/CustomItem'
import Item from './components/Item'
import { IconProps } from './components/StyledLink'
import useSubmenuImplementation from './hooks/useSubmenuImplementation'
import MenuContext from './components/MenuContext'
import { useMouseSpeedDebouncer } from './hooks/useMouseSpeedDebouncer'
import { useUrlChange } from './hooks/useUrlChange'

const CSS_HANDLES = ['menuItem', 'menuItemInnerDiv'] as const

export interface MenuItemSchema {
  id: string
  type: 'category' | 'custom'
  iconProps: IconProps
  iconPosition: 'left' | 'right'
  highlight: boolean
  itemProps: CategoryItemSchema | CustomItemSchema
  onMountBehavior?: 'open' | 'closed'
  blockClass?: string
  experimentalOptimizeRendering?: boolean
  classes?: CssHandlesTypes.CustomClasses<typeof CSS_HANDLES>
}

type SubmenuState = {
  hasBeenActive: boolean
  isActive: boolean
  onMountBehavior?: 'open' | 'closed'
}

type SubmenuAction =
  | { type: 'SHOW_SUBMENU' }
  | { type: 'HIDE_SUBMENU' }
  | { type: 'DISABLE_ON_MOUNT_BEHAVIOR_FLAG' }

const submenuReducer: Reducer<SubmenuState, SubmenuAction> = (
  state,
  action
) => {
  switch (action.type) {
    case 'SHOW_SUBMENU':
      return {
        hasBeenActive: true,
        isActive: true,
      }
    case 'HIDE_SUBMENU':
      return {
        ...state,
        isActive: false,
      }
    case 'DISABLE_ON_MOUNT_BEHAVIOR_FLAG':
      return {
        ...state,
        onMountBehavior: 'closed',
      }
    default:
      return state
  }
}

const MenuItem: StorefrontFunctionComponent<MenuItemSchema> = ({
  children,
  onMountBehavior = 'closed',
  ...props
}) => {
  const { experimentalOptimizeRendering } = useContext(MenuContext)
  const [
    { isActive, hasBeenActive, onMountBehavior: onMountBehaviorFlag },
    dispatch,
  ] = useReducer(submenuReducer, {
    hasBeenActive: onMountBehavior === 'open',
    isActive: onMountBehavior === 'open',
    onMountBehavior,
  })
  const [isHovered, setHovered] = useState(false)
  const setActive = useCallback(
    (value: boolean) => {
      if (value !== isActive) {
        dispatch({ type: value ? 'SHOW_SUBMENU' : 'HIDE_SUBMENU' })
      }
    },
    [isActive]
  )
  const disableIsOpenOnMountFlag = useCallback(() => {
    if (onMountBehaviorFlag === 'open') {
      dispatch({ type: 'DISABLE_ON_MOUNT_BEHAVIOR_FLAG' })
    }
  }, [onMountBehaviorFlag])

  // Close any active/open menu when url changes
  useUrlChange(() => {
    if (isActive) setActive(false)
  }, [isActive, setActive])

  /* Prevents submenus from closing if the mouse is moving within a certain speed.
   * This makes it easier for the user to click on a submenu item without it closing on
   * them if they hover another menu item by accident. */
  const debouncedSetActive = useMouseSpeedDebouncer(setActive, {
    delay: 200,
    maxSpeed: 450,
  })

  /* This is a temporary check of which kind of submenu is being
   * inserted. This will be replaced by new functionality of useChildBlocks
   * in the future. */
  const submenuImplementation = useSubmenuImplementation()
  const isCollapsible = submenuImplementation === 'submenu.accordion'

  const closeTimeout = useRef<number | null>(null)
  useEffect(
    function guaranteeClosing() {
      if (isCollapsible) {
        return
      }

      if (closeTimeout.current) {
        clearTimeout(closeTimeout.current)
      }

      // if a menu is still active but is not hovered for at least 400ms, close it
      if (isActive && !isHovered && onMountBehaviorFlag !== 'open') {
        closeTimeout.current = window.setTimeout(() => {
          setActive(false)
        }, 400)
      }

      return () => {
        closeTimeout.current && clearTimeout(closeTimeout.current)
      }
    },
    [isActive, isCollapsible, isHovered, setActive, onMountBehaviorFlag]
  )

  const { handles } = useCssHandles(CSS_HANDLES, { classes: props.classes })

  const itemClasses = classNames(
    handles.menuItem,
    'list',
    applyModifiers(handles.menuItem, isActive ? 'isOpen' : 'isClosed')
  )

  if (isCollapsible) {
    return (
      <li className={itemClasses}>
        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}
        <div
          className={handles.menuItemInnerDiv}
          onClick={event => {
            setActive(!isActive)
            event.stopPropagation()
          }}
        >
          <Item {...props} accordion active={isActive} />
        </div>
        {(hasBeenActive || !experimentalOptimizeRendering) && (
          /* Collapsible menus need to still persist after being open,
           * to make the closing transition work properly */ <>
            <ExtensionPoint id="submenu" isOpen={isActive} />
            <ExtensionPoint id="unstable--submenu" isOpen={isActive} />
            {children}
          </>
        )}
      </li>
    )
  }

  return (
    <li
      className={itemClasses}
      onMouseEnter={() => {
        debouncedSetActive(true)
        setHovered(true)
        disableIsOpenOnMountFlag()
      }}
      onMouseLeave={() => {
        debouncedSetActive(false)
        setHovered(false)
      }}
    >
      <Item {...props} active={isActive} />
      {(isActive || !experimentalOptimizeRendering) && (
        <>
          <ExtensionPoint id="submenu" isOpen={isActive} />
          <ExtensionPoint id="unstable--submenu" isOpen={isActive} />
          {children}
        </>
      )}
    </li>
  )
}

const messages = defineMessages({
  categoryIdTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.item.params.categoryId.title',
  },
  categoryTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.item.category.title',
  },
  customTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.item.custom.title',
  },
  customTypeTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.item.params.type.title',
  },
  externalTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.item.params.external.title',
  },
  highlightTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.item.highlight.title',
  },
  hrefTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.item.params.href.title',
  },
  internalTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.item.params.internal.title',
  },
  onMountBehaviorTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.item.onMountBehavior.title',
  },
  itemIdTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.item.id.title',
  },
  itemsTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.items.title',
  },
  noFollowTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.item.params.noFollow.title',
  },
  paramsTextTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.item.params.text.title',
  },
  paramsTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.item.params.title',
  },
  tagTitleTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.item.params.tagTitle.title',
  },
  typeTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.item.type.title',
  },
})

MenuItem.getSchema = props => {
  const text = props?.itemProps?.text
  const id = props?.id ? props.id : ''

  // tslint:disable: object-literal-sort-keys
  return {
    title: [text, id, messages.itemsTitle.id].find(e => !!e),
    type: 'object',
    required: ['type'],
    properties: {
      id: {
        default: id,
        title: messages.itemIdTitle.id,
        type: 'string',
      },
    },
  }
}

export default MenuItem

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of menu/react/package.json from the menu VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "vtex.menu",
  "version": "2.35.3",
  "description": "A Menu Component.",
  "scripts": {
    "pretest": "yarn",
    "test": "vtex-test-tools test",
    "test:watch": "vtex-test-tools test --watch",
    "lint": "tsc --noEmit --pretty && tslint -c tslint.json './**/*.ts'"
  },
  "author": "VTEX",
  "license": "ISC",
  "dependencies": {
    "@vtex/css-handles": "^1.1.3",
    "classnames": "^2.2.6",
    "graphql": "^14.6.0",
    "react": "^16.13.0",
    "react-apollo": "^3.1.3",
    "react-dom": "^16.13.0",
    "react-intl": "^3.12.0"
  },
  "devDependencies": {
    "@apollo/react-testing": "^3.1.3",
    "@types/classnames": "^2.2.9",
    "@types/jest": "^25.1.3",
    "@types/node": "^13.7.7",
    "@types/prop-types": "^15.7.3",
    "@types/react": "^16.9.23",
    "@vtex/test-tools": "^3.0.3",
    "@vtex/tsconfig": "^0.4.4",
    "apollo-cache-inmemory": "^1.6.5",
    "apollo-client": "^2.6.8",
    "history": "^5.0.0",
    "typescript": "3.9.7",
    "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles",
    "vtex.native-types": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.native-types@0.7.4/public/@types/vtex.native-types",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.126.4/public/@types/vtex.render-runtime",
    "vtex.store-components": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-components@3.134.0/public/@types/vtex.store-components",
    "vtex.store-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-graphql@2.136.8/public/@types/vtex.store-graphql",
    "vtex.store-icons": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-icons@0.18.0/public/@types/vtex.store-icons"
  },
  "resolutions": {
    "json-schema": "^0.4.0",
    "jsdom": "^16.5.0",
    "jest-environment-jsdom": "^26.0.0",
    "node-notifier": "^8.0.1"
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of menu/react/Menu.tsx from the menu VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useContext, useMemo } from 'react'
import classNames from 'classnames'
import { defineMessages } from 'react-intl'
import { CssHandlesTypes, useCssHandles } from 'vtex.css-handles'
import { useRuntime } from 'vtex.render-runtime'

import CategoryMenu from './components/CategoryMenu'
import Item from './components/Item'
import LevelContext from './components/LevelContext'
import MenuContext from './components/MenuContext'
import MenuItem, { MenuItemSchema } from './MenuItem'

const CSS_HANDLES = ['menuContainer', 'menuContainerNav'] as const

interface MenuSchema {
  orientation?: 'vertical' | 'horizontal'
  categoryId?: number
  textType?: Typography
  title?: MenuItemSchema
  additionalDef?: string
  blockClass?: string
  items?: MenuItemSchema[]
  experimentalOptimizeRendering?: boolean
  classes?: CssHandlesTypes.CustomClasses<typeof CSS_HANDLES>
}

enum Typography {
  heading1 = 't-heading-1',
  heading2 = 't-heading-2',
  heading3 = 't-heading-3',
  heading4 = 't-heading-4',
  heading5 = 't-heading-5',
  body = 't-body',
  small = 't-small',
  mini = 't-mini',
}

const TypographyMap: Record<string, string> = {
  body: 't-body',
  heading1: 't-heading-1',
  heading2: 't-heading-2',
  heading3: 't-heading-3',
  heading4: 't-heading-4',
  heading5: 't-heading-5',
  mini: 't-mini',
  small: 't-small',
}

const Menu: StorefrontFunctionComponent<MenuSchema> = ({
  orientation = 'horizontal',
  textType,
  title,
  categoryId,
  items: itemsProps = [],
  children,
  experimentalOptimizeRendering = false,
  classes,
}) => {
  const { getSettings } = useRuntime()
  const level = useContext(LevelContext)
  const { handles } = useCssHandles(CSS_HANDLES, { classes })
  const menuContext = useMemo(
    () => ({
      experimentalOptimizeRendering:
        experimentalOptimizeRendering ||
        getSettings('vtex.store')?.enableMenuRenderingOptimization,
      hasTitle: !!(title ?? categoryId),
      orientation,
      textType: textType ? TypographyMap[textType] : TypographyMap.body,
    }),
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [orientation, textType, experimentalOptimizeRendering]
  )

  const menuItems = itemsProps
    .filter(item => item.itemProps)
    .map(({ itemProps: { text }, itemProps, ...rest }) => (
      <MenuItem key={text} itemProps={itemProps} {...rest} />
    ))

  return (
    <LevelContext.Provider value={level + 1}>
      <MenuContext.Provider value={menuContext}>
        <nav className={handles.menuContainerNav}>
          <ul
            className={classNames(handles.menuContainer, 'list flex pl0 mv0', {
              'flex-column': orientation === 'vertical',
              'flex-row': orientation === 'horizontal',
            })}
          >
            {!categoryId && title && <Item {...title} isTitle />}
            {categoryId && <CategoryMenu categoryId={categoryId} />}
            {children}
            {menuItems}
          </ul>
        </nav>
      </MenuContext.Provider>
    </LevelContext.Provider>
  )
}

const messages = defineMessages({
  categoryDef: {
    defaultMessage: '',
    id: 'admin/editor.menu.def.category',
  },
  categoryIdTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.categoryId.title',
  },
  defTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.additionalDef.title',
  },
  horizontalLabel: {
    defaultMessage: '',
    id: 'admin/editor.menu.orientation.horizontal.label',
  },
  menuTitle: {
    defaultMessage: '',
    id: 'admin/editor.future-menu.title',
  },
  noneDef: {
    defaultMessage: '',
    id: 'admin/editor.menu.def.none',
  },
  orientationTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.orientation.title',
  },
  titleDef: {
    defaultMessage: '',
    id: 'admin/editor.menu.def.title',
  },
  typographyTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.typography.title',
  },
  verticalLabel: {
    defaultMessage: '',
    id: 'admin/editor.menu.orientation.vertical.label',
  },
})

Menu.getSchema = () => {
  // tslint:disable: object-literal-sort-keys
  return {
    title: messages.menuTitle.id,
  }
}

export default Menu

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of menu/react/Column.tsx from the menu VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { PropsWithChildren } from 'react'
import { useCssHandles, CssHandlesTypes } from 'vtex.css-handles'

const CSS_HANDLES = ['submenuColumn'] as const

interface Props {
  classes?: CssHandlesTypes.CustomClasses<typeof CSS_HANDLES>
}

function Column(props: PropsWithChildren<Props>) {
  const { handles } = useCssHandles(CSS_HANDLES, { classes: props.classes })

  return <div className={handles.submenuColumn}>{props.children}</div>
}

export default Column

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of menu/store/contentSchemas.json from the menu VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "definitions": {
    "Menu": {
      "type": "object",
      "dependencies": {
        "additionalDef": {
          "oneOf": [
            {
              "properties": {
                "additionalDef": {
                  "enum": [
                    "category"
                  ]
                },
                "categoryId": {
                  "type": "integer",
                  "title": "admin/editor.menu.categoryId.title"
                }
              }
            },
            {
              "properties": {
                "additionalDef": {
                  "enum": [
                    "title"
                  ]
                },
                "title": {
                  "$ref": "app:vtex.menu#/definitions/MenuItem"
                }
              }
            },
            {
              "properties": {
                "additionalDef": {
                  "enum": [
                    "enum"
                  ]
                }
              }
            }
          ]
        }
      },
      "properties": {
        "additionalDef": {
          "title": "admin/editor.menu.additionalDef.title",
          "enum": [
            "none",
            "category",
            "title"
          ],
          "enumNames": [
            "admin/editor.menu.def.none",
            "admin/editor.menu.def.category",
            "admin/editor.menu.def.title"
          ],
          "widget": {
            "ui:widget": "radio"
          },
          "default": "none"
        },
        "textType": {
          "title": "admin/editor.menu.typography.title",
          "type": "string",
          "enum": [
            "t-heading-1",
            "t-heading-2",
            "t-heading-3",
            "t-heading-4",
            "t-heading-5",
            "t-body",
            "t-small",
            "t-mini"
          ],
          "enumNames": [
            "t-heading-1",
            "t-heading-2",
            "t-heading-3",
            "t-heading-4",
            "t-heading-5",
            "t-body",
            "t-small",
            "t-mini"
          ],
          "default": "t-body"
        },
        "orientation": {
          "title": "admin/editor.menu.orientation.title",
          "type": "string",
          "enum": [
            "vertical",
            "horizontal"
          ],
          "enumNames": [
            "admin/editor.menu.orientation.vertical.label",
            "admin/editor.menu.orientation.horizontal.label"
          ],
          "default": "horizontal"
        },
        "items": {
          "minItems": 0,
          "type": "array",
          "title": "admin/editor.menu.items.title",
          "items": {
            "$ref": "app:vtex.menu#/definitions/MenuItem"
          }
        }
      }
    },
    "MenuItem": {
      "dependencies": {
        "type": {
          "oneOf": [
            {
              "properties": {
                "type": {
                  "enum": [
                    "category"
                  ]
                },
                "itemProps": {
                  "type": "object",
                  "properties": {
                    "categoryId": {
                      "title": "admin/editor.menu.item.params.categoryId.title",
                      "type": "string"
                    }
                  }
                }
              }
            },
            {
              "properties": {
                "type": {
                  "enum": [
                    "custom"
                  ]
                },
                "itemProps": {
                  "type": "object",
                  "properties": {
                    "type": {
                      "title": "admin/editor.menu.item.params.type.title",
                      "type": "string",
                      "enum": [
                        "internal",
                        "external"
                      ],
                      "enumNames": [
                        "admin/editor.menu.item.params.internal.title",
                        "admin/editor.menu.item.params.external.title"
                      ]
                    },
                    "text": {
                      "title": "admin/editor.menu.item.params.text.title",
                      "$ref": "app:vtex.native-types#/definitions/text"
                    },
                    "href": {
                      "title": "admin/editor.menu.item.params.href.title",
                      "type": "string"
                    },
                    "noFollow": {
                      "title": "admin/editor.menu.item.params.noFollow.title",
                      "type": "boolean"
                    },
                    "tagTitle": {
                      "title": "admin/editor.menu.item.params.tagTitle.title",
                      "$ref": "app:vtex.native-types#/definitions/text"
                    }
                  }
                },
                "iconProps": {
                  "title": "admin/editor.menu.item.iconProps",
                  "properties": {
                    "id": {
                      "title": "admin/editor.menu.item.iconProps.id.title",
                      "type": "string",
                      "default": null
                    }
                  }
                }
              }
            }
          ]
        }
      },
      "properties": {
        "__editorItemTitle": {
          "title": "admin/editor.menu.item.editorItemTitle.title",
          "description": "admin/editor.menu.item.editorItemTitle.description",
          "type": "string"
        },
        "highlight": {
          "title": "admin/editor.menu.item.highlight.title",
          "type": "boolean"
        },
        "type": {
          "title": "admin/editor.menu.item.type.title",
          "type": "string",
          "enum": [
            "category",
            "custom"
          ],
          "default": "custom",
          "enumNames": [
            "admin/editor.menu.item.category.title",
            "admin/editor.menu.item.custom.title"
          ],
          "widget": {
            "ui:widget": "radio"
          }
        },
        "onMountBehavior": {
          "title": "admin/editor.menu.item.onMountBehavior.title",
          "type": "string",
          "enum": [
            "open",
            "closed"
          ]
        }
      }
    },
    "Submenu": {
      "type": "object",
      "properties": {
        "submenuWidth": {
          "title": "admin/editor.menu.item.submenuWidth.title",
          "enum": [
            "100%",
            "auto"
          ],
          "default": "auto"
        }
      }
    }
  }
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of menu/store/interfaces.json from the menu VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "menu-link": {
    "component": "index"
  },
  "menu": {
    "component": "Menu",
    "composition": "children",
    "content": {
      "$ref": "app:vtex.menu#/definitions/Menu"
    }
  },
  "menu-item": {
    "component": "MenuItem",
    "composition": "children",
    "allowed": ["submenu"],
    "content": {
      "$ref": "app:vtex.menu#/definitions/MenuItem"
    }
  },
  "submenu": {
    "component": "Submenu",
    "composition": "children",
    "content": {
      "$ref": "app:vtex.menu#/definitions/Submenu"
    }
  },
  "submenu.accordion": {
    "component": "SubmenuAccordion",
    "composition": "children"
  },
  "submenu-col": {
    "component": "Column",
    "composition": "children"
  },
  "unstable--menu": {
    "component": "Menu",
    "composition": "children"
  },
  "unstable--menu-item": {
    "component": "MenuItem",
    "allowed": ["unstable--submenu"]
  },
  "unstable--submenu": {
    "component": "Submenu",
    "composition": "children"
  },
  "unstable--col": {
    "component": "Column",
    "composition": "children"
  },
  "unstable--second-level-menu": {
    "component": "Menu",
    "composition": "children"
  },
  "unstable--second-level-menu-item": {
    "component": "MenuItem"
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of menu/react/constants/Options.ts from the menu VTEX app.

[Assistant]
Here's the implementation:

```typescript
export default {
  EXTERNAL: 'external',
  INTERNAL: 'internal',
  LEFT: 'left',
  MIDDLE: 'middle',
  RIGHT: 'right',
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of menu/react/typings/vtex.store-icons.d.ts from the menu VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.store-icons' {
  export const Icon
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of menu/react/typings/global.d.ts from the menu VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { FunctionComponent } from 'react'

declare global {
  interface StorefrontFunctionComponent<P = {}> extends FunctionComponent<P> {
    schema?: object
    getSchema?(props?: P): object
  }

  interface StorefrontComponent<P = {}, S = {}> extends Component<P, S> {
    schema?: object
    getSchema?(props: P): object
  }

  interface StorefrontElement extends ReactElement {
    schema?: object
    getSchema?(props: P): object
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of menu/react/typings/css.d.ts from the menu VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.css' {
  const css: any
  export default css
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of menu/react/typings/graphql.d.ts from the menu VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.graphql' {
  import { DocumentNode } from 'graphql'

  const value: DocumentNode
  export default value
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of menu/react/components/LevelContext.tsx from the menu VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { createContext } from 'react'

const LevelContext = createContext(0)

export default LevelContext

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of menu/react/components/MenuContext.tsx from the menu VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { createContext } from 'react'

const MenuContext = createContext<MenuContextValue>({
  experimentalOptimizeRendering: false,
  hasTitle: false,
  orientation: 'horizontal',
  textType: 't-body',
})

interface MenuContextValue {
  hasTitle: boolean
  orientation: 'horizontal' | 'vertical'
  textType: string
  experimentalOptimizeRendering?: boolean
}

export default MenuContext

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of menu/react/components/CustomItem.tsx from the menu VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent } from 'react'
import { injectIntl } from 'react-intl'
import { formatIOMessage } from 'vtex.native-types'

import StyledLink, { StyledLinkProps } from './StyledLink'

const CustomItem: FunctionComponent<
  CustomItemProps & { intl: any }
> = props => {
  const { type, noFollow, tagTitle, text, href, intl, ...rest } = props

  return (
    <StyledLink
      {...rest}
      to={href}
      title={formatIOMessage({ id: tagTitle, intl })}
      {...(type === 'external' ? { target: '_blank', rel: 'noopener' } : {})}
      {...(noFollow ? { rel: 'nofollow noopener' } : {})}
    >
      {formatIOMessage({ id: text, intl })}
    </StyledLink>
  )
}

export interface CustomItemProps extends CustomItemSchema, StyledLinkProps {}

export interface CustomItemSchema {
  type: 'internal' | 'external'
  href: string
  noFollow: boolean
  tagTitle: string
  text: string
}

export default injectIntl(CustomItem)

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of menu/react/components/Item.tsx from the menu VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent } from 'react'

import CategoryItem, { CategoryItemSchema } from './CategoryItem'
import CustomItem, { CustomItemSchema } from './CustomItem'
import { StyledLinkProps } from './StyledLink'

// TODO use this
// type ItemComponent = (
//   props: CategoryItemProps | CustomItemProps
// ) => React.ReactElement

const menuItemTypes = {
  category: CategoryItem,
  custom: CustomItem,
}

const Item: FunctionComponent<ItemProps> = props => {
  const { type, itemProps, ...rest } = props

  // TODO: fix
  const Component = menuItemTypes[type] as any

  if (!Component) {
    return null
  }

  return <Component {...rest} {...itemProps} />
}

interface ItemProps extends StyledLinkProps {
  type: 'category' | 'custom'
  accordion?: boolean
  itemProps: CategoryItemSchema | CustomItemSchema
}

export default Item

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of menu/react/components/StyledLink.tsx from the menu VTEX app.

[Assistant]
Here's the implementation:

```tsx
import classNames from 'classnames'
import React, { FunctionComponent, useContext } from 'react'
import { useCssHandles } from 'vtex.css-handles'
import { Link } from 'vtex.render-runtime'
import { Icon } from 'vtex.store-icons'

import LevelContext from './LevelContext'
import MenuContext from './MenuContext'

const CSS_HANDLES = [
  'styledLink',
  'styledLinkIcon',
  'styledLinkContainer',
  'styledLinkContent',
  'accordionIcon',
] as const

const defaultTypography: Record<number, string> = {
  1: 't-body',
  2: 't-small',
  3: 't-small',
}

const StyledLink: FunctionComponent<StyledLinkProps> = props => {
  const level = useContext(LevelContext)
  const { orientation, hasTitle } = useContext(MenuContext)
  const { handles, withModifiers } = useCssHandles(CSS_HANDLES)

  const {
    typography = defaultTypography[level],
    accordion,
    highlight,
    isHovered,
    active,
    isTitle,
    disabled,
    to,
    children,
    iconId,
    iconProps,
    iconPosition,
    treePath,
    ...rest
  } = props

  const hasLink = to && to !== '#'

  const linkClassNames = classNames(
    withModifiers('styledLink', highlight ? 'highlight' : ''),
    'no-underline pointer',
    {
      [typography]: true,
      'c-emphasis': highlight,
      'c-muted-1': !highlight && hasTitle && !isTitle,
      'c-on-base': !highlight && !hasTitle,
      'fw5 c-on-base': !highlight && isTitle,
      pointer: !disabled,
    }
  )

  const iconTestId = `icon-${iconPosition}`
  const iconComponent = iconProps?.id ? (
    <span className={`${handles.styledLinkIcon} mh2`} data-testid={iconTestId}>
      <Icon
        id={iconProps.id}
        isActive={iconProps.isActive}
        size={iconProps.size}
        viewBox={iconProps.viewBox}
        activeClassName={iconProps.activeClassName}
        mutedClassName={iconProps.mutedClassName}
      />
    </span>
  ) : null

  const content = (
    <div className={`${handles.styledLinkContent} flex justify-between nowrap`}>
      {iconPosition === 'left' && iconComponent}
      {children}
      {iconPosition === 'right' && iconComponent}
      {accordion && (
        <div
          className={`${withModifiers(
            'accordionIcon',
            active ? 'isOpen' : 'isClosed'
          )} ml3 c-muted-2`}
        >
          {active ? '-' : '+'}
        </div>
      )}
    </div>
  )

  return (
    <div
      className={classNames(handles.styledLinkContainer, 'mh6', {
        pv2: orientation === 'vertical',
        pv5: orientation === 'horizontal' && level === 1,
      })}
    >
      {disabled || !hasLink || accordion ? (
        <span className={linkClassNames}>{content}</span>
      ) : (
        <Link to={to} {...rest} className={linkClassNames}>
          {content}
        </Link>
      )}
    </div>
  )
}

export interface StyledLinkProps extends LinkProps {
  highlight?: boolean
  isHovered?: boolean
  active?: boolean
  isTitle?: boolean
  typography?: string
  disabled?: boolean
  accordion?: boolean
  treePath?: string
  iconId?: string
  iconProps?: IconProps
  iconPosition?: 'left' | 'right'
}

export interface IconProps {
  id: string
  isActive?: boolean
  size?: number
  viewBox?: string
  activeClassName?: string
  mutedClassName?: string
}

interface LinkProps {
  to?: any
  title?: string
  target?: string
  rel?: string
}

StyledLink.defaultProps = {
  iconPosition: 'left',
}

export default StyledLink

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of menu/react/components/CategoryItem.tsx from the menu VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Component } from 'react'
import { Query, QueryResult } from 'react-apollo'

import category from '../graphql/category.graphql'
import StyledLink, { StyledLinkProps } from './StyledLink'

class CategoryItem extends Component<CategoryItemProps, State> {
  public static getDerivedStateFromError() {
    return { hasError: true }
  }

  public state = { hasError: false }

  public componentDidCatch(error: any) {
    // eslint-disable-next-line no-console
    console.log({ error })
  }

  public render() {
    const { categoryId, text, ...rest } = this.props

    if (this.state.hasError || categoryId == null) {
      return null
    }

    return (
      <Query query={category} variables={{ id: categoryId }}>
        {({ data, loading, error }: QueryResult) => {
          if (error) {
            throw new Error(
              `GraphQL error while rendering Menu rendered Category id ${categoryId}`
            )
          }

          if (loading) {
            // TODO: Add a ContentLoader here
            return null
          }

          const {
            category: { name, titleTag, href },
          } = data

          return (
            <StyledLink {...rest} title={titleTag} to={href}>
              {text ?? name}
            </StyledLink>
          )
        }}
      </Query>
    )
  }
}

export interface CategoryItemProps
  extends CategoryItemSchema,
    StyledLinkProps {}

export interface CategoryItemSchema {
  categoryId: number
  text?: string
}

interface State {
  hasError: boolean
}

export default CategoryItem

```