Sheet Drilldown

ProNew

Navigation inside one sheet: a list opens a detail panel, a Back button named after the parent returns, focus follows to the panel heading and Escape goes back one level before closing.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

rootTitle

Guide and examples

When to use it

Use this for account and settings menus on phones and narrow panes: a hierarchy of two or three levels in one sheet.

Do not use it for more than three levels or for content that needs its own URL. Use pages there.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

SheetDrilldown

Prop	Type	Default	Description
`trigger`	`ReactNode`	-	Opens the sheet.
`rootTitle`	`string`	-	Title of the first panel.
`panels`	`{ id, title, children?, content? }[]`	-	All panels; the root has id "root" and lists `children` ids.

Accessibility

The Back button is named after where it goes ("Back to Billing") and the heading takes focus after each move, forward or back, so screen readers announce the new place.
The sheet's description says the level ("Level 2"); the sheet opens at the root every time.
Escape steps back through the levels before it closes, so a keyboard user cannot fall out of a deep panel by accident.

Keyboard

Key	Action
Enter or Space on a list item	opens its panel
Escape	back one level, then close
Tab	Back button first, then the content

Testing

The pattern ships a Testing Library test (sheet-drilldown.test.tsx) that covers the root, drilling down with Back names and focus, going back, Escape levels and reopening at the root.

Guide and examples

When to use it

Use this for account and settings menus on phones and narrow panes: a hierarchy of two or three levels in one sheet.

Do not use it for more than three levels or for content that needs its own URL. Use pages there.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

SheetDrilldown

Prop	Type	Default	Description
`trigger`	`ReactNode`	-	Opens the sheet.
`rootTitle`	`string`	-	Title of the first panel.
`panels`	`{ id, title, children?, content? }[]`	-	All panels; the root has id "root" and lists `children` ids.

Accessibility

The Back button is named after where it goes ("Back to Billing") and the heading takes focus after each move, forward or back, so screen readers announce the new place.
The sheet's description says the level ("Level 2"); the sheet opens at the root every time.
Escape steps back through the levels before it closes, so a keyboard user cannot fall out of a deep panel by accident.

Keyboard

Key	Action
Enter or Space on a list item	opens its panel
Escape	back one level, then close
Tab	Back button first, then the content

Testing

The pattern ships a Testing Library test (sheet-drilldown.test.tsx) that covers the root, drilling down with Back names and focus, going back, Escape levels and reopening at the root.