Table row actions
A table row actions dropdown, sometimes called a kebab menu after its three-dot trigger, keeps a data table clean by collecting every per-row operation in one place. Each row keeps its actions a click away without cluttering the table with buttons, and destructive choices like delete can sit apart from the rest instead of exposed next to the data. The pattern runs through file managers, admin panels, and dashboards, anywhere users manage lists of records without leaving the page.
<div class="card card-sm w-full gap-0">
<div class="card-header border-b">
<h3 class="card-title">Files uploaded</h3>
<p class="card-description max-sm:col-start-1">7 files · 52.1 MB</p>
<div
class="card-action flex items-center gap-2 self-end max-sm:col-start-1 max-sm:row-start-3 max-sm:mt-2 max-sm:justify-self-start"
>
<button class="btn btn-outline btn-sm" type="button">Download all</button
><button class="btn btn-sm" type="button">
<svg
class="icon-start"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M12 3v12"></path>
<path d="m17 8-5-5-5 5"></path>
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path></svg
>Upload
</button>
</div>
</div>
<div class="table-container">
<table class="table">
<thead class="table-header bg-muted/40">
<tr class="table-row hover:bg-transparent">
<th class="table-head w-10 ps-4 pe-3">
<input
type="checkbox"
class="checkbox align-middle"
data-sp-toggle-all="true"
aria-label="Select all files"
/>
</th>
<th class="table-head">File name</th>
<th class="table-head w-32">File size</th>
<th class="table-head w-40">Date uploaded</th>
<th class="table-head w-44">Uploaded by</th>
<th class="table-head w-11 pe-4"></th>
</tr>
</thead>
<tbody class="table-body">
<tr class="table-row h-16.5 border-border/50">
<td class="table-cell ps-4 pe-3">
<input
type="checkbox"
class="checkbox align-middle"
aria-label="Select Tech requirements.pdf"
/>
</td>
<td class="table-cell">
<div class="flex min-w-0 items-center gap-3">
<div
class="flex h-9.5 w-8 shrink-0 items-end justify-center rounded-sm border bg-background pb-1"
>
<span
class="rounded-xs px-0.75 py-px font-mono text-[8px] font-semibold tracking-wide text-white uppercase bg-red-500"
>pdf</span
>
</div>
<div class="flex min-w-0 flex-col gap-0.5">
<span class="truncate text-[13px] font-medium"
>Tech requirements.pdf</span
><span class="text-xs text-muted-foreground">200 KB</span>
</div>
</div>
</td>
<td class="table-cell text-[13px]">200 KB</td>
<td class="table-cell text-[13px] text-muted-foreground">
Jan 4, 2026
</td>
<td class="table-cell text-[13px]">Leila Navarro</td>
<td class="table-cell pe-4 text-end">
<button
type="button"
id="file-menu-0"
class="btn btn-ghost btn-sm btn-icon text-muted-foreground"
aria-label="Open menu for Tech requirements.pdf"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
<div
class="dropdown w-54"
data-sp-toggle="#file-menu-0"
data-sp-placement="bottom-end"
>
<button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="6" cy="6" r="3"></circle>
<path d="M8.12 8.12 12 12"></path>
<path d="M20 4 8.12 15.88"></path>
<circle cx="6" cy="18" r="3"></circle>
<path d="M14.8 14.8 20 20"></path></svg
>Cut<span class="dropdown-shortcut">⌘X</span></button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Copy<span class="dropdown-shortcut">⌘C</span></button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M11 14h10"></path>
<path d="M16 4h2a2 2 0 0 1 2 2v1.344"></path>
<path d="m17 18 4-4-4-4"></path>
<path
d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113"
></path>
<rect x="8" y="2" width="8" height="4" rx="1"></rect></svg
>Paste<span class="dropdown-shortcut">⌘V</span>
</button>
<div class="dropdown-separator"></div>
<button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg
>Rename</button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="15" x2="15" y1="12" y2="18"></line>
<line x1="12" x2="18" y1="15" y2="15"></line>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Duplicate<span class="dropdown-shortcut">⌘D</span></button
><button
class="dropdown-item dropdown-item-destructive"
type="button"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M10 11v6"></path>
<path d="M14 11v6"></path>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path>
<path d="M3 6h18"></path>
<path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg
>Delete<span class="dropdown-shortcut">⌘⌫</span>
</button>
</div>
</td>
</tr>
<tr class="table-row h-16.5 border-border/50">
<td class="table-cell ps-4 pe-3">
<input
type="checkbox"
class="checkbox align-middle"
aria-label="Select Dashboard screenshot.jpg"
/>
</td>
<td class="table-cell">
<div class="flex min-w-0 items-center gap-3">
<div
class="flex h-9.5 w-8 shrink-0 items-end justify-center rounded-sm border bg-background pb-1"
>
<span
class="rounded-xs px-0.75 py-px font-mono text-[8px] font-semibold tracking-wide text-white uppercase bg-purple-500"
>jpg</span
>
</div>
<div class="flex min-w-0 flex-col gap-0.5">
<span class="truncate text-[13px] font-medium"
>Dashboard screenshot.jpg</span
><span class="text-xs text-muted-foreground">720 KB</span>
</div>
</div>
</td>
<td class="table-cell text-[13px]">720 KB</td>
<td class="table-cell text-[13px] text-muted-foreground">
Jan 4, 2026
</td>
<td class="table-cell text-[13px]">Maya Okonkwo</td>
<td class="table-cell pe-4 text-end">
<button
type="button"
id="file-menu-1"
class="btn btn-ghost btn-sm btn-icon text-muted-foreground"
aria-label="Open menu for Dashboard screenshot.jpg"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
<div
class="dropdown w-54"
data-sp-toggle="#file-menu-1"
data-sp-placement="bottom-end"
>
<button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="6" cy="6" r="3"></circle>
<path d="M8.12 8.12 12 12"></path>
<path d="M20 4 8.12 15.88"></path>
<circle cx="6" cy="18" r="3"></circle>
<path d="M14.8 14.8 20 20"></path></svg
>Cut<span class="dropdown-shortcut">⌘X</span></button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Copy<span class="dropdown-shortcut">⌘C</span></button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M11 14h10"></path>
<path d="M16 4h2a2 2 0 0 1 2 2v1.344"></path>
<path d="m17 18 4-4-4-4"></path>
<path
d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113"
></path>
<rect x="8" y="2" width="8" height="4" rx="1"></rect></svg
>Paste<span class="dropdown-shortcut">⌘V</span>
</button>
<div class="dropdown-separator"></div>
<button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg
>Rename</button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="15" x2="15" y1="12" y2="18"></line>
<line x1="12" x2="18" y1="15" y2="15"></line>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Duplicate<span class="dropdown-shortcut">⌘D</span></button
><button
class="dropdown-item dropdown-item-destructive"
type="button"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M10 11v6"></path>
<path d="M14 11v6"></path>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path>
<path d="M3 6h18"></path>
<path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg
>Delete<span class="dropdown-shortcut">⌘⌫</span>
</button>
</div>
</td>
</tr>
<tr class="table-row h-16.5 border-border/50">
<td class="table-cell ps-4 pe-3">
<input
type="checkbox"
class="checkbox align-middle"
aria-label="Select Dashboard prototype recording.mp4"
/>
</td>
<td class="table-cell">
<div class="flex min-w-0 items-center gap-3">
<div
class="flex h-9.5 w-8 shrink-0 items-end justify-center rounded-sm border bg-background pb-1"
>
<span
class="rounded-xs px-0.75 py-px font-mono text-[8px] font-semibold tracking-wide text-white uppercase bg-blue-600"
>mp4</span
>
</div>
<div class="flex min-w-0 flex-col gap-0.5">
<span class="truncate text-[13px] font-medium"
>Dashboard prototype recording.mp4</span
><span class="text-xs text-muted-foreground">16 MB</span>
</div>
</div>
</td>
<td class="table-cell text-[13px]">16 MB</td>
<td class="table-cell text-[13px] text-muted-foreground">
Jan 2, 2026
</td>
<td class="table-cell text-[13px]">Devin Ross</td>
<td class="table-cell pe-4 text-end">
<button
type="button"
id="file-menu-2"
class="btn btn-ghost btn-sm btn-icon text-muted-foreground"
aria-label="Open menu for Dashboard prototype recording.mp4"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
<div
class="dropdown w-54"
data-sp-toggle="#file-menu-2"
data-sp-placement="bottom-end"
>
<button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="6" cy="6" r="3"></circle>
<path d="M8.12 8.12 12 12"></path>
<path d="M20 4 8.12 15.88"></path>
<circle cx="6" cy="18" r="3"></circle>
<path d="M14.8 14.8 20 20"></path></svg
>Cut<span class="dropdown-shortcut">⌘X</span></button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Copy<span class="dropdown-shortcut">⌘C</span></button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M11 14h10"></path>
<path d="M16 4h2a2 2 0 0 1 2 2v1.344"></path>
<path d="m17 18 4-4-4-4"></path>
<path
d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113"
></path>
<rect x="8" y="2" width="8" height="4" rx="1"></rect></svg
>Paste<span class="dropdown-shortcut">⌘V</span>
</button>
<div class="dropdown-separator"></div>
<button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg
>Rename</button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="15" x2="15" y1="12" y2="18"></line>
<line x1="12" x2="18" y1="15" y2="15"></line>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Duplicate<span class="dropdown-shortcut">⌘D</span></button
><button
class="dropdown-item dropdown-item-destructive"
type="button"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M10 11v6"></path>
<path d="M14 11v6"></path>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path>
<path d="M3 6h18"></path>
<path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg
>Delete<span class="dropdown-shortcut">⌘⌫</span>
</button>
</div>
</td>
</tr>
<tr class="table-row h-16.5 border-border/50">
<td class="table-cell ps-4 pe-3">
<input
type="checkbox"
class="checkbox align-middle"
aria-label="Select Dashboard prototype FINAL.fig"
/>
</td>
<td class="table-cell">
<div class="flex min-w-0 items-center gap-3">
<div
class="flex h-9.5 w-8 shrink-0 items-end justify-center rounded-sm border bg-background pb-1"
>
<span
class="rounded-xs px-0.75 py-px font-mono text-[8px] font-semibold tracking-wide text-white uppercase bg-violet-600"
>fig</span
>
</div>
<div class="flex min-w-0 flex-col gap-0.5">
<span class="truncate text-[13px] font-medium"
>Dashboard prototype FINAL.fig</span
><span class="text-xs text-muted-foreground">4.2 MB</span>
</div>
</div>
</td>
<td class="table-cell text-[13px]">4.2 MB</td>
<td class="table-cell text-[13px] text-muted-foreground">
Jan 6, 2026
</td>
<td class="table-cell text-[13px]">Priya Raman</td>
<td class="table-cell pe-4 text-end">
<button
type="button"
id="file-menu-3"
class="btn btn-ghost btn-sm btn-icon text-muted-foreground"
aria-label="Open menu for Dashboard prototype FINAL.fig"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
<div
class="dropdown w-54"
data-sp-toggle="#file-menu-3"
data-sp-placement="bottom-end"
>
<button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="6" cy="6" r="3"></circle>
<path d="M8.12 8.12 12 12"></path>
<path d="M20 4 8.12 15.88"></path>
<circle cx="6" cy="18" r="3"></circle>
<path d="M14.8 14.8 20 20"></path></svg
>Cut<span class="dropdown-shortcut">⌘X</span></button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Copy<span class="dropdown-shortcut">⌘C</span></button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M11 14h10"></path>
<path d="M16 4h2a2 2 0 0 1 2 2v1.344"></path>
<path d="m17 18 4-4-4-4"></path>
<path
d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113"
></path>
<rect x="8" y="2" width="8" height="4" rx="1"></rect></svg
>Paste<span class="dropdown-shortcut">⌘V</span>
</button>
<div class="dropdown-separator"></div>
<button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg
>Rename</button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="15" x2="15" y1="12" y2="18"></line>
<line x1="12" x2="18" y1="15" y2="15"></line>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Duplicate<span class="dropdown-shortcut">⌘D</span></button
><button
class="dropdown-item dropdown-item-destructive"
type="button"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M10 11v6"></path>
<path d="M14 11v6"></path>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path>
<path d="M3 6h18"></path>
<path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg
>Delete<span class="dropdown-shortcut">⌘⌫</span>
</button>
</div>
</td>
</tr>
<tr class="table-row h-16.5 border-border/50">
<td class="table-cell ps-4 pe-3">
<input
type="checkbox"
class="checkbox align-middle"
aria-label="Select UX design guidelines.docx"
/>
</td>
<td class="table-cell">
<div class="flex min-w-0 items-center gap-3">
<div
class="flex h-9.5 w-8 shrink-0 items-end justify-center rounded-sm border bg-background pb-1"
>
<span
class="rounded-xs px-0.75 py-px font-mono text-[8px] font-semibold tracking-wide text-white uppercase bg-blue-500"
>docx</span
>
</div>
<div class="flex min-w-0 flex-col gap-0.5">
<span class="truncate text-[13px] font-medium"
>UX design guidelines.docx</span
><span class="text-xs text-muted-foreground">400 KB</span>
</div>
</div>
</td>
<td class="table-cell text-[13px]">400 KB</td>
<td class="table-cell text-[13px] text-muted-foreground">
Jan 8, 2026
</td>
<td class="table-cell text-[13px]">Grace Adeyemi</td>
<td class="table-cell pe-4 text-end">
<button
type="button"
id="file-menu-4"
class="btn btn-ghost btn-sm btn-icon text-muted-foreground"
aria-label="Open menu for UX design guidelines.docx"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
<div
class="dropdown w-54"
data-sp-toggle="#file-menu-4"
data-sp-placement="bottom-end"
>
<button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="6" cy="6" r="3"></circle>
<path d="M8.12 8.12 12 12"></path>
<path d="M20 4 8.12 15.88"></path>
<circle cx="6" cy="18" r="3"></circle>
<path d="M14.8 14.8 20 20"></path></svg
>Cut<span class="dropdown-shortcut">⌘X</span></button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Copy<span class="dropdown-shortcut">⌘C</span></button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M11 14h10"></path>
<path d="M16 4h2a2 2 0 0 1 2 2v1.344"></path>
<path d="m17 18 4-4-4-4"></path>
<path
d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113"
></path>
<rect x="8" y="2" width="8" height="4" rx="1"></rect></svg
>Paste<span class="dropdown-shortcut">⌘V</span>
</button>
<div class="dropdown-separator"></div>
<button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg
>Rename</button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="15" x2="15" y1="12" y2="18"></line>
<line x1="12" x2="18" y1="15" y2="15"></line>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Duplicate<span class="dropdown-shortcut">⌘D</span></button
><button
class="dropdown-item dropdown-item-destructive"
type="button"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M10 11v6"></path>
<path d="M14 11v6"></path>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path>
<path d="M3 6h18"></path>
<path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg
>Delete<span class="dropdown-shortcut">⌘⌫</span>
</button>
</div>
</td>
</tr>
<tr class="table-row h-16.5 border-border/50">
<td class="table-cell ps-4 pe-3">
<input
type="checkbox"
class="checkbox align-middle"
aria-label="Select Dashboard interaction.aep"
/>
</td>
<td class="table-cell">
<div class="flex min-w-0 items-center gap-3">
<div
class="flex h-9.5 w-8 shrink-0 items-end justify-center rounded-sm border bg-background pb-1"
>
<span
class="rounded-xs px-0.75 py-px font-mono text-[8px] font-semibold tracking-wide text-white uppercase bg-indigo-500"
>aep</span
>
</div>
<div class="flex min-w-0 flex-col gap-0.5">
<span class="truncate text-[13px] font-medium"
>Dashboard interaction.aep</span
><span class="text-xs text-muted-foreground">12 MB</span>
</div>
</div>
</td>
<td class="table-cell text-[13px]">12 MB</td>
<td class="table-cell text-[13px] text-muted-foreground">
Jan 6, 2026
</td>
<td class="table-cell text-[13px]">Theo Lindqvist</td>
<td class="table-cell pe-4 text-end">
<button
type="button"
id="file-menu-5"
class="btn btn-ghost btn-sm btn-icon text-muted-foreground"
aria-label="Open menu for Dashboard interaction.aep"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
<div
class="dropdown w-54"
data-sp-toggle="#file-menu-5"
data-sp-placement="bottom-end"
>
<button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="6" cy="6" r="3"></circle>
<path d="M8.12 8.12 12 12"></path>
<path d="M20 4 8.12 15.88"></path>
<circle cx="6" cy="18" r="3"></circle>
<path d="M14.8 14.8 20 20"></path></svg
>Cut<span class="dropdown-shortcut">⌘X</span></button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Copy<span class="dropdown-shortcut">⌘C</span></button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M11 14h10"></path>
<path d="M16 4h2a2 2 0 0 1 2 2v1.344"></path>
<path d="m17 18 4-4-4-4"></path>
<path
d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113"
></path>
<rect x="8" y="2" width="8" height="4" rx="1"></rect></svg
>Paste<span class="dropdown-shortcut">⌘V</span>
</button>
<div class="dropdown-separator"></div>
<button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg
>Rename</button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="15" x2="15" y1="12" y2="18"></line>
<line x1="12" x2="18" y1="15" y2="15"></line>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Duplicate<span class="dropdown-shortcut">⌘D</span></button
><button
class="dropdown-item dropdown-item-destructive"
type="button"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M10 11v6"></path>
<path d="M14 11v6"></path>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path>
<path d="M3 6h18"></path>
<path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg
>Delete<span class="dropdown-shortcut">⌘⌫</span>
</button>
</div>
</td>
</tr>
<tr class="table-row h-16.5 border-border/50">
<td class="table-cell ps-4 pe-3">
<input
type="checkbox"
class="checkbox align-middle"
aria-label="Select Briefing call recording.mp3"
/>
</td>
<td class="table-cell">
<div class="flex min-w-0 items-center gap-3">
<div
class="flex h-9.5 w-8 shrink-0 items-end justify-center rounded-sm border bg-background pb-1"
>
<span
class="rounded-xs px-0.75 py-px font-mono text-[8px] font-semibold tracking-wide text-white uppercase bg-pink-500"
>mp3</span
>
</div>
<div class="flex min-w-0 flex-col gap-0.5">
<span class="truncate text-[13px] font-medium"
>Briefing call recording.mp3</span
><span class="text-xs text-muted-foreground">18.6 MB</span>
</div>
</div>
</td>
<td class="table-cell text-[13px]">18.6 MB</td>
<td class="table-cell text-[13px] text-muted-foreground">
Jan 4, 2026
</td>
<td class="table-cell text-[13px]">Camille Laurent</td>
<td class="table-cell pe-4 text-end">
<button
type="button"
id="file-menu-6"
class="btn btn-ghost btn-sm btn-icon text-muted-foreground"
aria-label="Open menu for Briefing call recording.mp3"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
<div
class="dropdown w-54"
data-sp-toggle="#file-menu-6"
data-sp-placement="bottom-end"
>
<button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="6" cy="6" r="3"></circle>
<path d="M8.12 8.12 12 12"></path>
<path d="M20 4 8.12 15.88"></path>
<circle cx="6" cy="18" r="3"></circle>
<path d="M14.8 14.8 20 20"></path></svg
>Cut<span class="dropdown-shortcut">⌘X</span></button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Copy<span class="dropdown-shortcut">⌘C</span></button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M11 14h10"></path>
<path d="M16 4h2a2 2 0 0 1 2 2v1.344"></path>
<path d="m17 18 4-4-4-4"></path>
<path
d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113"
></path>
<rect x="8" y="2" width="8" height="4" rx="1"></rect></svg
>Paste<span class="dropdown-shortcut">⌘V</span>
</button>
<div class="dropdown-separator"></div>
<button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg
>Rename</button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="15" x2="15" y1="12" y2="18"></line>
<line x1="12" x2="18" y1="15" y2="15"></line>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Duplicate<span class="dropdown-shortcut">⌘D</span></button
><button
class="dropdown-item dropdown-item-destructive"
type="button"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M10 11v6"></path>
<path d="M14 11v6"></path>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path>
<path d="M3 6h18"></path>
<path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg
>Delete<span class="dropdown-shortcut">⌘⌫</span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div
class="card-footer justify-between border-t text-xs text-muted-foreground"
>
<span>Showing 7 of 42 files</span>
<div class="flex gap-1.5">
<button class="btn btn-outline btn-sm" type="button" disabled="">
Previous</button
><button class="btn btn-outline btn-sm" type="button">Next</button>
</div>
</div>
</div>Browse more dropdown examples.