Header & Footer

Generic structural bars that work inside any flex-column container: page, drawer, card, modal, sheet. Use .header for top bars and .footer for bottom bars.

Header

App Header (Ionic-style Toolbar)

Preview

<div style="display:flex; flex-direction:column; height:100%;">
  <header class="header">
    <div class="flex items-center gap-2">
      <button class="btn btn-sm btn-ghost btn-circle">
        <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" /></svg>
      </button>
      <span class="font-semibold text-base">My App</span>
    </div>
    <div class="flex items-center gap-1">
      <button class="btn btn-sm btn-ghost btn-circle">
        <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" /></svg>
      </button>
      <button class="btn btn-sm btn-ghost btn-circle">
        <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" /></svg>
      </button>
      <button class="btn btn-sm btn-ghost btn-circle">
        <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z" /></svg>
      </button>
    </div>
  </header>
  <div style="flex:1; background:var(--color-base-200);"></div>
</div>

Requires: ux.min.css

<div style="display:flex; flex-direction:column; height:100%;">
  <header class="w-full flex items-center justify-between shrink-0 gap-2 px-4 py-3 min-h-12 border-b border-base-300 bg-base-100">
    <div class="flex items-center gap-2">
      <button class="btn btn-sm btn-ghost btn-circle">
        <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" /></svg>
      </button>
      <span class="font-semibold text-base">My App</span>
    </div>
    <div class="flex items-center gap-1">
      <button class="btn btn-sm btn-ghost btn-circle">
        <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" /></svg>
      </button>
      <button class="btn btn-sm btn-ghost btn-circle">
        <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" /></svg>
      </button>
      <button class="btn btn-sm btn-ghost btn-circle">
        <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z" /></svg>
      </button>
    </div>
  </header>
  <div style="flex:1; background:var(--color-base-200);"></div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

Header with Back Button & Title

Preview

<div style="display:flex; flex-direction:column; height:100%;">
  <header class="header">
    <button class="btn btn-sm btn-ghost">
      <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg>
      Back
    </button>
    <span class="font-semibold">Settings</span>
    <button class="btn btn-sm color-primary">Save</button>
  </header>
  <div style="flex:1; background:var(--color-base-200);"></div>
</div>

Requires: ux.min.css

<div style="display:flex; flex-direction:column; height:100%;">
  <header class="w-full flex items-center justify-between shrink-0 gap-2 px-4 py-3 min-h-12 border-b border-base-300 bg-base-100">
    <button class="btn btn-sm btn-ghost">
      <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg>
      Back
    </button>
    <span class="font-semibold">Settings</span>
    <button class="btn btn-sm color-primary">Save</button>
  </header>
  <div style="flex:1; background:var(--color-base-200);"></div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

Header with Color

Preview

<div style="display:flex; flex-direction:column; height:100%;">
  <header class="header color-primary">
    <span class="font-semibold">Primary Header</span>
    <button class="btn btn-sm btn-ghost">Action</button>
  </header>
  <div style="flex:1; background:var(--color-base-200);"></div>
  <header class="header color-neutral" style="border-bottom:none; border-top:var(--border) solid var(--color-base-300);">
    <span class="font-semibold">Neutral Header</span>
    <button class="btn btn-sm btn-ghost">Action</button>
  </header>
</div>

Requires: ux.min.css

<div style="display:flex; flex-direction:column; height:100%;">
  <header class="w-full flex items-center justify-between shrink-0 gap-2 px-4 py-3 min-h-12 border-b border-primary bg-primary text-primary-content">
    <span class="font-semibold">Primary Header</span>
    <button class="btn btn-sm btn-ghost">Action</button>
  </header>
  <div style="flex:1; background:var(--color-base-200);"></div>
  <header class="w-full flex items-center justify-between shrink-0 gap-2 px-4 py-3 min-h-12 border-t border-neutral bg-neutral text-neutral-content">
    <span class="font-semibold">Neutral Header</span>
    <button class="btn btn-sm btn-ghost">Action</button>
  </header>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

Glass Header

Preview

<div style="background: linear-gradient(135deg, oklch(0.55 0.22 250), oklch(0.55 0.20 280)); display:flex; flex-direction:column; height:100%;">
  <header class="header glass">
    <span class="font-semibold">Glass Header</span>
    <button class="btn btn-sm glass">Action</button>
  </header>
  <div style="flex:1;"></div>
</div>

Requires: ux.min.css

<div style="background: linear-gradient(135deg, oklch(0.55 0.22 250), oklch(0.55 0.20 280)); display:flex; flex-direction:column; height:100%;">
  <header class="w-full flex items-center justify-between shrink-0 gap-2 px-4 py-3 min-h-12 bg-glass-bg backdrop-blur-glass backdrop-saturate-180 border-b border-glass-border">
    <span class="font-semibold">Glass Header</span>
    <button class="btn btn-sm glass">Action</button>
  </header>
  <div style="flex:1;"></div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

