Dock

Una barra flotante de acciones con iconos, tooltips, magnificación y ocultado automático.

1'use client';
2
3import { useState } from 'react';
4import { Dock } from '@/components/ui/dock';
5import { BookIcon } from '@/components/ui/book';
6import { HomeIcon } from '@/components/ui/home';
7import { LayoutGridIcon } from '@/components/ui/layout-grid';
8import { MoonIcon } from '@/components/ui/moon';
9import { SearchIcon } from '@/components/ui/search';
10import { SparklesIcon } from '@/components/ui/sparkles';
11
12const ITEMS = [
13  { id: 'home', label: 'Home', icon: HomeIcon },
14  { id: 'docs', label: 'Docs', icon: BookIcon },
15  { id: 'components', label: 'Components', icon: LayoutGridIcon },
16];
17
18export function Default() {
19  const [active, setActive] = useState('home');
20
21  return (
22    <Dock floating={false} label="Demo dock">
23      {ITEMS.map(({ id, label, icon: Icon }) => (
24        <Dock.Item key={id} label={label} active={active === id} onClick={() => setActive(id)}>
25          <Icon />
26        </Dock.Item>
27      ))}
28      <Dock.Separator />
29      <Dock.Item label="Search">
30        <SearchIcon />
31      </Dock.Item>
32      <Dock.Item label="Ask AI">
33        <SparklesIcon />
34      </Dock.Item>
35      <Dock.Item label="Toggle theme">
36        <MoonIcon />
37      </Dock.Item>
38    </Dock>
39  );
40}

Instalación

pnpm dlx nachui add dock

Anatomía

1import { Dock, useDockAutoHide } from '@/components/ui/dock';

1<Dock label="Navegación del sitio">
2  <Dock.Item label="Inicio" active>
3    <HomeIcon />
4  </Dock.Item>
5  <Dock.Separator />
6  <Dock.Item label="Buscar">
7    <SearchIcon />
8  </Dock.Item>
9</Dock>

Cada ítem recibe un label. Es el nombre accesible del control y el tooltip que aparece al pasar el mouse o al enfocar, así el icono nunca tiene que explicarse solo.

Links

Pasá asChild para que el ítem sea lo que renderices adentro, por ejemplo un link del router. Conserva el tamaño, el tooltip y el estado activo.

1'use client';
2
3import { Dock } from '@/components/ui/dock';
4import { BookIcon } from '@/components/ui/book';
5import { HomeIcon } from '@/components/ui/home';
6import { PackageIcon } from '@/components/ui/package';
7import { StarIcon } from '@/components/ui/star';
8
9export function Links() {
10  return (
11    <Dock floating={false} label="Site navigation">
12      <Dock.Item asChild label="Home">
13        <a href="#home">
14          <HomeIcon />
15        </a>
16      </Dock.Item>
17      <Dock.Item asChild label="Docs" active>
18        <a href="#docs">
19          <BookIcon />
20        </a>
21      </Dock.Item>
22      <Dock.Item asChild label="Bricks">
23        <a href="#bricks">
24          <PackageIcon />
25        </a>
26      </Dock.Item>
27      <Dock.Item asChild label="Icons">
28        <a href="#icons">
29          <StarIcon />
30        </a>
31      </Dock.Item>
32    </Dock>
33  );
34}

Magnificación

Los ítems crecen cuando el puntero se acerca, como en un dock de escritorio. Ajustalo con itemSize, magnifiedSize y range, o apagalo con magnify={false}. Se desactiva solo cuando el visitante prefiere menos movimiento, y nunca corre en pantallas táctiles.

1<Dock itemSize={44} magnifiedSize={68} range={140}>
2  ...
3</Dock>

Ocultado automático

useDockAutoHide devuelve true mientras la página scrollea hacia abajo y false cuando sube, llega al final, o el puntero se acerca al borde inferior. Pasáselo a hidden y la barra se corre del camino.

1function SiteDock() {
2  const hidden = useDockAutoHide();
3 
4  return (
5    <Dock hidden={hidden} label="Navegación del sitio">
6      ...
7    </Dock>
8  );
9}

Por defecto la barra queda fija abajo y al centro del viewport. Usá floating={false} para renderizarla en su lugar, por ejemplo dentro de una toolbar o de una demo.

Referencia de API

Dock

Prop	Type	Default	Descripción
`label`	`string`	`'Dock'`	Nombre accesible del landmark de navegación.
`hidden`	`boolean`	`false`	Desliza la barra fuera de la vista y desactiva el puntero.
`floating`	`boolean`	`true`	Fija la barra abajo y al centro del viewport.
`magnify`	`boolean`	`true`	Agranda los ítems cerca del puntero.
`itemSize`	`number`	`40`	Tamaño en reposo de cada ítem, en píxeles.
`magnifiedSize`	`number`	`60`	Tamaño del ítem justo debajo del puntero.
`range`	`number`	`120`	Distancia en píxeles en la que la magnificación se desvanece.

Dock.Item

Prop	Type	Default	Descripción
`label`	`string`		Nombre accesible y texto del tooltip. Obligatorio.
`active`	`boolean`	`false`	Marca el ítem actual con un punto y `aria-current`.
`asChild`	`boolean`	`false`	Renderiza el hijo en lugar de un botón.
`containerClassName`	`string`		Clases para la caja exterior, útil para ocultar ítems por tamaño.

Dock.Separator

Una línea vertical entre grupos de ítems. Acepta className.

useDockAutoHide

Opción	Type	Default	Descripción
`threshold`	`number`	`12`	Desplazamiento mínimo antes de cambiar el estado.
`revealZone`	`number`	`96`	Distancia del puntero al borde inferior que vuelve a mostrar.
`minScroll`	`number`	`80`	Posición de scroll por debajo de la cual nunca se oculta.

¿Encontraste algo que mejorar?

¿Notaste un error, tipografía o detalle faltante en esta página? Ayúdanos a mejorar la documentación abriendo un issue en GitHub.

Crear un Issue

AnteriorDialog

SiguienteDrawer