Nyx UI

Navigation 2

A floating icon toolbar that springs open to reveal a content panel above the active icon.

Navigation 2 is a floating icon toolbar that expands into a content panel: click an icon and a card springs open above the toolbar, aligned to the active icon, showing that item's content. Click again or click outside to collapse. Items, icons, and panels are all data driven. Built with Framer Motion and React. Works as a dock for quick actions in apps and dashboards.

Installation

Install dependencies.

Copy and paste the following code into your project.

Unlock the full library

Get all pro blocks, components & illustrations, and production-ready Next.js + Tailwind templates.

Get All Access

Update the import paths to match your project setup.

Usage

import { ExpandableToolbar } from "@/components/pro/blocks/navigation-2";
import { Folder, MessageCircle, User, WalletCards } from "lucide-react";

Basic Usage

const items = [
  {
    id: 1,
    label: "User",
    icon: <User className="size-4.5" />,
    content: <p>Profile panel body</p>,
  },
  {
    id: 2,
    label: "Messages",
    icon: <MessageCircle className="size-4.5" />,
    content: <p>You have 3 new messages.</p>,
  },
  {
    id: 3,
    label: "Documents",
    icon: <Folder className="size-4.5" />,
    content: <p>Project_Proposal.pdf</p>,
  },
  {
    id: 4,
    label: "Wallet",
    icon: <WalletCards className="size-4.5" />,
    content: <p>Balance: $1,250.32</p>,
  },
];
 
<ExpandableToolbar items={items} />;

Click an icon to expand the panel; click it again (or click anywhere outside) to collapse. The panel width is locked to the toolbar width so it never overflows the icons.

API

<ExpandableToolbar>

PropTypeDefaultDescription
itemsToolbarItem[]—Array of toolbar items to render.
classNamestring?—Extra classes on the root.

ToolbarItem

FieldTypeDescription
idnumber | stringUnique identifier for the item.
labelstringAccessible label for the icon button.
iconReactNodeIcon rendered inside the toolbar button.
contentReactNodePanel content shown when the item is open.