# Icon rail

A narrow sidebar of icon keys, using the kit’s own icons. A lamp beside the current one is lit, a label shows as a tooltip on hover and on focus, and a key at the foot opens the rail out so every label is printed beside its icon. It remembers which way you left it.

Kit part · With the Kit · https://tactileui.dev/parts/icon-rail

> 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

Closed, the label is a small contrast plate set to the right and made visible on hover and focus; it is never removed from the page, only made transparent, which is why the icon key still has a name. Opened, the same label loses its plate and sits in the row, and the icon does not move: the item’s padding is the half of the closed width the icon was centred in. The width eases; everything else follows from an attribute, and the foot key is the one control that needs a script.

## Variants

- Closed
- Open · expanded
- Three items
- No foot key

## States

- Closed
- Hover
- Tooltip
- Key focus
- Open

## Props and options

| Name | Kind | Description |
| - | - | - |
| expanded | property | Read or set whether the labels are printed. Setting it stores the choice. |
| ↑ ↓ · Home · End | keyboard | Move between the icon keys and the foot key. Tab visits each one as well. |

## Usage notes

Hover or Tab to an icon for its label. Press the key at the foot to print every label; reload and it stays as you left it.

## Accessibility

- Every item is a link whose name is its label, which is always in the page: closed, the label is a tooltip made visible, not added, so an icon on its own is never the only name.
- The tooltip shows on hover and on keyboard focus, and on a touch screen a press goes straight to the link, where the page’s own heading says where you are.
- The foot key is a real button whose name says what it will do (“Show labels”, “Hide labels”). Opening the rail moves nothing: icons stay where they were and only the words appear.
- The choice is stored in localStorage, read and written inside try/catch; a browser that refuses storage starts the rail as it was marked up.
- With reduced motion the rail opens at once, without easing, and the tooltip appears without sliding.

## Related parts

- [Side rail](https://tactileui.dev/parts/side): App navigation in a panel: the current page is a recess with its lamp lit, links grouped under printed labels.
- [Icons](https://tactileui.dev/parts/icons): The kit’s glyphs as one set.
- [Tooltip](https://tactileui.dev/parts/tooltip): A few words on a small label plate, the kind riveted beside a control on a rack: printed in the contrast colours with a rule just inside its edge and a short tab aimed at its key. It comes up when a pointer rests on the key or the keyboard reaches it, is read by a screen reader, and goes on Escape.