Jump To Blueprint
Static open-state jump-to bar with a typed query, matching destinations grouped and one highlighted, and keyboard navigation hints in the footer.
Static open-state jump-to bar with a typed query, matching destinations grouped and one highlighted, and keyboard navigation hints in the footer.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Jump To Blueprint is a static open-state rendering of a go-to-anything bar simpler than the full command palette. The input shows the typed query bill, and the panel below it shows two sections: a Matching group (Billing highlighted, Billing notifications below it) and an All pages group (Projects, Members, Settings). Billing is highlighted with bg-muted. The footer row carries Up, Down, Enter and Esc hints using the Kbd primitive. The scrim behind the card uses bg-foreground/20.
Matching and all-pages destinations are separate typed arrays each sharing the same four fields (icon, label, sublabel, highlighted) so no item shape narrowing occurs. The highlight helper marks the matched substring in the label the same way the sidebar search does.
Reach for this block as the design reference or screenshot surface for a jump-to bar. In live applications, wire it to a Radix Dialog triggered by Cmd K, feeding the input value to a client-side destination filter.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the workspace-wide jump-to bar. Other jump-to variants:
Tip: keep the jump-to bar narrower than the full command palette and scope its results to navigation only; users reach for it to move, not to act.