Skip to content

Feat: Add glass navbar component #1273

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SAPTARSHI-coder merged 7 commits into from
Jun 4, 2026
Merged

Feat: Add glass navbar component #1273

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3e46f29
feat: add glass navbar component
codedbydollys10 Jun 4, 2026
08ac803
Merge branch 'main' into feat/glass-navbar-component
codedbydollys10 Jun 4, 2026
d71de49
Update readme
codedbydollys10 Jun 4, 2026
0876a9d
Resolve merge conflict
codedbydollys10 Jun 4, 2026
65a4bb7
Rebuild minified CSS bundle
codedbydollys10 Jun 4, 2026
de34155
fix(examples): close .demo-mobile-frame CSS block to fix rcurly error
codedbydollys10 Jun 4, 2026
d1916cb
fixed the demo.html with ci lint failure
codedbydollys10 Jun 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -461,6 +461,39 @@ Example showcase:
<div class="ease-card ease-card-accent">Highlighted card</div>
```

### Navigation

```html
<nav class="ease-navbar-glass" aria-label="Primary navigation">
<div class="ease-navbar-brand">EaseMotion</div>
<div class="ease-navbar-menu">
<a class="ease-navbar-item" href="#">Home</a>
<a class="ease-navbar-item" href="#">Features</a>
<a class="ease-navbar-item" href="#">Contact</a>
</div>
</nav>
```

```html
<nav class="ease-navbar-glass ease-navbar-glass-sticky" aria-label="Sticky navigation">
<div class="ease-navbar-brand">Sticky Nav</div>
<div class="ease-navbar-menu">
<a class="ease-navbar-item" href="#">Overview</a>
<a class="ease-navbar-item" href="#">Docs</a>
</div>
</nav>
```

```html
<nav class="ease-navbar-glass ease-navbar-glass-blur" aria-label="Blurred navbar">
<div class="ease-navbar-brand">Deep Blur</div>
<div class="ease-navbar-menu">
<a class="ease-navbar-item" href="#">Product</a>
<a class="ease-navbar-item" href="#">Support</a>
</div>
</nav>
```

### Build a Hero Section in 5 Lines

```html
Expand Down
100 changes: 100 additions & 0 deletions components/navbar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
/* ============================================================
EaseMotion CSS — navbar.css
Reusable glass navbar component styles
============================================================ */

.ease-navbar-glass {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--ease-space-4);
padding: var(--ease-space-4) var(--ease-space-6);
min-height: 4rem;
width: 100%;
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.24);
border-radius: var(--ease-radius-xl);
box-shadow: var(--ease-shadow-md);
color: var(--ease-color-neutral-900);
backdrop-filter: blur(var(--ease-navbar-glass-blur, 16px));
-webkit-backdrop-filter: blur(var(--ease-navbar-glass-blur, 16px));
transition:
background-color var(--ease-speed-medium) var(--ease-ease),
border-color var(--ease-speed-medium) var(--ease-ease),
box-shadow var(--ease-speed-medium) var(--ease-ease);
}

.ease-navbar-glass > * {
z-index: 1;
}

.ease-navbar-glass a,
.ease-navbar-glass button {
color: inherit;
}

.ease-navbar-glass .ease-navbar-brand {
font-weight: 700;
letter-spacing: -0.02em;
}

.ease-navbar-glass .ease-navbar-menu {
display: flex;
flex-wrap: wrap;
gap: var(--ease-space-4);
align-items: center;
justify-content: flex-end;
}

.ease-navbar-glass .ease-navbar-item {
text-decoration: none;
color: rgba(15, 23, 42, 0.92);
font-size: var(--ease-text-sm);
font-weight: 500;
transition: color var(--ease-speed-fast) var(--ease-ease);
}

.ease-navbar-glass .ease-navbar-item:hover,
.ease-navbar-glass .ease-navbar-item:focus-visible {
color: var(--ease-color-neutral-900);
outline: none;
}

.ease-navbar-glass-sticky {
position: sticky;
top: 0;
z-index: var(--ease-z-overlay);
}

.ease-navbar-glass-blur {
--ease-navbar-glass-blur: 24px;
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.2);
box-shadow: var(--ease-shadow-xl);
}

@supports not (backdrop-filter: blur(0)) {
.ease-navbar-glass,
.ease-navbar-glass-blur {
background: rgba(255, 255, 255, 0.92);
border-color: rgba(15, 23, 42, 0.12);
}
}

@media (max-width: 640px) {
.ease-navbar-glass {
justify-content: space-between;
padding: var(--ease-space-4);
}

.ease-navbar-glass .ease-navbar-menu {
width: 100%;
justify-content: flex-start;
}

.ease-navbar-glass .ease-navbar-item {
flex: 1 1 120px;
min-width: 120px;
}
}
1 change: 1 addition & 0 deletions easemotion.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
/* ── Components (tree-shakeable in future versions) ──────── */
@import "./components/buttons.css";
@import "./components/cards.css";
@import "./components/navbar.css";

