Dynamic tabs & ref

Add/remove tabs at runtime and drive the container imperatively.

useRef<CollapsingTabsRef>()

Tabs can be added or removed at runtime — scroll offsets are keyed by name, so existing tabs keep their position across the change. A ref exposes imperative controls for the container.

const ref = useRef<CollapsingTabsRef>(null);

<Tabs.Container ref={ref}>{tabs}</Tabs.Container>;

ref.current?.jumpToTab('media');
ref.current?.scrollAllToTop();

Reference

jumpToTab(name, animated?) method

Focus a tab by name.

setIndex(index, animated?) method

Focus a tab by index.

scrollToTop(animated?) method

Scroll the focused tab back to the top.

scrollAllToTop() method

Scroll every tab back to the top.

getFocusedTab() / getCurrentIndex() method

Read the current focus (name / index).