Navigation Drawer

Navigation drawers provide access to destinations and app functionality, such as switching accounts. They can be permanent, persistent, or modal.

Access all areas!

Standard Drawer

Persistent sidebar

A permanent drawer is always visible on the side of the screen. In M3, active states use a pill-shaped highlight.

Rence

Pro Edition

Core

Management

Standard Material 3 drawers use 280px width and rounded corner pill-shapes for active navigation items.

Google Style Pill!

HTML

<!-- Standard Navigation Drawer (Permanent or Persistent) -->
<div class="nav-drawer shadow-sm bg-white" style="width:280px; height:100vh;">
  <div class="drawer-header px-4 py-4 d-flex align-items-center gap-3">
    <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center" style="width:40px;height:40px;">R</div>
    <div>
      <h6 class="mb-0 fw-bold">Rence Material</h6>
      <small class="text-muted">v1.5.0</small>
    </div>
  </div>
  
  <div class="drawer-content py-2">
    <div class="px-4 py-2 small fw-bold text-uppercase text-muted" style="letter-spacing:0.1em; font-size:0.7rem;">Main</div>
    <ul class="nav flex-column mb-3">
      <li class="nav-item">
        <a class="nav-link active d-flex align-items-center gap-3 px-4 py-2" href="#">
          <i class="material-icons">dashboard</i> Dashboard
        </a>
      </li>
      <li class="nav-item px-2">
        <a class="nav-link d-flex align-items-center gap-3 px-3 py-2 text-dark rounded-pill" href="#">
          <i class="material-icons">people</i> Team
        </a>
      </li>
    </ul>
  </div>
</div>

Modal Drawer

On mobile, drawers slide in over content. Use our .btn-fab to trigger critical navigation.

Mobile friendly!

HTML

<!-- Modal Navigation Drawer (Triggered by hamburger) -->
<div class="modal fade modal-drawer" id="navDrawer" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down ps-0 ms-0" style="max-width:300px;">
    <div class="modal-content h-100 rounded-0 border-0">
      <!-- Content same as above -->
    </div>
  </div>
</div>