> ## Documentation Index
> Fetch the complete documentation index at: https://docs-loja.usecorvex.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# Menus e Blog

> Storefront Menus API (mega menu) e Blog/Artigos na vitrine Corvex.

APIs públicas para navegação e conteúdo editorial (blog / artigos).

Menus e blogs devem estar **publicados** na loja para aparecer na vitrine (`source: published`).

***

## Menus

### Cliente SDK

```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
const storefront = createStorefront({ storeId });

const menus = await storefront.menus.list();
const main = await storefront.menus.get('main');
```

| Método | Rota |
| - | - |
| `menus.list()` | `GET .../storefront/menus` |
| `menus.get(handle)` | `GET .../storefront/menus/:handle` |

Resposta normalizada:

```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
{
  handle: 'main',
  label: 'Menu principal',
  source: 'published', // ou draft
  schemaVersion: 2,
  items: [ /* itens normalizados */ ],
}
```

### Hook com cache

```jsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
import { useStorefrontMenus, StorefrontNav } from '@corvex/theme-sdk';

function Header() {
  const { getMenu, loading } = useStorefrontMenus(['main', 'footer']);
  const main = getMenu('main');

  if (loading) return null;
  return <StorefrontNav menu={main} />;
}
```

### Mega menu

Itens `type: "MEGA_MENU"` com `megaMenu.enabled: true` renderizam colunas + destaque:

```jsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
import { MegaMenuPanel, MegaMenuItem } from '@corvex/theme-sdk';

// StorefrontNav já usa MegaMenuItem internamente
```

Helper de URL:

```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
import { resolveMenuItemUrl } from '@corvex/theme-sdk';

const href = resolveMenuItemUrl(item);
```

Tipos suportados: `INTERNAL_LINK`, `EXTERNAL_LINK`, `PRODUCT`, `COLLECTION`, `CATEGORY`, `PAGE`, `BLOG`, `BLOG_ARTICLE`, `MEGA_MENU`.

Cada item pode ter `children`. O mapper para em profundidade 8 e descarta ciclo. `menus.get('')` e `getMenu` de um handle ausente devolvem `null`. O header deve mostrar um fallback, como em [Header](https://docs-loja.usecorvex.com.br/cookbook/header.md). Para o link, use `resolveMenuItemUrl(item)`. Não monte a URL na mão a partir de `resourceId`.

***

## Blog / Artigos

### Cliente SDK

```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
const blogs = await storefront.blogs.list();
const blog = await storefront.blogs.get('news');
const articles = await storefront.blogs.listArticles('news', { page: 1, limit: 12, tag: 'moda' });
const article = await storefront.blogs.getArticle('news', 'como-escolher-tamanho');
```

Listagem **não** inclui `bodyHtml`. Detalhe inclui corpo completo.

### Hook

```jsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
import { useStorefrontBlog } from '@corvex/theme-sdk';

function BlogListing() {
  const { blog, articles, loading } = useStorefrontBlog({ blogHandle: 'news' });
  // ...
}

function ArticlePage() {
  const { article } = useStorefrontBlog({
    blogHandle: 'news',
    articleHandle: 'como-escolher-tamanho',
  });
}
```

### Contexto de página

Preview/editor query params:

| Param | Exemplo |
| - | - |
| `blog` | `?blog=news` |
| `article` | `?blog=news&article=como-escolher-tamanho` |

```jsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
const { blog, articles, article } = usePage('blog');
```

`usePage` devolve o contexto da página atual. O texto passado não escolhe outro contexto. Em um template `blog`, leia `blog` e `articles`. Em um template `article`, leia `article`. Fora dessas páginas esses campos não vêm preenchidos.

URLs sugeridas na vitrine:

* `/blogs/{blogHandle}` — listagem
* `/blogs/{blogHandle}/articles/{articleHandle}` — artigo

***

## Inspector (schema)

O campo `menu` é estável e guarda o handle. O campo `blog` é experimental.

```json theme={"theme":{"light":"github-light","dark":"github-dark"}}
{ "id": "menu", "type": "menu", "label": "Menu", "default": "main" }
```

Como usar no header: [Header](https://docs-loja.usecorvex.com.br/cookbook/header.md). Artigo de exemplo: [Blog](https://docs-loja.usecorvex.com.br/cookbook/blog-article.md).

O mapper de artigo completo inclui `bodyHtml` quando a API envia. A listagem usa só o resumo, sem corpo. `seoTitle` e `seoDescription` também vêm no objeto quando a API envia. Esta página não garante rota publicada nem SSR.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.