Dynamic Tabs — Add, Close & Reorder Tabs (JS)

Most tab components are static — a fixed set you switch between. Dynamic tabs behave like a browser's: you can add new ones, close any of them, reorder by dragging, and the right tab activates when you close the current one. This snippet builds that full browser-style tab strip in plain HTML, CSS, and vanilla JavaScript, with no library.

State-driven, rendered from an array

Tabs live in a tabs array of { id, title, content }, with an activeId pointing at the current one. Every interaction mutates that array (or the active id) and calls render(), which redraws the strip and the body from state. This single-source-of-truth model is what keeps adding, closing, and reordering consistent — there's no DOM bookkeeping to drift, because the DOM is always a pure function of the array. Unique incrementing ids (not array indices) key each tab so reordering and closing never mix tabs up.

Smart activation when closing

The detail that makes closing feel right is which tab becomes active afterward. When you close the active tab, the component activates its neighbour — the tab that slid into its position, or the previous one if you closed the last — exactly like a browser. Closing a non-active tab leaves your selection alone. And closing the final tab drops to a clean empty state inviting a new tab. Getting this neighbour logic right is the difference between a polished tab strip and one that dumps you on a random tab.

Browser conventions: + , × and middle-click

A + button appends a new tab and scrolls the strip to reveal it; each tab has an × close button; and middle-clicking a tab closes it too (via the auxclick event with button === 1), matching the muscle memory of every browser user. Click handling is delegated — one listener on the strip routes clicks to close-vs-activate by checking closest('.dt-close') first — so it works for any number of tabs including ones added later.

Drag to reorder

Tabs are draggable, and dragstart/dragover reorder the array live: as you drag a tab over another, the dragged item is spliced into the new position and the strip re-renders, so tabs rearrange under the cursor. Reordering the array (not the DOM nodes) means the new order is real state you could persist, not just a visual shuffle.

Overflow, ellipsis, and drop-in use

The strip scrolls horizontally with a hidden scrollbar when tabs overflow, and long titles truncate with an ellipsis inside a max width, so the layout never breaks no matter how many tabs or how long their names. Because everything derives from the tabs array, you can seed it from saved state, cap the number, or wire each tab to real content — a complete reference for browser-style dynamic tabs covering add, close, reorder, and activation.