Getting Started
Templates
Components
A floating bottom navigation bar inspired by the macOS dock. Features magnification on hover, expandable panels for different sections, and smooth spring animations. Each icon opens a contextual menu with actions, links, or settings.
Key Features:
import { BottomMenu } from "@/components/ui/bottom-menu"
import {
CommandIcon,
SparklesIcon,
PaintBoardIcon,
GithubIcon,
Search01Icon,
Rocket01Icon,
CubeIcon,
GridIcon,
TwitterIcon,
DiscordIcon,
} from "@hugeicons/core-free-icons"
export default function Example() {
return (
<div className="fixed bottom-6 left-1/2 -translate-x-1/2">
<BottomMenu
navItems={[
{ icon: CommandIcon, name: "quick" },
{ icon: SparklesIcon, name: "explore" },
{ icon: PaintBoardIcon, name: "customize" },
{ icon: GithubIcon, name: "connect" },
]}
quickItems={[
{ icon: Search01Icon, text: "Search", shortcut: "⌘K", onClick: () => console.log("Search") },
{ icon: Rocket01Icon, text: "Quick Start", shortcut: "⌘⇧N" },
{ icon: CubeIcon, text: "Playground", shortcut: "⌘P" },
]}
exploreItems={[
{ icon: SparklesIcon, text: "Animations", count: 24 },
{ icon: CubeIcon, text: "3D Effects", count: 12 },
{ icon: GridIcon, text: "Layouts", count: 18 },
]}
customizeItems={[
{ text: "Radius", options: ["None", "SM", "MD", "LG"] },
{ text: "Scale", options: ["90%", "95%", "100%", "105%"] },
]}
connectItems={[
{ icon: GithubIcon, text: "GitHub", href: "https://github.com" },
{ icon: TwitterIcon, text: "Twitter", href: "https://twitter.com" },
{ icon: DiscordIcon, text: "Discord", href: "https://discord.com" },
]}
defaultCustomizeValues={{ Radius: 2, Scale: 2 }}
onCustomizeChange={(type, index) => {
console.log(`${type} changed to option ${index}`)
}}
/>
</div>
)
}| Prop | Type | Default | Description |
|---|---|---|---|
navItems | NavItem[] | Default items | Main navigation icons |
quickItems | QuickActionItem[] | Default items | Quick action buttons with shortcuts |
exploreItems | ExploreItem[] | Default items | Explore categories with counts |
customizeItems | CustomizeOption[] | Default items | Customization options with radio buttons |
connectItems | ConnectItem[] | Default items | Social/connect links |
defaultCustomizeValues | Record<string, number> | { Radius: 2, Scale: 2 } | Initial customize selections |
onCustomizeChange | (type: string, index: number) => void | undefined | Callback when option changes |
className | string | undefined | Additional CSS classes |
| Property | Type | Description |
|---|---|---|
icon | HugeIcon | Icon component |
name | string | Panel name (quick/explore/customize/connect) |
| Property | Type | Description |
|---|---|---|
icon | HugeIcon | Icon component |
text | string | Action label |
shortcut | string | Optional keyboard shortcut |
onClick | () => void | Optional click handler |
| Property | Type | Description |
|---|---|---|
icon | HugeIcon | Icon component |
text | string | Category label |
count | number | Optional item count badge |
onClick | () => void | Optional click handler |
| Property | Type | Description |
|---|---|---|
text | string | Option group label |
options | string[] | Array of option labels |
| Property | Type | Description |
|---|---|---|
icon | HugeIcon | Icon component |
text | string | Link label/title |
href | string | Optional link URL |
Displays a list of actions with optional keyboard shortcuts. Each item shows an icon, label, and shortcut badge.
Shows categories with item counts. Icons animate with a rotation effect on hover.
Radio button groups for settings. Uses animated layout for active state indicators.
Social media links displayed as icon buttons with hover lift effect.
The dock icons use Mac-style magnification:
role="menubar" and role="menu" structurerole="radio" for customize options