Menu Dock

import { MenuDock } from '@hanzo/ui'

Default

A horizontal pill of icon buttons with the first one active.

export function Default() {
  return (
    <YStack items="center" justify="center" minH={160}>
      <MenuDock
        items={[
          { icon: "🏠", label: "Home", active: true },
          { icon: "🔍", label: "Search" },
          { icon: "🔔", label: "Notifications" },
          { icon: "⚙️", label: "Settings" },
        ]}
      />
    </YStack>
  )
}

Vertical

The same dock as a column, for a side navigation rail.

export function Vertical() {
  return (
    <YStack items="center" justify="center" minH={280}>
      <MenuDock
        orientation="vertical"
        items={[
          { icon: "🏠", label: "Home" },
          { icon: "🔍", label: "Search", active: true },
          { icon: "🔔", label: "Notifications" },
        ]}
      />
    </YStack>
  )
}

Clickable

Each item runs its own handler when pressed.

export function Clickable() {
  return (
    <YStack items="center" justify="center" minH={160}>
      <MenuDock
        items={[
          { icon: "🏠", label: "Home", onClick: () => console.log("home") },
          { icon: "🔍", label: "Search", onClick: () => console.log("search") },
        ]}
      />
    </YStack>
  )
}

Types

export type MenuDockOrientation = 'horizontal' | 'vertical'

export type MenuDockItem = {
  icon: ReactNode
  label: string
  onClick?: () => void
  active?: boolean
}

export type MenuDockProps = Omit<ComponentProps<typeof Frame>, 'orientation' | 'className' | 'items'> & {
  className?: string
  items: MenuDockItem[]
  orientation?: MenuDockOrientation
}

Exports

MenuDocktype MenuDockItemtype MenuDockOrientationtype MenuDockProps