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

630

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
Navbar

Author:
TakaMorY

4 months ago

518
Responsive Navbar Example
A working example of the navbar

Author:
Noob

3 years ago

17k
navbar
navbar

Author:
SANJAY SINGH GARIYA

9 months ago

1.6k
beautifull web page
I create a web page using cloude ai its amazing.

Author:
Akram Khan

1 year ago

3k
vav bar
html , css

Author:
Hacker Development

7 months ago

897
material ios navbar mobile apple endroid
material ios navbar mobile apple endroid

Author:
Omer fils ELENGA

3 weeks ago

60
Production-Ready Responsive Navigation
This is a sample content area. Scroll down to see the fixed header in action.

Author:
zobaidul kaziex

1 year ago

3.5k
Minimalistic navbar
Responsive navbar

Author:
Sophia Baker

2 years ago

20.7k
Enhanced Modern Navbar
The navbar now feels premium and modern while maintaining all original functionality. The glassmorphism effect, smooth animations, and professional styling create a cutting-edge user experience that would fit perfectly on any modern website!

Author:
Rathanak Phan

6 months ago

676
portifolio
skills

Author:
ishimwe prince

7 months ago

749
Navbar compoent

Author:
Amit Pachange

2 years ago

16.5k
Navbar with social links
A header component with a logo, navigation links, and social media links.

Author:
Vikram Choudhary

2 years ago

7.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components