https://neobrutalism.com/pt/blocks/sidebar/collapsible-dashboard-sidebar
Sidebar retrátil
Barra lateral · Código-fonte Pro
Uma sidebar de aplicação que cumpre três funções ao mesmo tempo: um painel completo de 256px no desktop, um rail de ícones de 64px quando você a colapsa, e um drawer off-canvas no celular com um fundo escurecido. Ela traz uma linha de marca, um bloco de perfil com badge de cargo, seis itens de navegação com contagem de não lidos, e uma ação de logout fixada na parte de baixo. Colapsar esconde os labels visualmente, mas os mantém para leitores de tela, então o rail nunca vira uma fileira de ícones sem nome. Toda cor é um token de tema, então ela segue sua paleta no claro e no escuro sem precisar de edições.
Barra lateral
Sidebar retrátilAbrir visualização ao vivo
- Hero, preços e auth
- Visualizar todos os pontos de interrupção
- Copie o código-fonte
- MCP pronto para instalação
- Radix · Base UI · React Aria
- 158 blocos pré-fabricados
- Seções da página que são enviadas
- Painéis e marketing
- Pro desbloqueia o código
- Layouts de encaixe
Amado por devs, designers
e criadores
Encontrei o seu kit de UI e peguei na hora. Impressionante ver que é novo, ativo e melhorando sem parar. Trabalho incrível! 🤘
Ziv Reich, Desenvolvedor de software Só queria dizer que você mandou muito bem no neobrutalism.com. Amei de verdade. Sou péssimo em design, então isso me salvou. Usei no meu site pessoal.
Paul Bratslavsky, Criador do Coding With Paul Finalmente refiz o meu site pessoal com a Neobrutalism.com — biblioteca divertida e fácil de começar!
Cameron Blackwood, Criador de conteúdo A Neobrutalism.com é uma das minhas bibliotecas de componentes UI retrô favoritas — componentes que realmente shipam.
Zhengyang Hou, Indie hacker uma das minhas bibliotecas de ui favoritas para a web. mandou muito bem — espero que vá longe.
Taseen Tanvir, Fundador e designer Acabei de testar o Neobrutalism.com Pro — um kit de UI que não é a cara de todos os outros. Os blocos neobrutalistas 🔥 deixaram prototipar layouts estranhos bem mais rápido.
Nitesh Padghan, Ghostwriter Design de landing page lindo, com equilíbrio e fluxo perfeitos. A paleta de cores combinada com as animações cria uma experiência de usuário excepcional.
Alan Obeng-Peprah, Senior Designer @ NativeXAI Fiquei muito impressionado com o design que eles entregaram. O produto final bateu exatamente com o que eu tinha imaginado.
Desmond, Cofundador @ VectorlabsVentures Como dono de agência, eu costumava gastar semanas refinando layouts de landing para clientes. Com o Neobrutalism.com, eu plugo um template, ajusto o texto e já estou pronto para publicar.
Duke Opoku Amankwah, Fundador @ Midas Os templates não são só visualmente incríveis: também são muito bem estruturados. Economizaram semanas de desenvolvimento.
Abiola Braimah, Desenvolvedor @ Studio IX Qualidade excepcional e atenção aos detalhes. O design responsivo funciona perfeitamente em todos os dispositivos.
Acromond X., Cofundador @ VectorlabsVentures Integrar esses templates no nosso fluxo reduziu bastante nosso ciclo de desenvolvimento. Excelente trabalho.
Raquib S., Desenvolvedor backend Esses templates viraram nosso recurso principal. O código é limpo, bem documentado e fácil de personalizar.
Hallic M., Desenvolvedor @ AtlasLabs Os templates do Neobrutalism.com acertam o equilíbrio perfeito entre estética e funcionalidade. Um verdadeiro divisor de águas para nossos projetos.
Ibrahim S., Frontend Lead @ ScaleUp Suporte excepcional e templates de qualidade premium. O ROI desses templates é fenomenal.
Kevin K., CEO @ WebCraft Os templates do Neobrutalism.com transformaram completamente como encaramos novos projetos de clientes. A qualidade do código é excepcional e os designs são de primeiro nível.
Danny G., Fundador da DevStack Já usei muitas bibliotecas de templates, mas o Neobrutalism.com se destaca pela atenção à otimização de performance e a uma arquitetura de código limpa.
Ian D., CTO na Wavelength As animações e microinterações desses templates são absolutamente impressionantes. Melhor investimento para nossa equipe de design.
Ben S., Lead Designer na PixelPerfect Como fundador não técnico, os templates do Neobrutalism.com nos ajudaram a lançar o MVP em tempo recorde sem abrir mão da qualidade do design. Nossos investidores ficaram impressionados.
Matthew I., Fundador de startup Gosto de quão modulares e bem documentados esses componentes são. Conseguimos misturar peças de templates diferentes sem atrito.
Garrett P., Frontend Lead na TechFusion O ROI dos templates do Neobrutalism.com é incrível. Reduzimos drasticamente o tempo de desenvolvimento e entregamos sites de mais qualidade aos clientes.
Xavier C., Dono de agência
Perguntas
frequentes
Como o bloco Sidebar retrátil é montado, o que você pode alterar e quando usá-lo em vez dos outros layouts aqui.
Para um app. Ele parte do princípio de um usuário logado, uma rota atual e um shell persistente ao redor do conteúdo da página — por isso tem um bloco de perfil e uma ação de logout em vez de um logo e um botão de cadastro. Para um site público, use a categoria navbar: os blocks de navegação superior são horizontais, não têm estado de conta e são feitos para um header, não para um shell. Este é o único block de sidebar, então não há uma variante mais estreita ou mais larga para comparar.
Ele vai de w-64 para w-16, e todo label de texto vira sr-only em vez de ser removido, então os ícones continuam com nomes acessíveis e cada linha mantém um atributo title para um tooltip no hover. O perfil mantém o avatar e esconde o nome e o cargo atrás de uma linha visualmente oculta. O badge de não lidas em Notifications é substituído por uma frase oculta 3 unread, porque um badge numérico espremido em um rail de 64px deixa de ser legível.
Mude a constante activeHref no topo do arquivo, ou em um app Next.js substitua por const activeHref = usePathname(). A linha correspondente recebe aria-current definido como page além do preenchimento amarelo, então o estado é anunciado, não só mostrado — só a cor deixaria isso invisível para um leitor de tela e para quem não consegue distingui-la. A linha também ganha uma borda visível, que é um segundo indício sem depender de cor.
Tudo vem do array navItems: cada entrada tem um id, um label, um componente de ícone lucide, um href e um count opcional. Reordenar o array reordena a sidebar, e adicionar um count a qualquer entrada renderiza o badge naquela linha. Cerca de oito entradas é o limite prático antes de a lista precisar de rolagem própria — a nav já é flex-1 com overflow-y-auto, então ela rola em vez de empurrar a linha de logout para fora da tela.
Porque uma div com um handler de onClick não pode ser alcançada pelo teclado, então em uma viewport de celular o drawer poderia ser aberto e nunca fechado sem um mouse. O backdrop é um button de verdade com aria-label Close menu, e a tecla Escape também fecha o drawer. O próprio toggle carrega aria-expanded e aria-controls apontando para o id da sidebar, então seu estado é exposto, não apenas sugerido pela troca de ícone.
Deslizar com -translate-x-full move o drawer para fora da tela, mas deixa todos os links na ordem de tabulação, então um usuário de teclado no celular passa por seis destinos invisíveis antes de chegar à página. Adicionar max-md:invisible tira o drawer da ordem de tabulação abaixo do breakpoint md, mantendo o slide, porque a visibility transiciona no final da animação ao sair e imediatamente ao entrar. Acima do md o drawer está sempre visível, então a classe nunca se aplica.