Dock

Mobile-style bottom navigation bar.

Import

import { Dock } from 'asterui'

Examples

Basic Dock

Mobile-style bottom navigation with icons and labels. (Shown inline for demo; normally fixed at bottom)

</>

HomeSearchFavoritesProfile

import { Dock } from 'asterui'
import { useState } from 'react'
import { HomeIcon, MagnifyingGlassIcon, HeartIcon, UserIcon } from '@aster-ui/icons'

function App() {
  const [active, setActive] = useState(0)
  
  return (
      <Dock
        items={[
          { icon: <HomeIcon size="lg" />, label: 'Home' },
          { icon: <MagnifyingGlassIcon size="lg" />, label: 'Search' },
          { icon: <HeartIcon size="lg" />, label: 'Favorites' },
          { icon: <UserIcon size="lg" />, label: 'Profile' },
        ]}
        activeIndex={active}
        onChange={setActive}
      />
    )
}

export default App

Sizes

Different dock sizes from xs to lg. (Shown inline for demo)

</>

HomeSettingsAlerts

HomeSettingsAlerts

HomeSettingsAlerts

HomeSettingsAlerts

import { Dock, Space } from 'asterui'
import { useState } from 'react'
import { HomeIcon, Cog6ToothIcon, BellIcon } from '@aster-ui/icons'

function App() {
  const [active, setActive] = useState(0)
  const items = [
    { icon: <HomeIcon />, label: 'Home' },
    { icon: <Cog6ToothIcon />, label: 'Settings' },
    { icon: <BellIcon />, label: 'Alerts' },
  ]
  
  return (
      <Space direction="vertical" size="lg" className="w-full">
        <Dock size="xs" items={items} activeIndex={active} onChange={setActive} />
        <Dock size="sm" items={items} activeIndex={active} onChange={setActive} />
        <Dock size="md" items={items} activeIndex={active} onChange={setActive} />
        <Dock size="lg" items={items} activeIndex={active} onChange={setActive} />
      </Space>
    )
}

export default App

Icons Only

Dock without labels for a minimal look. (Shown inline for demo)

</>

import { Dock } from 'asterui'
import { useState } from 'react'
import { HomeIcon, MagnifyingGlassIcon, PlusCircleIcon, HeartIcon, UserIcon } from '@aster-ui/icons'

function App() {
  const [active, setActive] = useState(2)
  
  return (
      <Dock
        items={[
          { icon: <HomeIcon size="lg" /> },
          { icon: <MagnifyingGlassIcon size="lg" /> },
          { icon: <PlusCircleIcon size={32} /> },
          { icon: <HeartIcon size="lg" /> },
          { icon: <UserIcon size="lg" /> },
        ]}
        activeIndex={active}
        onChange={setActive}
      />
    )
}

export default App

Custom Styling

Apply custom colors to the dock. (Shown inline for demo)

</>

HomeSettingsAlerts

import { Dock } from 'asterui'
import { useState } from 'react'
import { HomeIcon, Cog6ToothIcon, BellIcon } from '@aster-ui/icons'

function App() {
  const [active, setActive] = useState(0)
  
  return (
      <Dock
        className="bg-neutral text-neutral-content"
        items={[
          { icon: <HomeIcon size="lg" />, label: 'Home' },
          { icon: <Cog6ToothIcon size="lg" />, label: 'Settings' },
          { icon: <BellIcon size="lg" />, label: 'Alerts' },
        ]}
        activeIndex={active}
        onChange={setActive}
      />
    )
}

export default App

Using Children

Use Dock.Item children for more control. (Shown inline for demo)

</>

HomeSettings

import { Dock } from 'asterui'
import { useState } from 'react'
import { HomeIcon, Cog6ToothIcon } from '@aster-ui/icons'

function App() {
  const [active, setActive] = useState(0)
  
  return (
      <Dock>
        <Dock.Item active={active === 0} onClick={() => setActive(0)}>
          <HomeIcon size="lg" />
          <span className="dock-label">Home</span>
        </Dock.Item>
        <Dock.Item active={active === 1} onClick={() => setActive(1)}>
          <Cog6ToothIcon size="lg" />
          <span className="dock-label">Settings</span>
        </Dock.Item>
      </Dock>
    )
}

export default App

API

Dock

Property	Description	Type	Default
items	Dock items configuration	DockItemConfig[]	-
size	Size variant	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
activeIndex	Controlled active item index	number	-
onChange	Callback when item is clicked	(index: number) => void	-
children	Dock.Item children (alternative to items)	React.ReactNode	-
className	Additional CSS classes	string	-
data-testid	Test ID for testing	string	-

DockItemConfig (for items prop)

Property	Description	Type	Default
icon	Icon element	React.ReactNode	-
label	Label text	string	-
active	Whether item is active (uncontrolled)	boolean	false
disabled	Whether item is disabled	boolean	false
onClick	Click handler	() => void	-
data-testid	Test ID for testing	string	-

Dock.Item (compound pattern)

Property	Description	Type	Default
active	Whether this item is active	boolean	false
children	Item content (icon and optional label)	React.ReactNode	-
onClick	Click handler	() => void	-
disabled	Whether item is disabled	boolean	false
className	Additional CSS classes	string	-
data-testid	Test ID for testing	string	-

Accessibility

• Uses semantic button elements for navigation items
• Supports keyboard navigation
• Active state is visually indicated
• For iOS safe area support, add viewport-fit=cover to your viewport meta tag