Nav

Use .glass-nav when you need navigation bar styling on a non-<nav> element.

Preview

Usage

<div class="glass-nav">
  <strong>AppName</strong>
  <div>
    <a href="#">Home</a>
    <a href="#">Settings</a>
  </div>
</div>

CSS Properties

Property	Value
Background	var(--glass-bg) with backdrop-filter: blur(var(--glass-blur))
Border	1px solid var(--glass-border)
Border Radius	var(--glass-radius-md) (14px)
Padding	0.75rem 1.5rem
Layout	display: flex; justify-content: space-between; align-items: center
Width	100%
Depth	Specular glare + ambient shadow

Difference from Semantic <nav>

The .glass-nav class is nearly identical to the semantic <nav> styling, but does not include the max-width: 800px and auto-margin centering that the semantic <nav> applies. This makes .glass-nav more flexible for full-width layouts.

Compatible Modifiers

• .thin — lighter glass
• .thick — heavier frost