Tab Overflow

Many tabs in one panel with scrolling and a hidden-tab menu.

Use overflow behavior when a panel can collect more tabs than fit onscreen. Scroll the tab row, open the hidden-tab menu, and activate a clipped tab to see the row bring it back into view.

Tabs keep natural widths while the row handles scrolling and menu access, so large workspaces do not need compressed tab labels.

const tabs = Array.from({ length: 16 }, (_, index) => {
  const n = index + 1;
  return {
    id: `file-${n}`,
    data: {
      title: `src/workspaces/overflow-example-${n}.tsx`,
      section: n <= 6 ? 'Editor' : n <= 11 ? 'Review' : 'Generated',
    },
  };
});

const layout: TileryInitialLayout<TabData> = {
  type: 'group',
  direction: 'horizontal',
  children: [
    {
      type: 'panel',
      id: 'navigator',
      size: 28,
      tabs: [
        {
          id: 'tree',
          closable: false,
          data: { title: 'Navigator', section: 'Project' },
        },
      ],
    },
    {
      type: 'panel',
      id: 'editor',
      size: 72,
      activeTabId: 'file-1',
      tabs,
    },
  ],
};

const tileryRef = useRef<TileryController | null>(null);
const [activeId, setActiveId] = useState('file-1');
const jumpTargets = useMemo(
  () => [
    { label: 'First', tabId: 'file-1' },
    { label: 'Middle', tabId: 'file-8' },
    { label: 'Last', tabId: 'file-16' },
  ],
  [],
);
const jumpToTab = (tabId: string) => {
  tileryRef.current?.setActiveTab(tabId);
};

<Tilery<TabData>
  ref={tileryRef}
  initialLayout={layout}
  onActiveTabChange={(event) => {
    const editorChange = event.changes.find(
      (change) => change.panelId === 'editor',
    );
    if (editorChange?.tabId) setActiveId(editorChange.tabId);
  }}
  renderTabHeader={(tab: TileryTab<TabData>) => (
    <span>{tab.data.title}</span>
  )}
  renderTabContent={(tab: TileryTab<TabData>) => (
    <TabContent meta={tab.data.section}>
      <p style={{ margin: 0 }}>
        {tab.id === 'tree'
          ? 'The adjacent editor panel contains enough tabs to overflow the tab row.'
          : `${tab.data.title} stays reachable even when the tab strip is narrower than the full tab set.`}
      </p>
    </TabContent>
  )}
/>

Related