<uizy-header>

The main application header, positioned below the system bar.

Attributes

Attribute	Description
shadow	Shadow intensity (1-24)
clip-left	Add left margin for sidebar
clip-right	Add right margin for sidebar

Usage

<uizy-header shadow="12">
  <button>Menu</button>
  <h1>My App</h1>
  <button>Settings</button>
</uizy-header>

CSS Variables

Variable	Default	Description
--uizy-header-height	56px	Height of the header
--uizy-header-layer	20	z-index

info

The header uses flexbox with space-between by default.

Examples

Basic Header

<uizy-header shadow="12">
  <span>Logo</span>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
  </nav>
  <button>Login</button>
</uizy-header>

Header with Sidebar Clipping

When you want the header to respect sidebar widths:

<uizy-header shadow="12" clip-left clip-right>
  Content stays between sidebars
</uizy-header>

Styled Header

<uizy-header shadow="12">
  <div class="header-left">
    <button id="menu">☰</button>
    <span>Dashboard</span>
  </div>
  <div class="header-right">
    <button>🔔</button>
    <button>👤</button>
  </div>
</uizy-header>

<style>
  uizy-header {
    background: #fff;
    padding: 0 1rem;
  }
  .header-left,
  .header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
</style>