shadcn.io is not affiliated with official shadcn/ui
Pipeline Stage Navbar Block for React
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 Base UI, 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 the link with render, with nativeButton={false}.
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.
Related
- Pro
Sub-Navigation Navbar
Two rowsA two-row header whose second row shows the chosen section's four links, the three link sets cross-fading in one grid cell, with the current section and the current page both marked.
- Pro
Category Chips Navbar
Two rowsA two-row shop navbar: wordmark, a search that jumps to a category and account and bag links on top, and below a strip of category chips with counts that snap-scrolls with edge fades and brings the current chip into view.
- Pro
Tabs Underline Navbar
Link highlightsA navbar for a financial reporting tool built as cells: the wordmark in its own cell, full-height report tabs whose 2 px mark sits on the bar's bottom edge and slides on selection, and an Export action, with arrow-key navigation and a scrolling tab row on phones.
- Pro
Contextual Navbar
Cells and splitsA navbar with a Site | App segment control whose two link sets and action sets cross-fade in one grid cell, so the bar's width and height never change.
- Pro
Date Range Picker Navbar
App toolbarsAn analytics navbar for a product-analytics tool: scrolling report tabs, a date-range picker with presets and a calendar, and an Export action.
- Pro
Next Appointment Navbar
Players and clocksA booking navbar for salon software: links to the schedule, a next-appointment chip with a live countdown, and a New booking action.