Menu de Grade Responsivo
O Menu de Grade no Navi+ é projetado com uma abordagem mobile-first. Isso significa que você configura e otimiza o menu primeiro para dispositivos móveis, e a versão desktop será automaticamente dimensionada a partir do layout móvel em vez de ser reconstruída do zero.
Menus de Grade são tipicamente usados para destacar recursos principais ou categorias importantes, geralmente com 8 a 12 itens. No mobile, a grade é comumente exibida em 2 a 3 linhas, com 4 a 5 itens por linha. Para alcançar isso, você pode usar a configuração de Layout de Largura, como 3/12 ou 2/10, para controlar como a grade se ajusta em telas menores.
Na versão desktop, a largura de tela disponível é muito maior (geralmente equivalente a 2–3 telas móveis). Se a grade ainda mostrar apenas 4–5 itens por linha, pode parecer muito esparsa. Para resolver isso, o Navi+ fornece a configuração de proporção de exibição Desktop/móvel. Por exemplo, quando você define uma proporção de 2x, o número de itens exibidos por linha na versão desktop será dobrado em comparação com o mobile, resultando em 8–10 itens por linha, o que cria um layout mais equilibrado em telas grandes.
No mobile, os Menus de Grade podem ser exibidos de duas maneiras. A primeira opção é em largura total, onde a grade preenche toda a largura da tela, tornando os itens fáceis de ver e tocar. A segunda opção é uma grade rolável horizontalmente, onde os tamanhos dos itens permanecem fixos e os usuários podem deslizar para a esquerda ou direita para explorar mais conteúdo. Ambas as opções funcionam bem no mobile, e você pode escolher a que melhor se adapta ao seu conteúdo e caso de uso.
| Na versão desktop, gestos de deslizar não são comuns, então o Menu de Grade é exibido com uma largura fixa de 100%. Ao combinar a proporção de exibição Desktop/móvel com configurações de tamanho específicas do dispositivo (usando o formato 8 | 16, significando 8 no mobile e 16 no desktop), você pode garantir que a grade pareça clara, cheia e bem proporcionada em telas maiores. |
Essa abordagem mantém seu Menu de Grade consistente entre mobile e desktop, fácil de gerenciar e simples de atualizar—sem manter dois sistemas de menu separados. Você só precisa projetar o Menu de Grade uma vez no mobile, e o Navi+ cuida do resto.