K
KoreUI

Dropdown

UI

Menú desplegable con posicionamiento inteligente, navegación por teclado y teleport al body.

Uso básico

<x-kore::dropdown>
    <x-slot:trigger>
        <x-kore::button label="Acciones" icon-right="chevron-down" />
    </x-slot:trigger>

    <x-kore::dropdown.item label="Editar" icon="pencil" />
    <x-kore::dropdown.item label="Duplicar" icon="copy" />
    <x-kore::dropdown.separator />
    <x-kore::dropdown.item label="Eliminar" icon="trash" />
</x-kore::dropdown>
<x-kore::dropdown>
    <x-slot:trigger>
        <x-kore::button label="Acciones" icon-right="chevron-down" />
    </x-slot:trigger>

    <x-kore::dropdown.item label="Editar" icon="pencil" />
    <x-kore::dropdown.item label="Duplicar" icon="copy" />
    <x-kore::dropdown.separator />
    <x-kore::dropdown.item label="Eliminar" icon="trash" />
</x-kore::dropdown>

Con secciones

Usa header y separator para organizar items en secciones.

<x-kore::dropdown>
    <x-slot:trigger>
        <x-kore::button label="Menu" icon-right="chevron-down" />
    </x-slot:trigger>

    <x-kore::dropdown.header label="Navegación" />
    <x-kore::dropdown.item label="Inicio" icon="home" href="/" />
    <x-kore::dropdown.item label="Perfil" icon="user" href="/profile" />

    <x-kore::dropdown.separator />

    <x-kore::dropdown.header label="Acciones" />
    <x-kore::dropdown.item label="Configuración" icon="settings" />
    <x-kore::dropdown.item label="Cerrar sesión" icon="log-out" />
</x-kore::dropdown>
<x-kore::dropdown>
    <x-slot:trigger>
        <x-kore::button label="Menu" icon-right="chevron-down" />
    </x-slot:trigger>

    <x-kore::dropdown.header label="Navegación" />
    <x-kore::dropdown.item label="Inicio" icon="home" href="/" />
    <x-kore::dropdown.item label="Perfil" icon="user" href="/profile" />

    <x-kore::dropdown.separator />

    <x-kore::dropdown.header label="Acciones" />
    <x-kore::dropdown.item label="Configuración" icon="settings" />
    <x-kore::dropdown.item label="Cerrar sesión" icon="log-out" />
</x-kore::dropdown>

Con descripción

Items con texto secundario descriptivo.

<x-kore::dropdown>
    <x-slot:trigger>
        <x-kore::button label="Opciones" icon-right="chevron-down" />
    </x-slot:trigger>

    <x-kore::dropdown.item label="Exportar PDF" description="Descarga el reporte en PDF" icon="file-text" />
    <x-kore::dropdown.item label="Exportar CSV" description="Descarga los datos en CSV" icon="table" />
</x-kore::dropdown>
<x-kore::dropdown>
    <x-slot:trigger>
        <x-kore::button label="Opciones" icon-right="chevron-down" />
    </x-slot:trigger>

    <x-kore::dropdown.item label="Exportar PDF" description="Descarga el reporte en PDF" icon="file-text" />
    <x-kore::dropdown.item label="Exportar CSV" description="Descarga los datos en CSV" icon="table" />
</x-kore::dropdown>

Posición

Cuatro posiciones disponibles para el menú.

<x-kore::dropdown position="bottom-start">
    <x-slot:trigger>
        <x-kore::button label="Bottom Start" size="sm" />
    </x-slot:trigger>
    <x-kore::dropdown.item label="Item 1" />
    <x-kore::dropdown.item label="Item 2" />
</x-kore::dropdown>

<x-kore::dropdown position="bottom-end">
    <x-slot:trigger>
        <x-kore::button label="Bottom End" size="sm" />
    </x-slot:trigger>
    <x-kore::dropdown.item label="Item 1" />
    <x-kore::dropdown.item label="Item 2" />
</x-kore::dropdown>
<x-kore::dropdown position="bottom-start">
    <x-slot:trigger>
        <x-kore::button label="Bottom Start" size="sm" />
    </x-slot:trigger>
    <x-kore::dropdown.item label="Item 1" />
    <x-kore::dropdown.item label="Item 2" />
</x-kore::dropdown>

<x-kore::dropdown position="bottom-end">
    <x-slot:trigger>
        <x-kore::button label="Bottom End" size="sm" />
    </x-slot:trigger>
    <x-kore::dropdown.item label="Item 1" />
    <x-kore::dropdown.item label="Item 2" />
</x-kore::dropdown>

Items deshabilitados

Items que no se pueden seleccionar.

<x-kore::dropdown>
    <x-slot:trigger>
        <x-kore::button label="Acciones" icon-right="chevron-down" />
    </x-slot:trigger>

    <x-kore::dropdown.item label="Editar" icon="pencil" />
    <x-kore::dropdown.item label="Eliminar" icon="trash" disabled />
</x-kore::dropdown>
<x-kore::dropdown>
    <x-slot:trigger>
        <x-kore::button label="Acciones" icon-right="chevron-down" />
    </x-slot:trigger>

    <x-kore::dropdown.item label="Editar" icon="pencil" />
    <x-kore::dropdown.item label="Eliminar" icon="trash" disabled />
</x-kore::dropdown>

Props

Prop Tipo Default Descripción
position string bottom-start Posición: bottom-start, bottom-end, top-start, top-end
width string auto Ancho: auto, sm (128px), md (192px), lg (256px) o valor numérico
max-height string|null max-h-72 Alto máximo con scroll
persistent bool false No cierra al hacer click fuera

Props (Item)

Props

Prop Tipo Default Descripción
icon string|null null Icono Lucide
label string|null null Texto del item
description string|null null Texto secundario
href string|null null URL — renderiza como enlace
disabled bool false Deshabilitado