Navigation

The <nav> element is automatically styled as a glassmorphic navigation bar. No classes required.

Basic Usage

Drop a <nav> element with content and it receives: glass material, depth shadows, flex layout with space-between, and rounded corners.

<nav>
  <strong>Brand</strong>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Automatic <ul> Styling Inside <nav>

When a <ul> is placed inside a <nav>, it automatically becomes:

• list-style: none (no bullet points)
• display: flex with gap: 1.5rem
• align-items: center

This means you don’t need to add any flex classes to create a horizontal link list.

CSS Details

The semantic <nav> applies:

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
Max Width	800px, centered with margin: 0 auto 2rem
Depth	Specular glare + ambient shadow via glass-depth()

Utility Class Alternative

For non-semantic elements, use .glass-nav:

<div class="glass-nav">
  <span>Logo</span>
  <div>Menu items</div>
</div>

See the Nav component page for full details on the .glass-nav class.