Prof. Roberto

Menus funcionais para sites e mobile Ir para a página inicial
Galeria de menus com código copiável

Menus funcionais para sites e mobile

Agora esta página está em HTML puro, em um único arquivo, sem React. Cada exemplo mostra o menu funcionando e logo abaixo traz os códigos de HTML, CSS e JavaScript com botão para copiar.

Menus para sites

Modelos desktop com interação e código pronto para reutilizar.

Navbar clássica funcional

Os botões alteram o item ativo e o texto abaixo.

Item selecionado: Início

HTML

            
CSS

            
JavaScript

          

        


        

          
Menu dropdown funcional
Abre e fecha por clique sem cortar os itens do submenu.

          

            

              

                
                
              

              
Item selecionado: Home

            

          

          

            
HTML

            
CSS

            
JavaScript

          

        


        

          
Mega menu funcional
As categorias expandem abaixo do cabeçalho e podem ser selecionadas.

          

            

              

                
                
              

              

                
                
                
              

              
Área atual: Início

            

          

          

            
HTML

            
CSS

            
JavaScript

          

        


        

          
Sidebar funcional
Troca a seção ativa do painel ao clicar nos itens.

          

            

              
              

                
Área de conteúdo

                
Seção ativa: Dashboard

              

            

          

          

            
HTML

            
CSS

            
JavaScript

          

        

      

    


    

      
Menus para mobile

      
Exemplos com drawer, hamburger, tabs e navegação inferior.

      

        

          
Hamburger funcional
Menu recolhível com links clicáveis e código copiável.

          

            

              
MeuApp

              
              
Tela atual: Início

            

          

          

            
HTML

            
CSS

            
JavaScript

          

        


        

          
Drawer menu mobile
O menu lateral desliza, fecha ao clicar fora e atualiza a seção ativa.

          

            

              
Painel

              
Seção atual: Dashboard

              

              
            

          

          

            
HTML

            
CSS

            
JavaScript

          

        


        

          
Bottom navigation funcional
Menu de rodapé típico de app, com aba ativa destacada.

          

            

              
Conteúdo do app: Home

              
            

          

          

            
HTML

            
CSS

            
JavaScript

          

        


        

          
Tabs funcionais
Abas superiores que trocam o conteúdo da tela no mobile.

          

            

              

                
                
                
              

              

                
Feed

                
Novidades, posts e recomendações para o usuário.

              

            

          

          

            
HTML

            
CSS

            
JavaScript