Navbar
A Navbar é um componente de navegação global que reúne recursos essenciais para a jornada do usuário. Ela facilita o acesso as funcionalidades, garante a consistência entre os produtos e reduz o esforço cognitivo. Além disso, seus menus e submenus são customizáveis para atender às necessidades específicas de cada aplicação.
Anatomia
- Identificação do produto: Apresenta o nome do produto atual e contém link para a página inicial de seu domínio.
- Menu principal: Contém links para as principais funcionalidades do produto atual.
- Menu auxiliar: Contém links para acesso a seções importantes relacionadas ao funcionamento do produto atual.
- Menu da conta: Exibe informações sobre a conta e o perfil pessoal ativo.
Identificação do produto
É o primeiro elemento a ser exibido e fica localizado à extrema esquerda da Navbar. Apresenta o logotipo para ajudar na identificação de qual produto a pessoa está acessando e, ao ser clicado, envia a pessoa para a página principal de cada produto.
Caso o logotipo seja o único elemento na Navbar, você pode deixar alinhado ao centro, sem a funcionalidade de clicar para enviar a pessoa para a página principal do produto.
Navbar com o padrão de identificação do produto:
Navbar com a identificação do produto alinhada ao centro:
Menu principal
Permite a navegação e o acesso às principais funcionalidades de cada produto podendo conter sub-menus com apenas um nível de navegação. Todos os itens que possuem sub-menus apresentam uma seta indicativa, deixando claro quais menus possuem mais opções e quais não.
Link
São elementos que, ao serem clicados, enviam a pessoa diretamente para uma página ou funcionalidade do produto.
Item
São elementos que, ao serem clicados, exibem um sub-menu com as páginas ou funcionalidades que fazem parte do agrupamento dentro de cada produto. Os elementos exibidos dentro do sub-menu são elementos que, ao serem clicados, enviam a pessoa diretamente para uma página ou funcionalidade do produto.
Uso de tags no sub-menu
Os sub-menus podem conter tags indicativas específicas para novas seções de um produto, seções que só podem ser acessadas com upsell de plano ou seções em fase de testes. Tags inseridas nos sub-menus da navbar deverão seguir regras específicas de exibição:
| Tag | Texto | Uso | Exibições |
|---|---|---|---|
NOVO | NOVO | Novas funcionalidades ou recursos do produto. |
|
ENTERPRISE | LIGHT, BASIC, PRO, ENTERPRISE/ADVANCED... | Funcionalidades disponíveis em outros planos de assinatura. |
|
BETA | BETA | Funcionalidades em fase de testes. |
|
Menu auxiliar
Oferece atalhos a recursos e páginas específicas para cada um dos produtos e ele deve ser aplicado a esquerda do menu conta. No menu auxiliar é permitido apenas a utilização de ícones, não deve ser utilizado textos corridos.
É possível fazer com que o ícone, ao ser clicado, exiba um sub-menu assim como o comportamento e as regras de uso descritas no item sobre o menu principal.
Menu da conta
É utilizado para ajudar a identificar qual é o usuário e qual é a conta que a pessoa está acessando o produto, nele é exibido um avatar com foto, nome da pessoa e o nome da conta. Caso não haja foto cadastrada o avatar irá exibir a primeira letra do nome e a primeira letra do sobrenome.
Ao clicar nesse elemento, é exibido um sub-menu com itens das funcionalidades relacionadas diretamente à conta.
Editores
Para edição
Esta navegação minimalista oferece poucas opções, sempre com foco total na tarefa de edição. Apresenta o logo do produto, nome da feature e nome do recurso que está sendo editado. No lado direito, apresenta o nome da conta ativa no momento e um link para sair do modo de edição.
Para pré-visualização
A barra de navegação de pré-visualização é similar à barra de edição. Apresenta o logo do produto, nome da funcionalidade, nome do recurso que está sendo pré-visualizado, um toggle seleção dos diferentes modos de exibição e botão de "Fechar pré-visualização".
Textos
Quando escrever para itens do menu principal e da conta, use letra maiúscula no começo de cada termo. Por exemplo: Análise de Canais e Detalhes da Conta. Preposições e conjunções não entram nessa regra.
Tudo no menu da conta é da pessoa usuária, então use sempre Minhas Contas, Meu Perfil, etc.
Aplicações
O uso de tags nos submenus da Navbar deve seguir as regras de uso descritas na seção submenu.
Evite utilizar qualquer outro componente na Navbar além dos que foram apresentados até aqui.
Feedback
To report a problem or suggest changes, use our improvements form or, if you prefer, open an issue on our Github repository.