# Drawer index

A file tree as a card-index cabinet. Folders are drawers, each with a label holder and a cup pull; open one and it slides out with its files standing in it as index cards, each showing its top edge over the card behind. A folder inside a drawer is a divider with a tab. It is a real tree for the keyboard and for a screen reader, drawn from data by one function.

Kit part · With the Kit · https://tactileui.dev/parts/drawer-index

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

The cards come forward a few pixels as it opens. Each card is paper with a ruled line, pulled up under the one before it, and throws a short shadow upward onto it; every third card sits a pixel off square. The label holder is a paper card behind a pressed frame drawn with spread shadows, and the pull is a hood with its hollow under it.

## Variants

- Every drawer shut
- A drawer out, a card taken out
- Dividers, one open
- Long names are cut short

## States

- Rest
- Focus
- Open

## Props and options

| Name | Kind | Description |
| - | - | - |
| drawerIndexHTML(tree, options) | function | The cabinet as markup, from data. tree. |
| options.label · options.chosen | option | The tree’s name, and the path of the card that starts taken out: its drawer and dividers start open and it holds the tab stop. |
| node.meta | option | A few characters at the end of a card, or beside a folder’s name. A folder without one says how many files it holds. |
| Arrows · Home · End · Enter · Space · * · letters | keyboard | The tree pattern’s keys. Right opens a folder, then goes in; Left closes it, then goes out; * opens every folder beside this one; typing jumps to a name. |
| drawerIndexCount · drawerIndexMeta · drawerIndexTab · drawerIndexAncestors · drawerIndexPath | function | The rules, pure: how many files a folder holds, what its label says, where a tab is cut, the folders on the way to a path, and an item’s path. |

## Usage notes

Pull a drawer, then take out a card. Or tab in and use the arrow keys: Right opens and goes in, Left closes and comes back out. Home, End, and type a name to jump to it.

## Accessibility

- It is a WAI-ARIA tree. One item is in the tab order and the arrow keys move from there.
- The keys are the pattern’s own: Up and Down; Right to open and then go in; Left to close and then go out; Home and End; * for every folder beside this one; and typing to jump to a name.
- A shut drawer is out of reach: its cards are hidden from assistive technology and from Tab, not only slid out of sight.
- A folder is named by its own name, so a screen reader says “runbooks, expanded, level 1”, and not every name inside it.
- Colour is never the only sign.
- Names and sizes are paper ink on paper, 13:1 and 6:1, in aluminium and graphite.
- With reduced motion drawers open and shut at once, with no slide.

## Related parts

- [File tree](https://tactileui.dev/parts/file-tree): Folders and files as a real tree, printed like a wiring diagram: traces with an elbow into every item, chevrons that turn, and the chosen file set in a recess with its lamp lit. Written as a plain nested list.
- [Accordion](https://tactileui.dev/parts/accordion): Printed sections that open in place. Each head ends in a small square key printed +; open, the key latches below the plate and reads −.
- [List](https://tactileui.dev/parts/list): Rows in a rack: a mark, a title, a second line and a fact or a key at the end. Chosen rows sink into a recess with their check key latched; in a running order, a row lifts out of the rack on its skirt and slides past the others, from the keyboard or by its grip.