Modo escuro

Menu backoffice

Utilize o componente Menu Lateral de Backoffice para fornecer uma navegação estruturada e acessível em aplicações administrativas ou painéis de gestão. Este componente é essencial para organizar as diferentes funcionalidades e seções de um backoffice, permitindo que os utilizadores acessem rapidamente as áreas de interesse.

Características Principais

Navegação Estruturada

Apresenta botões para as principais seções e funcionalidades do backoffice, organizados de forma hierárquica ou categorizada.

Acesso Rápido

Permite que os utilizadores naveguem entre diferentes áreas sem sair da página atual, melhorando a eficiência.

Personalização

Pode ser personalizado para incluir ícones, oferecendo uma experiência mais intuitiva.

Exemplo de Utilização
  • Painel de administração de um site, com links para gestão de produtos, pedidos, clientes e relatórios.
  • Sistema de gestão de conteúdos (CMS) com acesso a páginas e configurações.
  • Aplicação de gestão de projetos com navegação para tarefas, calendários, relatórios e membros da equipa.

Incorpore o componente Menu Lateral de Backoffice sempre que precisar organizar funcionalidades e seções de uma aplicação administrativa de forma clara e acessível, melhorando a usabilidade e a eficiência dos utilizadores na interface.

Exemplo

                                                    
<div class="gra-menuBackoffice">
    <div class="hamburgers">
        <i id="hamburgerMenuOpen" class="icon-menu hamburgerBackoffice"></i>
        <i id="hamburgerMenuClose" class="icon-times hamburgerBackoffice hamburger_close"></i>
    </div>
    <ul class="scrollUl">
        <li class="liOption">
            <a href="#">
                <i class="icon-task"></i>
                <div class="menuBckitem">Opção 1</div>
            </a>
        </li>
        <li class="liOption">
            <a href="#">
                <i class="icon-task"></i>
                <div class="count1 gra-badge danger">35</div>
                <div class="menuBckitem">
                    Opção 2
                    <div class="count2 gra-badge danger">35</div>
                </div>
            </a>
        </li>
        <li class="liOption">
            <a href="#">
                <i class="icon-task"></i>
                <div class="menuBckitem">Opção 3</div>
            </a>
        </li>
        <li class="liOption">
            <a href="#">
                <i class="icon-task"></i>
                <div class="count1 gra-badge danger">12</div>
                <div class="menuBckitem">
                    Opção 4
                    <div class="count2 gra-badge danger">12</div>
                </div>
            </a>
        </li>
        <li class="liOption">
            <a href="#">
                <i class="icon-task"></i>
                <div class="menuBckitem">Opção 5</div>
            </a>
        </li>
        <li class="withSub">
            <div class="uldiv">
                <i class="icon-task"></i>
                <div class="setinha liOption">
                    <div class="menuBckitem subitem">
                        <span class="spanoption">Opção 6</span>
                    </div>
                    <i class="icon-chevron-down-small image-down"></i>
                </div>
            </div>
            <ul class="subUl">
                <li class="liOption">
                    <a href="#">
                    <div class="menuBckitem">Sub-opção 1</div>
                    </a>
                </li>
                <li class="liOption">
                    <a href="#">
                        <div class="menuBckitem">Sub-opção 2</div>
                    </a>
                </li>
                <li class="liOption">
                    <a href="#">
                    <div class="menuBckitem">Sub-opção 3</div>
                    </a>
                </li>
                <li class="liOption">
                    <a href="#">
                        <div class="menuBckitem">Sub-opção 4</div>
                    </a>
                </li>
                <li class="withSub">
                    <div class="uldiv">
                        <div class="setinha liOption">
                            <div class="menuBckitem subitem">
                                <span class="spanoption">Sub-opção 5</span>
                            </div>
                            <i class="icon-chevron-down-small image-down"></i>
                        </div>
                    </div>
                    <ul class="subUl">
                        <li class="liOption">
                            <a href="#">
                                <div class="menuBckitem">Sub-sub-opção 1</div>
                            </a>
                        </li>
                        <li class="liOption">
                            <a href="#">
                                <div class="menuBckitem">Sub-sub-opção 2</div>
                            </a>
                        </li>
                        <li class="liOption">
                            <a href="#">
                                <div class="menuBckitem">Sub-sub-opção 3</div>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="liOption">
                    <a href="#">
                        <div class="menuBckitem">Sub-opção 6</div>
                    </a>
                </li>
            </ul>
        </li>
        <li class="liOption">
            <a href="#">
                <i class="icon-task"></i>
                <div class="menuBckitem">Opção 7</div>
            </a>
        </li>
        <li class="liOption">
            <a href="#">
                <i class="icon-task"></i>
                <div class="menuBckitem">Opção 8</div>
            </a>
        </li>
        <li class="liOption">
            <a href="#">
                <i class="icon-task"></i>
                <div class="menuBckitem">Opção 9</div>
            </a>
        </li>
        <li class="liOption">
            <a href="#">
                <i class="icon-task"></i>
                <div class="menuBckitem">Opção 10</div>
            </a>
        </li>
        <li class="liOption">
            <a href="#">
                <i class="icon-task"></i>
                <div class="menuBckitem">Opção 11</div>
            </a>
        </li>
        <li class="liOption">
            <a href="#">
                <i class="icon-task"></i>
                <div class="menuBckitem">Opção 12</div>
            </a>
        </li>
    </ul>
</div>