Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Navbar blocks

Pro

Formula Bar Navbar Block for React Aria

A spreadsheet navbar with a cell reference box and a formula field: jump to a cell, read its contents and value, edit it, and keep or cancel the edit.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A formula-bar navbar for React with React Aria, the bar of Rowhurst, a spreadsheet app. The upper row holds the wordmark, the file's name and a Share Shine Button. The lower row is the formula bar: a cell reference box, an fx mark, the formula field and what the cell shows. Type a reference such as B3 or D6 and press Enter to jump to it; the formula field then holds that cell's contents, which can be a number, some text, a sum, average, minimum, maximum or count over a range, or two cells or numbers joined by plus, minus, times or divide. Edit the field and press Enter to change the cell and the readout; Escape puts the stored contents back. A reference outside the sheet says so and keeps the old cell. The bar is 104 pixels high, each row on its own spine, and the dividers in the lower row meet its rule with a plus. It's built from Input Group, Shine Button and Guides, with your theme's tokens for every colour. For spreadsheets, data editors and any tool whose header is the cell being edited.

FAQ

How do I change the sheet's cells?

Edit SHEET at the top: each key is a cell from A1 to D7 and each value is what you'd type into it. COLUMNS and ROW_COUNT set the size, and the cell pattern CELL should match them. The readout is computed from these contents each time, so a formula always follows the cells it points at.

Which formulas work?

SUM, AVERAGE, MIN, MAX and COUNT over a range such as B2:B5, and two operands (cells or numbers) joined by +, -, * or /, such as =B2+C2. Anything else, a cell that refers to itself, a division by zero or a chain more than eight cells deep shows #ERROR. Letters can be any case and spaces are ignored. It's a small evaluator for the demo, not a spreadsheet engine.

How does it work with a keyboard?

Both fields are ordinary text inputs. In the reference box, Enter jumps and Escape puts the current cell back; leaving the box also puts it back. In the formula field, Enter keeps the edit and Escape cancels it; leaving the field drops an unconfirmed edit. Each result is spoken in a polite line: the cell, its contents and what it shows.

Where do the edits go?

Nowhere: they live in state on this page, and reloading brings the sample sheet back. The Share button is a link to #. Point edit at your own store, and keep the polite line, so people hear that the change took.

How does it fit on a phone?

Both rows stay. The reference box and the readout narrow, the word "Shows" is kept for screen readers only, and the formula field takes the rest of the row. The file's name truncates before anything wraps. The bar is 104 pixels at every width.

What moves, and what happens with reduced motion?

Nothing moves except a band of light across Share on hover and focus (it fades in place under reduced motion). Jumping to a cell and editing change the fields in place with no transition.

All 100 navbar blocks