Header No Border

Preview

<div style="display:flex; flex-direction:column; height:100%;">
  <header class="header no-border">
    <span class="font-semibold">No Border</span>
    <button class="btn btn-sm btn-ghost">Action</button>
  </header>
  <div style="flex:1; background:var(--color-base-200);"></div>
</div>

Requires: ux.min.css

<div style="display:flex; flex-direction:column; height:100%;">
  <header class="w-full flex items-center justify-between shrink-0 gap-2 px-4 py-3 min-h-12 bg-base-100">
    <span class="font-semibold">No Border</span>
    <button class="btn btn-sm btn-ghost">Action</button>
  </header>
  <div style="flex:1; background:var(--color-base-200);"></div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

Footer

Web Footer

Preview

<div style="display:flex; flex-direction:column; height:100%;">
  <div style="flex:1; background:var(--color-base-200);"></div>
  <footer class="footer" style="flex-wrap: wrap; justify-content: center; gap: 1rem;">
    <div class="flex items-center gap-4 text-sm text-base-content/60">
      <a href="#" class="hover:text-base-content transition-colors">About</a>
      <a href="#" class="hover:text-base-content transition-colors">Privacy</a>
      <a href="#" class="hover:text-base-content transition-colors">Terms</a>
      <a href="#" class="hover:text-base-content transition-colors">Contact</a>
    </div>
    <span class="text-xs text-base-content/40">&copy; 2026 My Company. All rights reserved.</span>
  </footer>
</div>

Requires: ux.min.css

<div style="display:flex; flex-direction:column; height:100%;">
  <div style="flex:1; background:var(--color-base-200);"></div>
  <footer class="w-full flex items-center shrink-0 flex-wrap justify-center gap-4 px-4 py-3 border-t border-base-300 bg-base-100">
    <div class="flex items-center gap-4 text-sm text-base-content/60">
      <a href="#" class="hover:text-base-content transition-colors">About</a>
      <a href="#" class="hover:text-base-content transition-colors">Privacy</a>
      <a href="#" class="hover:text-base-content transition-colors">Terms</a>
      <a href="#" class="hover:text-base-content transition-colors">Contact</a>
    </div>
    <span class="text-xs text-base-content/40">&copy; 2026 My Company. All rights reserved.</span>
  </footer>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

Footer as Toolbar (Action Bar)

Preview

<div style="display:flex; flex-direction:column; height:100%;">
  <div style="flex:1; background:var(--color-base-200);"></div>
  <footer class="footer">
    <button class="btn btn-sm color-primary">Save</button>
    <button class="btn btn-sm btn-ghost">Discard</button>
    <div style="flex:1"></div>
    <button class="btn btn-sm btn-outline">Preview</button>
    <button class="btn btn-sm color-primary">Publish</button>
  </footer>
</div>

Requires: ux.min.css

<div style="display:flex; flex-direction:column; height:100%;">
  <div style="flex:1; background:var(--color-base-200);"></div>
  <footer class="w-full flex items-center shrink-0 gap-2 px-4 py-3 border-t border-base-300 bg-base-100">
    <button class="btn btn-sm color-primary">Save</button>
    <button class="btn btn-sm btn-ghost">Discard</button>
    <div class="flex-1"></div>
    <button class="btn btn-sm btn-outline">Preview</button>
    <button class="btn btn-sm color-primary">Publish</button>
  </footer>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

Footer with Color

Preview

<div style="display:flex; flex-direction:column; height:100%;">
  <footer class="footer color-primary" style="border-top:none; border-bottom:var(--border) solid var(--color-base-300);">
    <span class="font-semibold text-sm">Primary Footer</span>
    <div style="flex:1"></div>
    <button class="btn btn-sm btn-ghost">Action</button>
  </footer>
  <div style="flex:1; background:var(--color-base-200);"></div>
  <footer class="footer color-neutral">
    <span class="font-semibold text-sm">Neutral Footer</span>
    <div style="flex:1"></div>
    <button class="btn btn-sm btn-ghost">Action</button>
  </footer>
</div>

Requires: ux.min.css

