shadcn.io is not affiliated with official shadcn/ui
Pipeline Stage Navbar Block for React Aria
A sales CRM navbar whose cells are the pipeline stages, each with a deal count and a value, the current stage marked, and the open pipeline total.
Installation
Overview
A sales CRM navbar for React with React Aria, the bar of Dealhaven. After the wordmark come the four stages of the pipeline as cells: Lead (12 deals, $184k), Qualified, Proposal and Won. Choosing one makes it the current stage, with a tint, a stroke on the bar's bottom edge and aria-current, and a polite line reads it out ("Qualified: 8 deals, $236k."). The open pipeline, the three stages before Won, adds up in its own cell from xl, and the end of the bar holds a search link, New deal as the one Shine Button, and the account's initials. The figures are sample data. Below lg the stages become one chip showing the current stage and its count; it opens a sheet from the top that lists all four with their counts and values. The page's rails and top rule come from the Guides spine, interior hairlines meet that rule with a plus, and the bar stays 56 pixels high. It's built from Badge, Sheet, Tooltip, Button, Shine Button and Guides. For CRMs, pipelines and funnels where the stages are the navigation.
FAQ
How do I change the stages and the figures?
Edit STAGES: each has an id, a label, a deal count and a worth in thousands of dollars. The total is summed from every stage before Won, so it follows the data. The stages here are links to #: in a real app they would be routes, with aria-current set from the route instead of the stageId state, which only exists to show the behaviour.
How is the current stage shown without relying on colour?
The current stage's link has aria-current="true", a tint, and a one pixel foreground stroke on the bar's bottom edge, drawn over the next block's top rule. The count is a badge with a hidden "deals" so the stage reads as "Lead 12 deals". The value is a price in one left-to-right span, so it reads the same in a right-to-left page.
How does it work with a keyboard?
The stages sit in a nav named Pipeline stages. Tab moves through them and Enter chooses one; the choice is announced in a polite line that speaks once per change. The search link has a tooltip on hover and focus.
How does it fit on a phone?
Below lg the stage cells hide. A chip shows the current stage with its count, named "Pipeline stages, Lead", and opens a sheet from the top with all four stages, their counts and values, and the open total. Choosing a stage closes the sheet and the chip takes the new stage. Escape closes it and returns focus to the chip. Below sm New deal is an icon, and the search link and the avatar hide.
How do I point New deal at a real form?
New deal is a link to #. Point its href at your form.
The Shine Button renders a link when it has an href.
What moves, and what happens with reduced motion?
Nothing moves on load. Stage cells and links change colour with a short transition, instant with reduced motion, and the sheet slides from the top without a transition under reduced motion. A band of light sweeps across New deal once on hover and keyboard focus, and with reduced motion that light fades in where it stands.