# Rail

A site's top bar made like the front edge of a hi-fi unit. A debossed wordmark plate, engraved links with a lit lamp under the current page, a search key and a call-to-action key with a real skirt. It condenses on scroll and folds into a Menu key and drawer on a narrow bar.

Block · With a Pass · https://tactileui.dev/blocks/rail

> The code and styling for this block come with the Pass. Sign in if you have one. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

Debossed plate, Engraved labels, Current page lamp, Condense on passive scroll, Constant layout height, Container query fold, Focus trap drawer, Aria expanded menu key, Skirted keys, Concentric radii, Finish following

## Usage notes

A navigation bar with the character of the rest of the page and none of the usual trouble.

## Options

| Option | Type | Description |
| - | - | - |
| brand | text | Debossed into the plate. |
| links | text | Separated by “\|”, up to six. A link goes to “#” and its name unless you write Name=/path. |
| current | text | A link’s name or its href. It gets the lamp and aria-current. Empty: no lamp. |
| search | boolean | A key that fires rl-search; wire it to your command palette or search page. |
| cta | text | Call to action |
| ctaHref | text | A page, a path, an anchor, mailto: or tel:. |
| sticky | boolean | Sticks to the top of the page or of the scrolling box it sits in. Condensing needs it. |
| finish | enum | Auto follows the page’s data-finish, then the visitor’s system. |

## Methods

- setCurrent
- open
- close
- condensed
- update
- destroy

## States

1. **At the top**: 
2. **Scrolled**: The room it holds does not change.
3. **Link used**: rl-navigate fires (cancelable); if it is not cancelled the lamp moves to the link. setCurrent('/pricing') does the same from a router; an unknown href leaves no lamp.
4. **Key pressed**: 
5. **Folded**: 
6. **Drawer open**: The Menu key's lines turn into ×, aria-expanded is true, the drawer slides down under the bar and focus moves into it. Tab and Shift+Tab wrap (the Menu key is the first stop); Esc closes it and returns focus to the key; a press outside closes it; choosing a link closes it.
7. **Widened while open**: 
8. **Keyboard**: 
9. **Reduced motion**: The bar, keys, lines, lamps and drawer change without transitions.
10. **Finishes**: Aluminium and graphite by data-finish; on graphite the contrast key turns light.

## How it works

Original composition. The product (Lode) and its links are invented. The plate, the keys and the lamps are CSS drawn here in the kit's tokens; no image. The scroll listener is passive; scroll-driven CSS was left out so the condensing state is a real attribute a page can read.