<div style="display:flex; flex-direction:column; height:100%;">
  <footer class="w-full flex items-center shrink-0 gap-2 px-4 py-3 border-b border-primary bg-primary text-primary-content">
    <span class="font-semibold text-sm">Primary Footer</span>
    <div class="flex-1"></div>
    <button class="btn btn-sm btn-ghost">Action</button>
  </footer>
  <div style="flex:1; background:var(--color-base-200);"></div>
  <footer class="w-full flex items-center shrink-0 gap-2 px-4 py-3 border-t border-neutral bg-neutral text-neutral-content">
    <span class="font-semibold text-sm">Neutral Footer</span>
    <div class="flex-1"></div>
    <button class="btn btn-sm btn-ghost">Action</button>
  </footer>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

Glass Footer

Preview

<div style="background: linear-gradient(135deg, oklch(0.55 0.22 250), oklch(0.55 0.20 280)); display:flex; flex-direction:column; height:100%;">
  <div style="flex:1;"></div>
  <footer class="footer glass">
    <span class="text-sm font-semibold">Glass Footer</span>
    <div style="flex:1"></div>
    <button class="btn btn-sm glass">Action</button>
  </footer>
</div>

Requires: ux.min.css

<div style="background: linear-gradient(135deg, oklch(0.55 0.22 250), oklch(0.55 0.20 280)); display:flex; flex-direction:column; height:100%;">
  <div style="flex:1;"></div>
  <footer class="w-full flex items-center shrink-0 gap-2 px-4 py-3 bg-glass-bg backdrop-blur-glass backdrop-saturate-180 border-t border-glass-border">
    <span class="text-sm font-semibold">Glass Footer</span>
    <div class="flex-1"></div>
    <button class="btn btn-sm glass">Action</button>
  </footer>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

Website Footer (Scrollable, 3 Columns)

Preview

Welcome

Scroll down to see the website footer. Unlike the fixed .footer toolbar, this footer lives inside the scrollable content area and moves with the page.

<div class="page" style="height:100%;">
  <header class="header">
    <span class="font-semibold">My Website</span>
    <button class="btn btn-sm btn-ghost">Login</button>
  </header>
  <main class="content">
    <div class="p-6">
      <h2 style="font-size:1.25rem; font-weight:bold; margin-bottom:0.5rem;">Welcome</h2>
      <p style="color:var(--color-base-content); opacity:0.7;">Scroll down to see the website footer. Unlike the fixed .footer toolbar, this footer lives inside the scrollable content area and moves with the page.</p>
    </div>
    <!-- Website footer — inside .content so it scrolls -->
    <footer style="background:var(--color-neutral); color:var(--color-neutral-content); padding:2rem 1.5rem 1.5rem; margin-top:auto;">
      <div style="display:grid; grid-template-columns:repeat(3, 1fr); gap:2rem; margin-bottom:1.5rem;">
        <div>
          <h4 style="font-weight:600; font-size:0.875rem; margin-bottom:0.75rem;">Product</h4>
          <div style="display:flex; flex-direction:column; gap:0.375rem; font-size:0.8125rem; opacity:0.7;">
            <a href="#" style="color:inherit;">Features</a>
            <a href="#" style="color:inherit;">Pricing</a>
            <a href="#" style="color:inherit;">Changelog</a>
            <a href="#" style="color:inherit;">Docs</a>
          </div>
        </div>
        <div>
          <h4 style="font-weight:600; font-size:0.875rem; margin-bottom:0.75rem;">Company</h4>
          <div style="display:flex; flex-direction:column; gap:0.375rem; font-size:0.8125rem; opacity:0.7;">
            <a href="#" style="color:inherit;">About</a>
            <a href="#" style="color:inherit;">Blog</a>
            <a href="#" style="color:inherit;">Careers</a>
            <a href="#" style="color:inherit;">Contact</a>
          </div>
        </div>
        <div>
          <h4 style="font-weight:600; font-size:0.875rem; margin-bottom:0.75rem;">Legal</h4>
          <div style="display:flex; flex-direction:column; gap:0.375rem; font-size:0.8125rem; opacity:0.7;">
            <a href="#" style="color:inherit;">Privacy</a>
            <a href="#" style="color:inherit;">Terms</a>
            <a href="#" style="color:inherit;">Cookies</a>
            <a href="#" style="color:inherit;">Licenses</a>
          </div>
        </div>
      </div>
      <div style="border-top:1px solid rgba(255,255,255,0.15); padding-top:1rem; font-size:0.75rem; opacity:0.5; text-align:center;">
        &copy; 2026 My Company. All rights reserved.
      </div>
    </footer>
  </main>
</div>

Requires: ux.min.css

