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

# SearchBar

> Campo de busca com sugestões em tempo real, navegação por teclado e cache local de pesquisas recentes.

Componente de busca do header. Exibe um input que, ao ser digitado, consulta a Search API e exibe uma lista de sugestões de produtos em dropdown. As últimas pesquisas são cacheadas localmente para respostas mais rápidas.

## Uso

```twig theme={"system"}
<search-bar />
```

## Observações

* Não recebe props — consome o estado do header e os dados do lojista via Vuex.
* A visibilidade é controlada pelo estado `header.showSearchBar` no Vuex.
* Suporta navegação pelas sugestões com as teclas `↑`, `↓` e `Enter`.
* Usa `cacheMixin` para armazenar resultados recentes e evitar chamadas redundantes à API.