Home
Nick Girga
Material 3 AppBar [Light]

Material 3 AppBar [Light]

A navbar/appbar that conforms to Google's Material 3 design guidelines

This tailwind example is contributed by Nick Girga, on 18-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Navbar

Author Nick Girga

273

Fork Fullscreen

<div class="appbar drop-shadow-xl">
      <div class="appbar-start-box px-2">
        <button class="btn btn-appbar p-3">
          <span class="material-symbols-outlined">menu</span>
        </button>
      </div>
      <div class="appbar-center-box">
        <span class="appbar-heading px-16">My App</span>
      </div>
      <div class="appbar-end-box px-2">
        <button class="btn btn-appbar p-3">
          <span class="material-symbols-outlined">more_vert</span>
        </button>
      </div>
    </div>

<div class="appbar drop-shadow-xl">
      <div class="appbar-start-box px-2">
        <button class="btn btn-appbar p-3">
          <span class="material-symbols-outlined">arrow_back</span>
        </button>
        <span class="appbar-heading">Details</span>
      </div>
      <div class="appbar-end-box px-2">
        <button class="btn btn-appbar p-3">
          <span class="material-symbols-outlined">share</span>
        </button>
        <button class="btn btn-appbar p-3">
          <span class="material-symbols-outlined">account_circle</span>
        </button>
      </div>
    </div>

<div class="appbar drop-shadow-xl">
      <div class="appbar-start-box px-2">
        <button class="btn btn-appbar p-3 sm:hidden">
          <span class="material-symbols-outlined">menu</span>
        </button>
        <span class="appbar-heading sm:ml-4">Inbox</span>
      </div>
      <div class="appbar-end-box px-2">
        <button class="btn btn-appbar p-3">
          <span class="material-symbols-outlined">attach_file</span>
        </button>
        <button class="btn btn-appbar p-3">
          <span class="material-symbols-outlined">calendar_month</span>
        </button>
        <button class="btn btn-appbar p-3">
          <span class="material-symbols-outlined">more_vert</span>
        </button>
      </div>
    </div>

<div class="appbar drop-shadow-xl">
      <div class="appbar-start-box px-2">
        <button class="btn btn-appbar p-3">
          <span class="material-symbols-outlined">arrow_back</span>
        </button>
        <span class="appbar-heading pr-16">Crop Photo</span>
      </div>
      <div class="appbar-end-box px-2">
        <button class="btn px-5 py-3">
          <span class="material-symbols-outlined">check</span>
        </button>
      </div>
    </div>

<div class="appbar drop-shadow-xl">
      <div class="appbar-start-box px-2">
        <button class="btn btn-appbar p-3">
          <span class="material-symbols-outlined">arrow_back</span>
        </button>
        <span class="appbar-heading">Meals</span>
      </div>
      <div class="appbar-end-box px-2">
        <button class="btn p-3">
          <span class="material-symbols-outlined">add</span>
        </button>
      </div>
    </div>

<div class="appbar drop-shadow-xl">
      <div class="appbar-start-box px-2">
        <button class="btn btn-appbar p-3">
          <span class="material-symbols-outlined">arrow_back</span>
        </button>
        <span class="appbar-heading">Places</span>
      </div>
      <div class="appbar-end-box px-2">
        <button class="btn btn-tonal p-3">
          <span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">bookmark</span>
        </button>
      </div>
    </div>

</div>
</body>

Related Examples