Components
Navigation
Tabs e Breadcrumb: organizar conteúdo em abas e situar o usuário na hierarquia. Estado ativo sempre em Volts, o condutor da interface.
Tabs
Três variantes para contextos diferentes: default para superfícies compactas, pills para filtros e underline para páginas de conteúdo.
Default
Painel geral do projeto Beanie: squad, progresso e próxima entrega.
Pills
Painel geral do projeto Beanie: squad, progresso e próxima entrega.
Underline
Painel geral do projeto Beanie: squad, progresso e próxima entrega.
Controlado com estado
Abas com ícones lucide dirigindo o conteúdo por estado: Visão geral, Atividade e Configurações de um projeto.
Beanie · App iOS
Squad de Engenharia · 8 de 11 sprints concluídas · próxima release em 12/03/2026.
Aba ativa: visao
Breadcrumb
Trilha de navegação até a página atual. A última posição é a página vigente, destacada; as demais são links.
Básico
Com ícones
BreadcrumbNav monta a trilha a partir de dados, aceitando ícones por item.
Com colapso (maxItems)
Trilhas longas colapsam o miolo em reticências, preservando a origem e as duas últimas posições.
Separador customizado
O separador aceita conteúdo próprio, aqui uma barra monoespaçada.
Referência
| Componente | Props principais | Import |
|---|---|---|
| Tabs | variant (default | pills | underline), defaultValue, value, onValueChange | @/components/ui/tabs |
| TabsList / TabsTrigger / TabsContent | value | @/components/ui/tabs |
| BreadcrumbNav | items (label, href, icon), maxItems | @/components/ui/breadcrumb |
| BreadcrumbSeparator | children (separador custom) | @/components/ui/breadcrumb |