/* Accessibility: Respect user's reduced motion preference */
@media (prefers-reduced-motion: reduce) {
Expand Down
2 changes: 1 addition & 1 deletion easemotion.min.css
View file
Open in desktop

Large diffs are not rendered by default.

86 changes: 83 additions & 3 deletions examples/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
<link rel="stylesheet" href="../core/utilities.css" />
<link rel="stylesheet" href="../components/buttons.css" />
<link rel="stylesheet" href="../components/cards.css" />
<link rel="stylesheet" href="../components/navbar.css" />
<link rel="stylesheet" href="../components/scroll-progress.css" />

<style>
Expand Down Expand Up @@ -390,6 +391,27 @@
border: none;
}

.demo-navbar-sticky-frame {
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--ease-radius-lg);
overflow: hidden;
margin-bottom: var(--ease-space-10);
background: rgba(255,255,255,0.03);
}

.demo-navbar-scroll-content {
padding: var(--ease-space-5);
color: rgba(255,255,255,0.7);
font-size: var(--ease-text-sm);
line-height: 1.75;
background: rgba(15, 14, 23, 0.75);
}

.demo-mobile-frame {
max-width: 420px;
margin-top: var(--ease-space-6);
}

@media (max-width: 640px) {
.demo-nav {
padding: var(--ease-space-3) 0;
Expand Down Expand Up @@ -528,7 +550,7 @@ <h2 class="demo-section-title">Buttons Matrix</h2>
</div>
<!-- Sizing grid across Colors-->
<div class="demo-chip">// 2. Sizing Scale(small to extra large)</div>
<div class="ease-grid ease-gap-4" style="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));" margin-bottom: var(--ease-space-8);">
<div class="ease-grid ease-gap-4" style="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: var(--ease-space-8);">
<div class="ease-flex ease-flex-direction-column ease-gap-2">
<span class="tag" style="width: max-content;">ease-btn-sm</span>
<div class="ease-flex ease-gap-2 ease-items-center">
Expand Down Expand Up @@ -608,7 +630,7 @@ <h2 class="demo-section-title">Buttons Matrix</h2>
<button class="ease-btn ease-btn-primary ease-squish-button">Squish Me </button>
</div> -->

<!-- Shapes & States
<!-- Shapes & States -->
<div class="demo-chip">// Pill · Disabled · Loading</div>
<div class="ease-flex ease-flex-wrap ease-items-center ease-gap-3">
<button class="ease-btn ease-btn-primary ease-btn-pill">Pill Shape</button>
Expand Down Expand Up @@ -830,6 +852,64 @@ <h3 class="ease-card-title">Neumorphic Card</h3>
</div>
</section>

<section id="navbars" class="demo-section">
<div class="ease-container">
<div class="demo-section-label">Navigation</div>
<h2 class="demo-section-title">Glass Navbar</h2>
<p class="demo-section-desc">
A glassy navbar wrapper with strong blur, sticky positioning, and a responsive mobile menu layout.
</p>

<div class="demo-chip">// Basic glass navbar</div>
<nav class="ease-navbar-glass" aria-label="Primary navigation">
<div class="ease-navbar-brand">EaseMotion</div>
<div class="ease-navbar-menu">
<a class="ease-navbar-item" href="#">Home</a>
<a class="ease-navbar-item" href="#">Features</a>
<a class="ease-navbar-item" href="#">Pricing</a>
<a class="ease-navbar-item" href="#">Contact</a>
</div>
</nav>

<div class="demo-chip">// Sticky glass navbar</div>
<div class="demo-navbar-sticky-frame">
<nav class="ease-navbar-glass ease-navbar-glass-sticky" aria-label="Sticky section navigation">
<div class="ease-navbar-brand">Sticky EaseMotion</div>
<div class="ease-navbar-menu">
<a class="ease-navbar-item" href="#">Overview</a>
<a class="ease-navbar-item" href="#">Docs</a>
<a class="ease-navbar-item" href="#">Support</a>
</div>
</nav>
<div class="demo-navbar-scroll-content">
Scroll this page to see the sticky navbar remain pinned at the top of the viewport while content moves beneath it.
</div>
</div>

<div class="demo-chip">// Enhanced blur variant</div>
<nav class="ease-navbar-glass ease-navbar-glass-blur" aria-label="Blur variant navigation">
<div class="ease-navbar-brand">Deep Blur</div>
<div class="ease-navbar-menu">
<a class="ease-navbar-item" href="#">Product</a>
<a class="ease-navbar-item" href="#">Design</a>
<a class="ease-navbar-item" href="#">Contact</a>
</div>
</nav>

<div class="demo-chip">// Mobile responsive example</div>
<div class="demo-mobile-frame">
<nav class="ease-navbar-glass" aria-label="Mobile navigation preview">
<div class="ease-navbar-brand">Mobile Nav</div>
<div class="ease-navbar-menu">
<a class="ease-navbar-item" href="#">Home</a>
<a class="ease-navbar-item" href="#">Services</a>
<a class="ease-navbar-item" href="#">Work</a>
</div>
</nav>
</div>
</div>
</section>

<hr class="demo-divider" />

<!-- ═════════════════════════════════════════════════════
Expand Down Expand Up @@ -1149,4 +1229,4 @@ <h2 class="demo-section-title">Flexible Layouts</h2>
</script>

</body>
</html>
</html>
Loading