Navigation
Application sidebar, top navigation, and mobile navigation drawer.
App Sidebar
Collapsible application sidebar with nested navigation sections and user area.
Preview
App Sidebar.tsx
import { AppSidebar } from "@launchapp/design-system/blocks/navigation";const sections = [ { title: "Main", items: [ { label: "Dashboard", href: "/", isActive: true }, { label: "Analytics", href: "/analytics" }, { label: "Projects", href: "/projects" }, ], }, { title: "Settings", items: [ { label: "Profile", href: "/profile" }, { label: "Billing", href: "/billing" }, ], },];export default function Page() { return ( <AppSidebar sections={sections} user={{ name: "Alice Johnson", email: "alice@example.com", avatarFallback: "AJ" }} /> );}Top Navigation
Horizontal top navigation bar with logo, links, notifications, and user menu.
Preview
Top Navigation.tsx
import { TopNav } from "@launchapp/design-system/blocks/navigation";const items = [ { label: "Dashboard", href: "/" }, { label: "Projects", href: "/projects" }, { label: "Team", href: "/team" },];export default function Page() { return ( <TopNav items={items} notificationCount={3} user={{ name: "Alice Johnson", email: "alice@example.com", avatarFallback: "AJ", }} /> );}Mobile Nav Drawer
Slide-in mobile navigation drawer with menu items and close button.
Preview
Mobile Nav Drawer.tsx
import { MobileNavDrawer } from "@launchapp/design-system/blocks/navigation";const items = [ { label: "Dashboard", href: "/" }, { label: "Projects", href: "/projects" }, { label: "Team", href: "/team" }, { label: "Settings", href: "/settings" },];export default function Page() { return <MobileNavDrawer items={items} />;}Breadcrumb Navigation
Breadcrumb trail navigation component with overflow handling.
Preview
No preview available
See the code snippet below for usage.
Breadcrumb Navigation.tsx
import { BreadcrumbNav } from "@launchapp/design-system/blocks/navigation";export default function Page() { return ( <BreadcrumbNav items={[ { label: "Home", href: "/" }, { label: "Projects", href: "/projects" }, { label: "LaunchApp v2" }, ]} /> );}Command Palette
⌘K command palette with search, keyboard navigation, and action groups.
Preview
No preview available
See the code snippet below for usage.
Command Palette.tsx
import { CommandPalette } from "@launchapp/design-system/blocks/navigation";const groups = [ { id: "pages", label: "Pages", items: [ { id: "dashboard", label: "Dashboard", href: "/dashboard" }, { id: "settings", label: "Settings", href: "/settings" }, ], },];export default function Page() { return ( <CommandPalette groups={groups} onSelect={(item) => console.log("navigate to", item.href)} /> );}User Menu
Avatar dropdown menu with profile, settings, billing, and sign-out actions.
Preview
No preview available
See the code snippet below for usage.
User Menu.tsx
import { UserMenu } from "@launchapp/design-system/blocks/navigation";export default function Page() { return ( <UserMenu user={{ name: "Alice Johnson", email: "alice@example.com", avatarFallback: "AJ" }} onSignOut={() => console.log("sign out")} /> );}