App Bar

Componente fixo no topo da tela que organiza a navegação e ações principais de uma página ou aplicativo

Figma

---

Uso

A app bar permite uma centralização de recursos de navegação e disponibilidade em todo o aplicativo

---

Variantes

Home

Usada na página inicial do aplicativo. Exibe o logo da marca e um botão de login. É a versão mais simples da App Bar.

❖. Container

• No container é ativado uma layer, com shadow, ao realizar scroll.

1. Logo

2. Chamada Assine

3. Conta

Intern

Indicada para as telas internas, que não estão na navegação principal. Sempre apresenta o botão de voltar, que pode ser substituído pelo ícone nativo de cada sistema operacional (Android/iOS), conforme o padrão da plataforma.

❖. Container

• No container é ativado uma layer, com shadow, ao realizar scroll.

1. Title

2. Slot personalizável

3. Slot personalizável

4. Slot personalizável

5. Botão Voltar

Scroll

Representa o estado compactado da App Bar durante o scroll. Reduz o espaço vertical, mantendo os elementos principais fixos no topo, como título da tela e/ou controles persistentes. É ativada automaticamente ao detectar o comportamento de rolagem, otimizando o uso da área visível.

❖. Container

1. Title

2. Slot personalizável

3. Slot personalizável

4. Slot personalizável

5. Botão Voltar

---

Use Cases

Main Pages

Most popular

Search

---

Referências

Material Design

---

Histórico de Atualizações

Figma	Gitbook	Android	iOS	Web
05/08/2025	06/08/2025			Ver na tabela

Atualizações por data

Agosto 2025

06/08/2025

• Implementação do Marketing Button

Junho 2025

04/06/2025

• Atualização estrutural e organizacional do componente

• Documentação do componente

Percebeu um erro, ficou com dúvida ou tem uma sugestão?

Contribua com o Kósmos preenchendo nosso formulário de contribuição — sua colaboração ajuda a tornar o Design System mais claro, útil e evolutivo para todo o time.