Preview
The tab bar is position: fixed at the bottom of the viewport. Below is a static preview:
Usage
<div class="glass-tab-bar">
<a href="/" class="tab-item active">
<span class="tab-icon">🏠</span>
Home
</a>
<a href="/search" class="tab-item">
<span class="tab-icon">🔍</span>
Search
</a>
<a href="/profile" class="tab-item">
<span class="tab-icon">👤</span>
Profile
</a>
</div>
Structure
| Element / Class | Purpose |
|---|
.glass-tab-bar | Fixed bottom bar with heavy blur and rounded corners |
.tab-item | Individual tab link |
.tab-item.active | Currently selected tab (accent color + active background) |
.tab-icon | Icon element (1.25rem, small bottom margin) |
Behavior
| State | Effect |
|---|
| Default | Secondary text color |
| Hover | Text brightens, background slightly highlights, translateY(-1px) |
| Active | translateY(0) scale(0.97) |
| Selected (.active) | Accent color, active background, inset shadow |
CSS Details
| Property | Value |
|---|
| Position | fixed, bottom: 1.5rem, centered with left: 50%; transform: translateX(-50%) |
| Background | Heavy blur (--glass-blur-thick) |
| Border Radius | var(--glass-radius-xl) (32px) |
| Padding | 0.4rem 0.8rem |
| Z-index | 950 |
| Shadow | Enhanced depth with 0 12px 40px |
| Max Width | 90% |
Compatible Modifiers
.thin / .thick — material weight.vibrant — accent tint.glow — outer glow