Toolbar Menu

A morphing toolbar that expands into a panel for each tab. The bar collapses to an icon-only strip when no tab is selected, then grows to reveal content as a directional slide.

Dependencies

SafeAnimatePresence

motion

motion.ts

import {
  Bell01,
  BookOpen01,
  Home01,
  Settings01,
  ShieldTick,
} from '@untitledui-pro/icons/solid';

import { ToolbarMenu } from '@/components/toolbar-menu';

export const meta = {
  layout: 'padded',
} as const;

const tabs = [
  { label: 'Dashboard', icon: <Home01 className="size-4" /> },
  {
    label: 'Notifications',
    icon: <Bell01 className="size-4" />,
  },
  { label: 'Settings', icon: <Settings01 className="size-4" /> },
  {
    label: 'Changelog',
    icon: <BookOpen01 className="size-4" />,
  },
  {
    label: 'Security',
    icon: <ShieldTick className="size-4" />,
  },
];

export default function ToolbarMenuPreview() {
  return (
    <div className="absolute bottom-0 left-0 flex w-full items-end justify-center pb-10">
      <ToolbarMenu>
        <ToolbarMenu.Container>
          <ToolbarMenu.Panels>
            {tabs.map((_, i) => (
              <ToolbarMenu.Panel key={i} index={i}>
                <div className="flex min-h-32 items-center justify-center text-foreground/30 text-sm">
                  {/* content goes here */}
                </div>
              </ToolbarMenu.Panel>
            ))}
          </ToolbarMenu.Panels>

          <ToolbarMenu.Bar>
            <ToolbarMenu.Tabs>
              {tabs.map((tab, i) => (
                <ToolbarMenu.Tab
                  key={tab.label}
                  index={i}
                  icon={tab.icon}
                  label={tab.label}
                />
              ))}
            </ToolbarMenu.Tabs>
          </ToolbarMenu.Bar>
        </ToolbarMenu.Container>
      </ToolbarMenu>
    </div>
  );
}

Toggle

Tooltip