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

800

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
Tailwind Navbar

Author:
Md. Tofayel islam

2 years ago

8k
Tailwind CSS Navbar
Logo on the left. Main menu with a mega menu under "Services". Responsive design with a hamburger menu for mobile devices. Mega menu appears on hover for desktop and toggles on click for mobile.

Author:
KULDEEP

9 months ago

1.3k
Hover Animated Navbar
Remove the bg-black in the outer div when using it. Hovering the button and each item in the navbar has a fun animation.

Author:
Coastal UI

1 year ago

3.6k
websitee

Author:
Anonymous

9 months ago

736
Responsive eCommerce Sidebar Layout with Hamburger Menu | Tailwind CSS UI for Online Stores
Build a clean and responsive eCommerce sidebar layout with a smooth hamburger menu using Tailwind CSS and Alpine.js. Ideal for devotional, spiritual, or modern online stores. Includes dark mode support, navigation links, cart, login, and a dynamic layout for beautiful product pages.

Author:
Rajesh Pandey

10 months ago

1.1k
Colourful NavBar by Itunu Ijila
Responsive Colorful Navbar with Tailwind CSS - Free HTML Template Modern, mobile-friendly navigation bar built with Tailwind CSS featuring vibrant gradient colors (purple, pink, red). Includes hamburger menu for mobile devices, smooth hover effects, and easy customization. Perfect for websites, landing pages, and web applications. Copy-paste ready HTML code with Tailwind CDN - no build process required. Fully responsive design that works on all screen sizes. Keywords: Tailwind CSS navbar, responsive navigation bar, colorful navbar template, HTML navbar component, mobile menu, gradient navbar, Tailwind navigation, free navbar template

Author:
Ijila Itunu

2 months ago

121
Best Responsive Navbar Design | Easy & Modern Navigation
Learn how to create a fully responsive navbar using HTML, CSS, and JavaScript. Perfect for beginners and developers looking for a modern, mobile-friendly navigation bar.

Author:
Vishvajeet

1 year ago

4.7k
modern portifolio
by salvator

Author:
Baraka Salvator

10 months ago

858
Responsive Navbar with TailwindCSS
responsive navbar built with TailwindCSS, perfect for mobile and desktop views

Author:
Rathanak Phan

1 year ago

1.8k
Tailwind Sidebar Layout (improved)
Improved Tailwind Sidebar Layout. - Responsive sidebar working - Close responsive sidebar working - Positioning menu-toggle correctly - Added some fresh icons - Added sub-items - showing on click - Added animation and swap on icons using 'peer'

Author:
Hielke Brandsma

1 year ago

3.5k
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Author:
Amit Pachange

1 year ago

15.1k
Modern page
hero page by salvator

Author:
Baraka Salvator

10 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components