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

110

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

Responsive navbar with dark mode support
Sidebar on small screen devices

Author:
TailwindFlex

2 years ago

17.5k
vav bar
html , css

Author:
Hacker Development

1 month ago

51
Responsive Tailwind CSS Navbar
A clean and professional navigation bar built with Tailwind CSS. This component includes a logo, navigation links, and a mobile menu with a toggle button for smaller screens. Fully responsive and easy to integrate into any project. Ideal for portfolios, business websites, or modern web apps.

Author:
irahoza daniel

3 weeks ago

124
Navbar with two CTA buttons

Author:
Juraj

4 months ago

757
Daystar Day care Dashboard
Daystar Day care Dashboard

Author:
Paul Livingstone Ssenoga

1 year ago

8.4k
Modern Website Header & Footer
I created a professional header and footer using HTML and Tailwind CSS with modern design elements, smooth animations, and interactive features.

Author:
Rathanak Phan

2 days ago

54
Responsive Header

Author:
Rajesh Maheshwari

3 months ago

656
Minimalistic navbar
Responsive navbar

Author:
Sophia Baker

2 years ago

19.2k
Tesla Navbar
a tesla navbar

Author:
Cristian

7 months ago

1.6k
Basic Auto-Hiding Navbar

Author:
Anonymous

6 months ago

1.5k
Navigation bar
Navbar

Author:
Aman kumar

1 year ago

3.4k
Tailwind Sidebar Layout

Author:
Junior Gauze

7 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components