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 v3.4. It is responsive.

Navbar

Author Nick Girga

Tailwind v3.4 1.2k 1

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

Navbar with two CTA buttons

Juraj

1 year ago

2.3k
FinTech Banking Navbar with Trust Bar & Mobile Sidebar
A clean, enterprise-grade banking navigation bar built with pure HTML and Tailwind CSS. It features a trust announcement bar, responsive navigation, loan dropdown, secure call-to-action buttons, and a mobile sidebar. Perfect for fintech platforms, digital banks, insurance providers, investment firms, lending platforms, and financial service websites.

JUGENDRA GANGWAR

3 months ago

373
navbar in tailwindcss
it is a navbar for practise purpose

Md. Aynal Haque

11 months ago

735
Simple Responsive Navigation Bar w/Translation link
Minimal javascript - built using nested details element.

Sherry Lynne

2 months ago

137
Semi transparent navbar

Laurits

3 years ago

16.7k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Hamza Atig

1 year ago

2.5k
basichtml
this is basic html

Anonymous

1 year ago

927
Navbar with Dropdown
Navbar with dropdown

Razeem Razak

1 year ago

1.5k
Navbar with search
Use this example of a navbar element to also show a search input element that you can integrate for a site-wide search.

Mamadou Diouma II Bah

2 years ago

17k
Repsonsive Navbar
fully respondive navbar

Ganesh Salunke

7 months ago

491
Simple Responsive Navigation Bar
Minimal javascript - built using nested details element.

Sherry Lynne

2 months ago

240
Responsive NavBar Using CSS Only
A complete responsive navbar only using tailwind css

Shivam Vishwakarma

1 year ago

1.2k