navegação simples botstrap 4

<h2>Navegação simples / abas</h2>

    <ul class="nav nav-pills flex-column">
        <li class="nav-item"><a href="" class="nav-link">HOME</a></li>
        <li class="nav-item"><a href="" class="nav-link active">HOME</a></li>
        <li class="nav-item"><a href="" class="nav-link">HOME</a></li>
    </ul>

    <h2>Barra de navegação com menu responsivo</h2>

 <nav class="navbar navbar-expand-md navbar-dark bg-dark">
        <a href="" class="navbar-brand">LOGO SITE</a>
            <button class="navbar-toggler" data-toggle="collapse" data-target="#nav-target">
                <span class="navbar-toggler-icon"></span>
            </button>
        <div class="collapse navbar-collapse" id="nav-target">
            <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a href="" class="nav-link">HOME</a>
            </li>
            <li class="nav-item">
                <a href="" class="nav-link">HOME</a>
            </li>
            <li class="nav-item">
                <a href="" class="nav-link">HOME</a>
            </li>
        </ul>
    </div>
    </nav>

    <h2>Barra de navegação com formulário</h2>

  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
        <a href="" class="navbar-brand">LOGO SITE</a>
            <button class="navbar-toggler" data-toggle="collapse" data-target="#nav-target2">
                <span class="navbar-toggler-icon"></span>
            </button>
        <div class="collapse navbar-collapse" id="nav-target2">
            <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a href="" class="nav-link">HOME</a>
            </li>
            <li class="nav-item">
                <a href="" class="nav-link">HOME</a>
            </li>
            <li class="nav-item">
                <a href="" class="nav-link">HOME</a>
            </li>
        </ul>
         <form class="form-inline">
            <input type="text" class="form-control" placeholder="Pesquisar...">
            <button class="btn btn-outline-success">OK</button>
        </form>

        </div>
    </nav>
    <h2>Barra de navegação com menu dropdown</h2>

    <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
        <a href="" class="navbar-brand">Dropdown</a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#nav-drop">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse" id="nav-drop">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a href="" class="nav-link">Home</a>
                </li>
                <li class="nav-item">
                    <a href="" class="nav-link">Serviços</a>
                </li>

                <li class="nav-item dropdown">
                    <a href="" class="nav-link dropdown-toggle" data-toggle="dropdown">Contato</a>
                    <div class="dropdown-menu">
                        <a href="" class="dropdown-item">LINK 1</a>
                        <a href="" class="dropdown-item">LINK 2</a>
                        <a href="" class="dropdown-item">LINK 3</a>
                    </div>
                </li>

            </ul>
        </div>
    </nav>
    <!--Cores
    opções: bg-primary, bg-secondary, bg-success, bg-info,
    bg-warning, bg-danger, bg-light, bg-dark
    -->
    <h2>Cores</h2>
     <nav class="navbar navbar-expand-md navbar-dark bg-primary">
        <a href="" class="navbar-brand">LOGO SITE</a>
            <button class="navbar-toggler" data-toggle="collapse" data-target="#nav-target">
                <span class="navbar-toggler-icon"></span>
            </button>
        <div class="collapse navbar-collapse" id="nav-target">
            <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a href="" class="nav-link">HOME</a>
            </li>
            <li class="nav-item">
                <a href="" class="nav-link">HOME</a>
            </li>
            <li class="nav-item">
                <a href="" class="nav-link">HOME</a>
            </li>
        </ul>
    </div>
    </nav>

    <!--Alinhamentos
    opções: fixed-top, fixed-bottom, sticky
    -->
    <h2>Alinhamentos</h2>

     <nav class="navbar navbar-expand-md navbar-dark bg-primary">
        <a href="" class="navbar-brand">LOGO SITE</a>
            <button class="navbar-toggler" data-toggle="collapse" data-target="#nav-target">
                <span class="navbar-toggler-icon"></span>
            </button>
        <div class="collapse navbar-collapse" id="nav-target">
            <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a href="" class="nav-link">HOME</a>
            </li>
            <li class="nav-item">
                <a href="" class="nav-link">HOME</a>
            </li>
            <li class="nav-item">
                <a href="" class="nav-link">HOME</a>
            </li>
        </ul>
    </div>
    </nav
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et libero id erat tristique fermentum placerat a erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed ac lobortis quam. Nunc vestibulum tincidunt arcu, at scelerisque velit ornare et. Vestibulum ut malesuada nibh.</p>