Navbar

Brand

Membuat Navbar sama seperti di dokumentasi navbar Bootstrap, hanya saja perlu menambahkan class .navbar--white setelah class .navbar. Jika kamu ingin menggunakan Brand (Merek Produk) pada Navbar, kamu memerlukan tag <a> dengan class .navbar-brand, lalu didalamnya kamu bisa langsung memasukkan text untuk nama Brand, atau memasukkan Gambar dengan tag <img>, dan jangan lupa untuk mengatur lebar dari Gambar-nya menggunakan attribute width.

CopyHTML
<nav class="navbar navbar--white">
    <a class="navbar-brand" href="#">
        Navbar
    </a>
</nav>
<nav class="navbar navbar--white">
    <a class="navbar-brand" href="#">
        <img src="[host mu]/dist/img/Reza_Admin.svg" width="120" alt="logo reza">
    </a>
</nav>

Link Navigasi

Membuat Link Navigasi sama seperti dokumentasi navbar Bootstrap pada bagian Nav. Untuk membuat link berwarna merah ketika link di hover, tambahkan class .nav-link--hover-red setelah class .nav-link. Untuk memposisikan Link Navigasi di sebelah kanan, tambahkan class .justify-content-end setelah class .navbar-collapse, pembahasan detail mengenai class .justify-content-end dan class lainnya, lihat dokumentasi flex utilities Bootsrap. Untuk membuat penanda bahwa Navbar Item sedang aktif kamu bisa menambahkan class .nav-item--active setelah class .nav-item.

CopyHTML
<nav class="navbar navbar-expand-sm navbar--white">
    <a class="navbar-brand" href="#">
        <img src="[host mu]/dist/img/Reza_Admin.svg" width="120" alt="logo reza">
    </a>
    <button class="navbar-toggler" data-target="#navbarNav1" data-toggle="collapse" type="button">
        <span class="fa fa-navicon"></span>
    </button>
    <!-- link navigasi -->
    <div class="collapse navbar-collapse" id="navbarNav1">
        <ul class="navbar-nav">
            <li class="nav-item nav-item--active"><a class="nav-link" href="#">About</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Medsos</a></li>
        </ul>
    </div>
    <!-- link navigasi -->
</nav>

<nav class="navbar navbar-expand-sm navbar--white">
    <a class="navbar-brand" href="#">
        <img src="[host mu]/dist/img/Reza_Admin.svg" width="120" alt="logo reza">
    </a>
    <button class="navbar-toggler" data-target="#navbarNav2" data-toggle="collapse" type="button">
        <span class="fa fa-navicon"></span>
    </button>
    <!-- link navigasi -->
    <div class="collapse navbar-collapse justify-content-end" id="navbarNav2">
        <ul class="navbar-nav">
            <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
            <li class="nav-item">
                <a class="nav-link nav-link--hover-red" href="#"><span class="fa fa-sign-out"></span> Logout</a>
            </li>
        </ul>
    </div>
    <!-- link navigasi -->
</nav>

Icon Notifikasi

Membuat Icon Notifikasi kamu hanya perlu menambahkan class .navbar__notification setelah class .nav-item, lalu didalam tag <a> dengan class .nav-link, pertama buat element menggunakan tag <span> untuk menampilkan icon dari Font Awesome, kedua, dibawah span icon buat element menggunakan tag <span> dengan class .navbar__notification-number dan diikuti dengan class style untuk notifikasi-nya, ada .navbar__notification-number--blue, .navbar__notification-number--green, .navbar__notification-number--orange dan .navbar__notification-number--red, didalamnya kamu bisa memasukkan angka sebagai representasi dari jumlah notifikasi.

CopyHTML
<nav class="navbar navbar-expand-lg navbar--white">
    <a class="navbar-brand" href="#">
        <img src="[host mu]/dist/img/Reza_Admin.svg" width="120" alt="logo reza">
    </a>
    <button class="navbar-toggler" data-target="#navbarNav3" data-toggle="collapse" type="button">
        <span class="fa fa-navicon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-end" id="navbarNav3">
        <ul class="navbar-nav">
            <!-- icon notifikasi -->
            <li class="nav-item navbar__notification">
                <a class="nav-link" href="#">
                    <span class="fa fa-bookmark"></span>
                    <span class="navbar__notification-number navbar__notification-number--blue">2</span>
                </a>
            </li>
            <li class="nav-item navbar__notification">
                <a class="nav-link " href="#">
                    <span class="fa fa-bell"></span>
                    <span class="navbar__notification-number navbar__notification-number--orange">2</span>
                </a>
            </li>
            <li class="nav-item navbar__notification">
                <a class="nav-link" href="#">
                    <span class="fa fa-envelope"></span>
                    <span class="navbar__notification-number navbar__notification-number--green">9+</span>
                </a>
            </li>
            <li class="nav-item navbar__notification">
                <a class="nav-link" href="#">
                    <span class="fa fa-gear"></span>
                    <span class="navbar__notification-number navbar__notification-number--red">9+</span>
                </a>
            </li>
            <!-- icon notifikasi -->
            <li class="nav-item">
                <a class="nav-link nav-link--hover-red" href="#">
                    <span class="fa fa-sign-out"></span> Logout
                </a>
            </li>
        </ul>
    </div>
