Navs navbar

  • Side
  • Side-bar
  • Navmobi
  • Navbar

Side [ .side ]

Menu lateral com icones e texto. Texto só aparece no hover, e no mobile não aparece. Com ajustes de posicionamento: Esquerdo ou Direito;

Por padrão o posicionamento é a Esquerda. para colocar o posicionamento a direita acrescente na div aside a classe .sideb-right.

As cores e alguns ajustes do sideb, você pode fazer no arquivo swconfig.

                        
                        
                        <aside class="side">
                            <div class="side-header">
                                <i class="bx bxs-leaf"></i></a>
                                <h2>CodingLab</h2>
                            </div>
                            <ul class="side-links">
                                <h4><div class="menu-separator"></div></h4>
                                <li><a href="#">
                                    <i class="bx bx-home-alt-2"></i>Home</a>
                                </li>
                                <li><a href="#">
                                    <i class="bx bx-leaf"></i>Overview</a>
                                </li>
                                <li><a href="#">
                                    <i class="bx bx-buildings"></i>Analytic</a>
                                </li>
                                <h4><div class="menu-separator"></div></h4>
                                <li><a href="#">
                                    <i class="bx bx-comment-dots"></i>Comment</a>
                                </li>
                                <li><a href="#">
                                    <i class="bx bx-bowl-hot"></i>Groups</a>
                                </li>
                                <li><a href="#">
                                    <i class="bx bx-wifi-off"></i>Transfer</a>
                                </li>
                                <li><a href="#">
                                    <i class="bx bx-file-find"></i>All Reports</a>
                                </li>
                                <li><a href="#">
                                    <i class="bx bx-smile"></i>Notifications</a>
                                </li>

                                <h4><div class="menu-separator"></div></h4>
                                <li><a href="#">
                                    <i class="bx bx-smile"></i>Profile</a>
                                </li>
                                <li><a href="#">
                                    <i class="bx bx-gift"></i>Settings</a>
                                </li>
                            </ul>
                        </aside>

Sidebar [ .side-bar ]

SandroWeb Administrador

Dashboard
Tables
Sub item 01 Sub item 02 Sub item 03
Forms
Settings
Sub item 01 Sub item 02
About
              
                
                <!-- Botão -->
                <div class="side-bar-btn"><i class='bx bx-menu'></i></div>
                <!-- Side-bar -->
                <div class="side-bar">
                    <div class="header">
                        <div class="side-bar-close">
                            <i class='bx bx-x'></i>
                        </div>
                        <img src="img/progressive02.png" alt="">
                        <h1>SandroWeb <small>Administrador</small></h1>
                    </div>
                    <div class="menu">
                        <div class="item"><a href="" class="fcr"><i class='bx bx-home-alt-2'></i>Dashboard</a></div>
                        <div class="item"><a class="side-bar-sub-btn"><i class='bx bx-window-alt'></i>Tables
                                <i class='bx bx-chevron-right dropdown'></i>
                            </a>
                            <div class="sub-menu">
                                <a href="" class="sub-item fcr">Sub item 01</a>
                                <a href="" class="sub-item fcr">Sub item 02</a>
                                <a href="" class="sub-item fcr">Sub item 03</a>
                            </div>
                        </div>
                        <div class="item"><a href="" class="fcr"><i class='bx bx-user'></i>Forms</a></div>
                        <div class="item"><a class="side-bar-sub-btn"><i class='bx bx-buildings'></i>Settings
                                <i class='bx bx-chevron-right dropdown'></i>
                            </a>
                            <div class="sub-menu">
                                <a href="" class="sub-item fcr">Sub item 01</a>
                                <a href="" class="sub-item fcr">Sub item 02</a>
                            </div>
                        </div>
                        <div class="item"><a href="" class="fcr"><i class='bx bx-briefcase-alt-2'></i>About</a></div>
                    </div>
                </div>

NavMobi [ .navmobi ]

Navegador para parte inferior do site.

              
                
                <nav class="navmobi">
                    <ul class="navmobi__list">
                        <li>
                            <a href="#" class="navmobi__link active-link">
                                <i class='bx bx-home-alt-2'></i>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="navmobi__link">
                                <i class='bx bx-user'></i>
                            </a>
                        </li>
                        <li>
                            <button class="navmobi__expand" id="navmobi-expand">
                                <i class="bx bx-plus navmobi__expand-icon" id="navmobi-expand-icon"></i>
                            </button>
                            <ul class="navmobi__expand-list" id="navmobi-expand-list">
                                <li>
                                    <a href="#" class="navmobi__expand-link">
                                        <i class='bx bx-image-alt'></i>
                                        <span>Exe01</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="navmobi__expand-link">
                                        <i class='bx bx-photo-album'></i>
                                        <span>Exe04</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#" class="navmobi__link">
                                <i class='bx bx-briefcase-alt'></i>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="navmobi__link">
                                <i class='bx bx-library'></i>
                            </a>
                        </li>
                    </ul>
                </nav>

NavBar [ .navbar ]


              
                
                    <nav class="navbar">
                        <div class="logo_navbar">Meu Site 1</div>
                        <div class="toggle_navbar">&#9776;</div>
                        <ul class="menu_navbar">
                            <li><a href="#">Home</a></li>
                            <li>
                                <a href="#">Serviços <span class="arrow_navbar">&#9662;</span></a>
                                <ul class="submenu_navbar">
                                    <li><a href="#">Serviço 1</a></li>
                                    <li><a href="#">Serviço 2</a></li>
                                    <li><a href="#">Serviço 3</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Sobre</a></li>
                            <li><a href="#">Contato</a></li>
                        </ul>
                    </nav>