Search Shell

The bounded search affordance that lives in shared secondary chrome without overpowering navigation and wayfinding.

Status: Active
Host family: `sub-nav-row`
Primary proof: `sub-nav` canonical set, especially search-shell family anchors

Live Surfaces

Review This Pattern

Search-shell proof stays inside the shared sub-nav row so the centered width contract is reviewed in the right chrome.

PrioritycanonicalsSearch-shell canonical anchors explorationInteractive sub-nav exploration hostSub-nav host render surface

Contract Highlights

What This Pattern Governs

Search should stay discoverable and readable in page chrome without turning into a full-row takeover or a page-local width hack.

Structure

Search form and input

The shell is intentionally simple: a semantic search form with one bounded input surface and clear placeholder scope.

Width rule

Centered and bounded

The input remains centered in the row and should keep its width bounds rather than expanding into breadcrumb territory.

Responsive rule

Stack only when needed

On narrow widths the shell may stack under breadcrumb, but desktop and tablet should preserve the centered-row relationship whenever the row can honestly sustain it.