Cara membuat menu sidebar bootstrap

Simple Sidebar

A toggleable, simple sidebar template for Bootstrap 5 featuring a responsive sidebar navigation menu and a top navigation bar

   
    DMT
 
 

Pada baris kode diatas terdapat komentar Sidebar sebagai menu navigasi dan MAIN sebagai tempat semua konten berada.

Selanjutnya kita berikan CSS seperti berikut untuk memberikan warna yang sesuai agar terlihat lebih rapi.

#body-row {
    margin-left:0;
    margin-right:0;
}
#sidebar-container {
    min-height: 100vh;   
    background-color: #333;
    padding: 0;
}

.sidebar-expanded {
    width: 230px;
}
.sidebar-collapsed {
    width: 60px;
}

#sidebar-container .list-group a {
    height: 50px;
    color: white;
}

#sidebar-container .list-group .sidebar-submenu a {
    height: 45px;
    padding-left: 30px;
}
.sidebar-submenu {
    font-size: 0.9rem;
}

.sidebar-separator-title {
    background-color: #333;
    height: 35px;
}
.sidebar-separator {
    background-color: #333;
    height: 25px;
}
.logo-separator {
    background-color: #333;    
    height: 60px;
}

#sidebar-container .list-group .list-group-item[aria-expanded="false"] .submenu-icon::after {
  content: " \f0d7";
  font-family: FontAwesome;
  display: inline;
  text-align: right;
  padding-left: 10px;
}

#sidebar-container .list-group .list-group-item[aria-expanded="true"] .submenu-icon::after {
  content: " \f0da";
  font-family: FontAwesome;
  display: inline;
  text-align: right;
  padding-left: 10px;
}

Baiklah teman teman, kiranya nanti akan terlihat seperti ini

Demikian artikel tentang cara membuat collapsible sidebar pada bootstrap 4. Semoga bermanfaat.

No data.