{"id":610,"date":"2026-06-24T17:52:46","date_gmt":"2026-06-24T10:52:46","guid":{"rendered":"https:\/\/www.bisasoftware.id\/2026\/?p=610"},"modified":"2026-06-25T14:41:45","modified_gmt":"2026-06-25T07:41:45","slug":"bab-8-navbar-bootstrap","status":"publish","type":"post","link":"https:\/\/www.bisasoftware.id\/2026\/bab-8-navbar-bootstrap\/","title":{"rendered":"BAB 8 – NAVBAR BOOTSTRAP"},"content":{"rendered":"\n

Tujuan Pembelajaran<\/h2>\n\n\n\n

Setelah mempelajari bab ini peserta mampu:<\/p>\n\n\n\n

    \n
  1. Memahami fungsi Navbar.<\/li>\n\n\n\n
  2. Membuat menu navigasi website.<\/li>\n\n\n\n
  3. Membuat Navbar responsif.<\/li>\n\n\n\n
  4. Membuat menu mobile otomatis.<\/li>\n<\/ol>\n\n\n\n
    \n\n\n\n

    A. Apa Itu Navbar?<\/h1>\n\n\n\n

    Navbar (Navigation Bar) adalah komponen yang digunakan untuk menampilkan menu navigasi website.<\/p>\n\n\n\n

    Contoh menu website:<\/p>\n\n\n\n

    Beranda | Profil | Jurusan | Galeri | Kontak<\/code><\/pre>\n\n\n\n
    Navbar biasanya ditempatkan di bagian atas website.<\/p>\n\n\n\n
    \n\n\n\n
    B. Struktur Dasar Navbar<\/h1>\n\n\n\n
    <nav class=\"navbar navbar-expand-lg navbar-dark bg-primary\">

    <div class=\"container\">

    <a class=\"navbar-brand\" href=\"#\">
    SMK Negeri 1
    <\/a>

    <\/div>

    <\/nav><\/code><\/pre>\n\n\n\n
    Penjelasan:<\/p>\n\n\n\n
    Class<\/th>Fungsi<\/th><\/tr><\/thead>
    navbar<\/td>Mengaktifkan Navbar Bootstrap<\/td><\/tr>
    navbar-expand-lg<\/td>Navbar akan collapse pada layar kecil<\/td><\/tr>
    navbar-dark<\/td>Warna teks terang<\/td><\/tr>
    bg-primary<\/td>Background biru<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    \n\n\n\n
    Praktik 1<\/h1>\n\n\n\n
    Membuat Navbar Sederhana<\/h2>\n\n\n\n
    <nav class=\"navbar navbar-expand-lg navbar-dark bg-primary\">

    <div class=\"container\">

    <a class=\"navbar-brand\" href=\"#\">

    SMK Hebat Indonesia

    <\/a>

    <\/div>

    <\/nav><\/code><\/pre>\n\n\n\n
    \n\n\n\n
    C. Menambahkan Menu<\/h1>\n\n\n\n
    <nav class=\"navbar navbar-expand-lg navbar-dark bg-primary\">

    <div class=\"container\">

    <a class=\"navbar-brand\" href=\"#\">
    SMK Hebat
    <\/a>

    <ul class=\"navbar-nav\">

    <li class=\"nav-item\">
    <a class=\"nav-link\" href=\"#\">
    Beranda
    <\/a>
    <\/li>

    <li class=\"nav-item\">
    <a class=\"nav-link\" href=\"#\">
    Profil
    <\/a>
    <\/li>

    <li class=\"nav-item\">
    <a class=\"nav-link\" href=\"#\">
    Kontak
    <\/a>
    <\/li>

    <\/ul>

    <\/div>

    <\/nav><\/code><\/pre>\n\n\n\n
    \n\n\n\n
    D. Navbar Responsif<\/h1>\n\n\n\n
    Bootstrap menyediakan tombol hamburger otomatis.<\/p>\n\n\n\n
    <button class=\"navbar-toggler\"
    type=\"button\"
    data-bs-toggle=\"collapse\"
    data-bs-target=\"#menu\">

    <span class=\"navbar-toggler-icon\"><\/span>

    <\/button><\/code><\/pre>\n\n\n\n
    \n\n\n\n
    Praktik 2<\/h1>\n\n\n\n
    Navbar Lengkap Responsif<\/h2>\n\n\n\n
    <nav class=\"navbar navbar-expand-lg navbar-dark bg-dark\">

    <div class=\"container\">

    <a class=\"navbar-brand\" href=\"#\">

    Sistem Akademik

    <\/a>

    <button class=\"navbar-toggler\"
    type=\"button\"
    data-bs-toggle=\"collapse\"
    data-bs-target=\"#menu\">

    <span class=\"navbar-toggler-icon\"><\/span>

    <\/button>

    <div class=\"collapse navbar-collapse\"
    id=\"menu\">

    <ul class=\"navbar-nav ms-auto\">

    <li class=\"nav-item\">
    <a class=\"nav-link\" href=\"#\">
    Beranda
    <\/a>
    <\/li>

    <li class=\"nav-item\">
    <a class=\"nav-link\" href=\"#\">
    Data Siswa
    <\/a>
    <\/li>

    <li class=\"nav-item\">
    <a class=\"nav-link\" href=\"#\">
    Guru
    <\/a>
    <\/li>

    <li class=\"nav-item\">
    <a class=\"nav-link\" href=\"#\">
    Logout
    <\/a>
    <\/li>

    <\/ul>

    <\/div>

    <\/div>

    <\/nav><\/code><\/pre>\n\n\n\n
    \n\n\n\n
    Latihan Bab <\/h1>\n\n\n\n
      \n
    1. Apa fungsi Navbar?<\/li>\n\n\n\n
    2. Apa fungsi navbar-expand-lg?<\/li>\n\n\n\n
    3. Apa fungsi navbar-brand?<\/li>\n\n\n\n
    4. Apa fungsi navbar-toggler?<\/li>\n\n\n\n
    5. Mengapa Navbar perlu responsif?<\/li>\n<\/ol>\n\n\n\n
      \n\n\n\n
      Tugas Praktik Bab <\/h1>\n\n\n\n
      Buat Navbar sekolah yang berisi:<\/p>\n\n\n\n
        \n
      • Beranda<\/li>\n\n\n\n
      • Profil<\/li>\n\n\n\n
      • Jurusan<\/li>\n\n\n\n
      • Prestasi<\/li>\n\n\n\n
      • Galeri<\/li>\n\n\n\n
      • Kontak<\/li>\n<\/ul>\n\n\n\n
        <\/p>\n","protected":false},"excerpt":{"rendered":"
        Tujuan Pembelajaran Setelah mempelajari bab ini peserta mampu: A. Apa Itu Navbar? Navbar (Navigation Bar) adalah komponen yang digunakan untuk…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[20],"tags":[35],"class_list":["post-610","post","type-post","status-publish","format-standard","hentry","category-tutorial-bootstrap","tag-tutorial-bootstrap"],"_links":{"self":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/610","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/comments?post=610"}],"version-history":[{"count":2,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/610\/revisions"}],"predecessor-version":[{"id":632,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/610\/revisions\/632"}],"wp:attachment":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/media?parent=610"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/categories?post=610"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/tags?post=610"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}