OktoStrap

OktoStrap

Navbar

Barra de navegação principal

<nav class="navbar navbar-dark bg-primary">

    <div>
        <button class="btn btn-primary mr-1" type="button">
            <i class="material-icons">menu</i>
        </button>
    
        <a class="navbar-brand" href="#">
            <img src="/assets/images/logo-okto-white.png" alt="OKTO" height="26">
            <span class="navbar-brand-text d-none d-sm-inline">Nome do módulo</span>
        </a>
    </div>

    <ul class="navbar-nav">
        <li class="nav-item">
            <button class="btn btn-primary" type="button">
                <i class="material-icons">notifications</i>
            </button>
        </li>
        <li class="nav-item">
            <div class="dropdown">
                <button class="btn btn-primary dropdown-toggle" 
                    type="button" 
                    id="dropdownMenuButton" 
                    data-toggle="dropdown" 
                    aria-haspopup="true" 
                    aria-expanded="false">
                    <i class="material-icons">account_circle</i>
                    <span class="d-none d-sm-inline">Pedro</span>
                </button>

                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown-item" href="#">Perfil</a>
                    <a class="dropdown-item" href="#">Configurações</a>
                    <a class="dropdown-item" href="#">Sair</a>
                </div>
            </div>
        </li>
    </ul>
</nav>