</nav>

Avatar

Membuat Avatar kamu perlu menambahkan class .navbar__avatar setelah class .nav-item, kemudian didalam tag a, tambahkan foto menggunakan tag <img> dan dibawah foto tambahkan text menggunakan tag <span>.

CopyHTML
<nav class="navbar navbar-expand-lg navbar--white">
    <a class="navbar-brand" href="#">
        <img src="[host mu]/dist/img/Reza_Admin.svg" width="120" alt="logo reza">
    </a>
    <button class="navbar-toggler" data-target="#navbarNav4" data-toggle="collapse" type="button">
        <span class="fa fa-navicon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-end" id="navbarNav4">
        <ul class="navbar-nav">
            <!-- navbar avatar -->
            <li class="nav-item navbar__avatar">
                <a class="nav-link" href="#">
                    <img src="[host mu]/dist/img/reza.jpg" alt="avatar image">
                    <span>Reza Sariful Fikri</span>
                </a>
            </li>
            <!-- navbar avatar -->
            <li class="nav-item">
                <a class="nav-link nav-link--hover-red" href="#">
                    <span class="fa fa-sign-out"></span> Logout
                </a>
            </li>
        </ul>
    </div>
</nav>

Dropdown

Membuat Dropdown hampir sama dengan dokumentasi dropdown Bootstrap. Untuk membuat penanda bahwa Dropdown Item sedang aktif tambahkan class .dropdown-item--active setelah class .dropdown-item. Untuk membuat warna Dropdown Item ketika dihover menjadi merah, tambahkan class .dropdown-item--hover-red setelah class .dropdown-item.

CopyHTML
<nav class="navbar navbar-expand-lg navbar--white">
    <a class="navbar-brand" href="#"><img src="[host mu]/dist/img/Reza_Admin.svg" width="120" alt="logo reza"></a>
    <button class="navbar-toggler" data-target="#navbarNav5" data-toggle="collapse" type="button">
        <span class="fa fa-navicon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-end" id="navbarNav5">
        <ul class="navbar-nav">
            <li class="nav-item navbar__notification">
                <a class="nav-link" href="#">
                    <span class="fa fa-bookmark"></span>
                    <span class="navbar__notification-number navbar__notification-number--blue">2</span>
                </a>
            </li>
            <li class="nav-item navbar__notification">
                <a class="nav-link " href="#">
                    <span class="fa fa-bell"></span>
                    <span class="navbar__notification-number navbar__notification-number--orange">2</span>
                </a>
            </li>
            <!-- dropdown -->
            <li class="nav-item navbar__avatar dropdown">
                <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
                    <img src="[host mu]/dist/img/reza.jpg" alt="avatar image">
                    <span>Reza Sariful Fikri</span>
                </a>
                <div class="dropdown-menu dropdown-menu-right">
                    <a href="" class="dropdown-item dropdown-item--active">Settings Account</a>
                    <div class="dropdown-divider"></div>
                    <a href="" class="dropdown-item dropdown-item--hover-red">Logout <span class="fa fa-sign-out"></span></a>
                </div>
            </li>
            <!-- dropdown -->
        </ul>
    </div>
</nav>

Toggler

Membuat Navbar Toggler sama dengan dokumentasi navbar toggler Bootstrap.

CopyHTML
<nav class="navbar navbar-expand-lg navbar--white">
    <a class="navbar-brand" href="#">
        <img src="[host mu]/dist/img/Reza_Admin.svg" width="120" alt="logo reza">
    </a>
    <button class="navbar-toggler" data-target="#navbarNav5" data-toggle="collapse" type="button">
        <span class="fa fa-navicon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-end" id="navbarNav5">
        <ul class="navbar-nav">
            <li class="nav-item navbar__notification">
                <a class="nav-link" href="#">
                    <span class="fa fa-bookmark"></span>
                    <span class="navbar__notification-number navbar__notification-number--blue">2</span>
                </a>
            </li>
            <li class="nav-item navbar__notification">
                <a class="nav-link " href="#">
                    <span class="fa fa-bell"></span>
                    <span class="navbar__notification-number navbar__notification-number--orange">2</span>
                </a>
            </li>
            <li class="nav-item navbar__avatar">
                <a class="nav-link" href="#">
                    <img src="[host mu]/dist/img/reza.jpg" alt="avatar image">
                    <span>Reza Sariful Fikri</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link nav-link--hover-red" href="#">
                    <span class="fa fa-sign-out"></span> Logout
                </a>
            </li>
        </ul>
    </div>
</nav>