Animated Mobile Navbar

atlas-ui/animated-mobile-navbar-html-demo

FreeExample

Example showcasing the Animated Mobile Navbar component in HTML, CSS, JavaScript and Motion.

Live preview

live · rendered by the registry

Rendered by atlas-ui on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://atlasui.dev/r/animated-mobile-navbar-html-demo.json

Source

registry/html/examples/animated-mobile-navbar-html-demo/index.htmlatlasui.dev/r/animated-mobile-navbar-html-demo.json

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>Animated Mobile Navbar - Atlas UI</title>
7    <link rel="stylesheet" href="style.css" />
8  </head>
9  <body>
10    <button id="menu-trigger" class="menu-trigger">☰</button>
11 
12    <div id="mobile-menu" class="mobile-menu">
13      <button id="menu-close" class="menu-close">✖</button>
14      <nav class="menu-links">
15        <a href="#" class="nav-link">Home</a>
16        <a href="#" class="nav-link">About</a>
17        <a href="#" class="nav-link">Services</a>
18        <a href="#" class="nav-link">Portfolio</a>
19        <a href="#" class="nav-link">Contact</a>
20      </nav>
21    </div>
22  </body>
23  <script type="module" src="script.js"></script>
24</html>

What it pulls in

npm packages

motion

Other registry items

https://atlasui.dev/r/animated-mobile-navbar-html.json

Files it writes

registry/html/examples/animated-mobile-navbar-html-demo/index.html
registry/html/examples/animated-mobile-navbar-html-demo/style.css
registry/html/examples/animated-mobile-navbar-html-demo/script.js

More from atlas-ui

All 99 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
Animated Mobile Navbar Demoanimated-mobile-navbar-demo	atlas-ui	Examples	Free	no deps
Animated Mobile Navbar Side Exampleanimated-mobile-navbar-side-example	atlas-ui	Examples	Free	no deps
Blend Mouse Trailer Demoblend-mouse-trailer-demo	atlas-ui	Examples	Free	no deps
Blend Mouse Trailerblend-mouse-trailer-html-demo	atlas-ui	Examples	Free	no deps · 3 files
Blob Mouse Trailer Demoblob-mouse-trailer-demo	atlas-ui	Examples	Free	no deps
Blob Mouse Trailerblob-mouse-trailer-html-demo	atlas-ui	Examples	Free	no deps · 3 files
Box Reveal Demobox-reveal-demo	atlas-ui	Examples	Free	no deps
Box Revealbox-reveal-html-demo	atlas-ui	Examples	Free	1 dep · 3 files