Feat: Add glass navbar component#1273
Merged
SAPTARSHI-coder merged 7 commits intoJun 4, 2026
Merged
Conversation
Contributor
📊 CSS Bundle Size BenchmarkThis PR changes the size of
|
Contributor
Author
|
hey @SAPTARSHI-coder pls review my pr nd merge it |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Pull Request Description
Adds a reusable glass navbar component to EaseMotion CSS with a built-in backdrop blur effect, sticky positioning support, and a stronger blur variant. The update includes a demo section in demo.html and documentation in README.md.
Type of Change
Closes #1272
Submission Checklist
submissions/examples/your-feature-name/Feature Description
What does this add?
Introduces a new
ease-navbar-glasscomponent with glassmorphism styling, plusease-navbar-glass-stickyandease-navbar-glass-blurmodifiers for sticky and enhanced blur variants.How does a developer use it?
Why does it fit EaseMotion CSS?
This aligns with EaseMotion CSS’s human-readable naming and CSS-only component approach. It builds on the existing glassmorphism card pattern while providing a reusable navigation container with responsive layout, accessibility-friendly focus styling, and graceful fallback for browsers without
backdrop-filter.Demo
Browser Testing
Notes for Maintainer