proNew238 lines · framer-motion

Navbar Sidebar Drawer

A slim bar, one button, a drawer that actually stays in its lane. A minimal top bar with just a logo and a menu button, opening a side drawer with stacked nav links over a dimmed scrim. The drawer and scrim are absolutely positioned inside the block's own framed card, so they never escape into the page or break an embedded preview.

Use it for: Product shells, docs sites or marketing pages that want the chrome out of the way and a single clear entry point into navigation, on desktop and mobile alike.
Themes: Light + dark
License: Commercial use

Live

Orbiq

Workspace

Everything your team is tracking, in one calm view.

Projects, approvals and release notes live side by side, so nobody has to go ask what shipped.

Plan the week

Lay out what each project needs before standup.

Review changes

See every open change next to the notes that explain it.

Ship with notes

Every release carries a short, human changelog.

tsx

"use client";

import * as React from "react";
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

/**
 * A slim top bar (logo + a single menu button) that opens a side drawer with
 * stacked nav links. The drawer and its scrim are `absolute` inside the
 * section's own framed card, never `fixed` or portaled, so they stay inside
 * the block at any embed scale.
 */

export interface NavLink {
  label: string;

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→Clicking the menu button toggles a role="dialog" drawer that slides in from side (left or right) with a spring-eased transform, plus a dimmed scrim behind it; both are absolute inside the card, never fixed or portaled, so they stay inside the section's rounding at any embed scale.
→Escape, clicking the scrim, clicking a nav link, or the explicit close button all close the drawer and return focus to the menu button.
→On open, focus moves to the drawer's close button; on close, focus returns to the button that opened it.
→defaultOpen is re-applied via a useEffect whenever the prop changes, so the preview controls can snap the drawer open/closed without a click.
→Identical DOM and behaviour at 390px and at desktop widths — there's no separate mobile/desktop drawer implementation.
→No continuous animation loop: all motion is finite enter/exit transitions, so there's nothing to pause offscreen; prefers-reduced-motion drops the slide transform and shortens fades to a near-instant cross-fade.

Accessibility

✓Drawer has `role="dialog"`, `aria-modal="true"` and `aria-label`; the menu button has `aria-expanded` and `aria-controls` pointing at it.
✓Escape key closes the drawer from anywhere on the page; focus is sent to the close button on open and restored to the menu button on close.
✓Scrim is `aria-hidden` and purely a click target; all real links and buttons remain in the tab order and keep visible focus rings from the design system.
✓Honours prefers-reduced-motion.