<div class="flex flex-col h-full bg-base-100">
  <header class="w-full flex items-center justify-between shrink-0 gap-2 px-4 py-3 min-h-12 border-b border-base-300 bg-base-100">
    <span class="font-semibold">My Website</span>
    <button class="btn btn-sm btn-ghost">Login</button>
  </header>
  <main class="flex-1 min-h-0 overflow-y-auto flex flex-col">
    <div class="p-6">
      <h2 class="text-xl font-bold mb-2">Welcome</h2>
      <p class="text-base-content/70">Scroll down to see the website footer. Unlike the fixed .footer toolbar, this footer lives inside the scrollable content area and moves with the page.</p>
    </div>
    <!-- Website footer — inside scrollable content, not fixed -->
    <footer class="bg-neutral text-neutral-content px-6 pt-8 pb-6 mt-auto">
      <div class="grid grid-cols-3 gap-8 mb-6">
        <div>
          <h4 class="font-semibold text-sm mb-3">Product</h4>
          <div class="flex flex-col gap-1.5 text-[0.8125rem] opacity-70">
            <a href="#" class="text-inherit">Features</a>
            <a href="#" class="text-inherit">Pricing</a>
            <a href="#" class="text-inherit">Changelog</a>
            <a href="#" class="text-inherit">Docs</a>
          </div>
        </div>
        <div>
          <h4 class="font-semibold text-sm mb-3">Company</h4>
          <div class="flex flex-col gap-1.5 text-[0.8125rem] opacity-70">
            <a href="#" class="text-inherit">About</a>
            <a href="#" class="text-inherit">Blog</a>
            <a href="#" class="text-inherit">Careers</a>
            <a href="#" class="text-inherit">Contact</a>
          </div>
        </div>
        <div>
          <h4 class="font-semibold text-sm mb-3">Legal</h4>
          <div class="flex flex-col gap-1.5 text-[0.8125rem] opacity-70">
            <a href="#" class="text-inherit">Privacy</a>
            <a href="#" class="text-inherit">Terms</a>
            <a href="#" class="text-inherit">Cookies</a>
            <a href="#" class="text-inherit">Licenses</a>
          </div>
        </div>
      </div>
      <div class="border-t border-white/15 pt-4 text-xs opacity-50 text-center">
        &copy; 2026 My Company. All rights reserved.
      </div>
    </footer>
  </main>
</div>

Requires: tw.min.css

// No JavaScript required - this footer is just HTML inside the scrollable content area.
// Unlike the fixed .footer toolbar, it scrolls with the page naturally.
// Use margin-top: auto to push it to the bottom when content is short.

Inside a Page

Full Page Layout

Preview

Page content goes here. The header stays at the top and footer at the bottom.

<div class="page" style="height: 300px;">
  <header class="header">
    <button class="btn btn-sm btn-ghost btn-circle">
      <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" /></svg>
    </button>
    <span class="font-semibold">My App</span>
    <button class="btn btn-sm btn-ghost btn-circle">
      <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z" /></svg>
    </button>
  </header>
  <main class="content">
    <div class="p-4">
      <p>Page content goes here. The header stays at the top and footer at the bottom.</p>
    </div>
  </main>
  <footer class="footer">
    <span class="text-xs text-base-content/50">&copy; 2026 My App</span>
    <div style="flex:1"></div>
    <button class="btn btn-sm color-primary">Action</button>
  </footer>
</div>

Requires: ux.min.css

<div class="grid grid-rows-[auto_1fr_auto] h-75 bg-base-100">
  <header class="w-full flex items-center justify-between shrink-0 gap-2 px-4 py-3 min-h-12 border-b border-base-300 bg-base-100">
    <button class="btn btn-sm btn-ghost btn-circle">
      <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" /></svg>
    </button>
    <span class="font-semibold">My App</span>
    <button class="btn btn-sm btn-ghost btn-circle">
      <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z" /></svg>
    </button>
  </header>
  <main class="overflow-y-auto">
    <div class="p-4">
      <p>Page content goes here. The header stays at the top and footer at the bottom.</p>
    </div>
  </main>
  <footer class="w-full flex items-center shrink-0 gap-2 px-4 py-3 border-t border-base-300 bg-base-100">
    <span class="text-xs text-base-content/50">&copy; 2026 My App</span>
    <div class="flex-1"></div>
    <button class="btn btn-sm color-primary">Action</button>
  </footer>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS structural components
// .header and .footer work inside .page, .drawer, .card, .modal, etc.

Reference

Class	Description
.header	Top bar — flex, space-between, border-bottom, width 100%
.footer	Bottom bar — flex, border-top
.content	Scrollable body between header/footer
.header.glass / .footer.glass	Glassmorphism variant
.header.no-border / .footer.no-border	Remove border
.color-*	Color composition (primary, neutral, etc.)

Tip: .header and .footer are generic structural primitives. They work inside any flex-column container: .page, .drawer, .card, .modal, etc. For iOS-style bottom tab navigation, combine .footer with the .tabbar modifier.