Animated React menus, tabs and navigation

Sidebar nav

An app sidebar that folds to a slim rail of icons. Labels blur away while the icons hold still, badges turn into dots, and one tooltip slides from row to row.

Navigation, press and hover, Motion

Install

npm i clsx motion tailwind-merge && curl -o components/sidebar-nav.tsx https://motion-brew.com/r/sidebar-nav.tsx

One self contained file for React and Tailwind CSS: sidebar-nav.tsx. Or ask your AI agent to add it through the MCP server.

Usage

import { SidebarNav } from "@/components/sidebar-nav";

export default function Shell({ children }: { children: React.ReactNode }) {
  const [page, setPage] = React.useState("home");
  return (
    <div className="flex h-dvh gap-4 bg-zinc-50 p-4">
      <SidebarNav
        value={page}
        onNavigate={setPage}
        sections={[
          {
            label: "Workspace",
            items: [
              { id: "home", label: "Home", icon: "home" },
              { id: "messages", label: "Messages", icon: "messages", badge: 4 },
              {
                id: "projects",
                label: "Projects",
                icon: "projects",
                children: [
                  { id: "website", label: "Website refresh" },
                  { id: "mobile", label: "Mobile app" },
                ],
              },
            ],
          },
        ]}
      />
      <main className="flex-1">{children}</main>
    </div>
  );
}

Props

Prop	Type	Default	Description
brand	string	"Lumen"	Wordmark beside the logo
logo	ReactNode	a pinwheel mark	Logo mark, about 28px; it stays on the slim rail
sections	{ label?; items }[]	Workspace, Automation	Each item is { id; label; icon; badge?; tag?; children? }; icon is home, search, messages, projects, analytics, calendar, agents, workflows, integrations, apps, explore, team or bell
value	string		Controlled page id
defaultValue	string	"home"	Starting page id
onNavigate	(id) => void		Called with the page or child id
defaultOpen	string[]	["projects"]	Groups open at the start
collapsed	boolean		Controlled slim rail
defaultCollapsed	boolean	false	Start on the slim rail
onCollapsedChange	(collapsed) => void		Called when the rail folds or opens
user	{ name; email?; avatar? }	Jordan Lee	The account row at the bottom
onSettings	() => void		Called by the settings button
className	string		Placement and height; it fills its parent's height by default

More navigation

Context menu: Right click the card for a menu where every icon animates.
Profile menu: A workspace profile menu where every icon has its own micro interaction as you hover its row.
Pill tabs: Tabs whose white pill slides like a rubber band, stretching and thinning, then settling, with a motion blur that follows its speed.
Action menu: A dropdown where every action answers back: the highlight slides between items, copy draws a check, download bounces and washes a light gray fill across, links nudge their arrow.

All animated react menus, tabs and navigation