Padrão de Uso do TabMenu

Sobre

Este padrão define o uso do componente TabMenu para organizar conteúdos e funcionalidades em diferentes abas, permitindo que o usuário navegue facilmente entre seções relacionadas. Ele é ideal para cenários onde há múltiplas configurações ou entidades que precisam ser acessadas de forma rápida e estruturada.

Contexto & Problema

Quando um produto apresenta muitas configurações ou entidades relacionadas, exibir todas as informações em uma única página pode sobrecarregar o usuário e dificultar a navegação. O TabMenu resolve esse problema ao segmentar o conteúdo em abas claras e acessíveis.

Quando Usar

Em produtos com múltiplas configurações ou entidades relacionadas, como Edge Applications ou Edge Firewall
Quando for necessário organizar subpáginas de forma hierárquica e acessível

Componentes Utilizados

TabMenu (Console Kit Blocks)

Exemplo Visual

Exemplo de uso do TabMenu

Edge Applications > Edit Edge Application

Estrutura de navegação clara: Cada aba deve representar uma subpágina ou funcionalidade distinta
Destaque na aba ativa: A aba atualmente selecionada deve ser visualmente destacada
Navegação sem recarregamento: A troca entre abas deve ser rápida, sem recarregar a página inteira
URLs únicas por aba: Cada aba deve ter uma URL única para permitir compartilhamento e navegação direta
Responsividade: O TabMenu deve se ajustar adequadamente em dispositivos móveis

Implementação

const tabMenuItems = [
    {
        label: 'Main Settings',
        command: () => navigateTo('/edge-application/main-settings')
    },
    {
        label: 'Origins',
        command: () => navigateTo('/edge-application/origins')
    },
    {
        label: 'Device Groups',
        command: () => navigateTo('/edge-application/device-groups')
    },
    {
        label: 'Error Responses',
        command: () => navigateTo('/edge-application/error-responses')
    },
    {
        label: 'Cache Settings',
        command: () => navigateTo('/edge-application/cache-settings')
    },
    {
        label: 'Functions Instances',
        command: () => navigateTo('/edge-application/functions-instances')
    },
    {
        label: 'Rules Engine',
        command: () => navigateTo('/edge-application/rules-engine')
    }
];

// Renderiza o TabMenu
<TabMenu model={tabMenuItems} activeItem={currentTab} />