No. 55 of 106

Search Box Advanced

Instant AJAX search with story suggestions.

    On this page
  1. Search Box Advanced
  2. Tucked away until it is needed
  3. Find the product before they leave
  4. Press ⌘K and just type
  5. Search that takes the whole stage
NEWSON · ELEMENT NO. 55

Live results as visitors type, from posts, pages and WooCommerce products. Ten layouts including a glowing hero bar, a ⌘K command palette, a full-screen overlay and results that appear right on the page, with filters, trending chips, recent searches, voice input and full keyboard control.

Trending

Type anything, or press “/” to jump here. Results come from the real sample posts on this site.

BLOG HEADER · EXPANDING ICON

A single search button in the header. Click it and the field slides open next to it; press Esc or click away to close it again.

layout: expandalign: rightEsc closes
Northlight.Sample blog headerJournalDesignTravelAbout
ONLINE STORE · CATEGORY FILTER

Search WooCommerce products with a category dropdown attached. Results show the photo, category, price, sale badge and stock, and the highlighted words they typed.

layout: classicfilter: product_catprices & salehighlight
Popular
DOCS & LIBRARIES · COMMAND PALETTE

A fake search field opens a command palette, like the ones in modern apps. Here it searches the real NewsOn element pages on this site, titles only. Try ⌘K or Ctrl+K anywhere on this page.

layout: commandshortcut: ⌘Ktitles onlydark skin
MAGAZINE · FULL-SCREEN OVERLAY

A round search button opens a full-screen overlay with a large field, trending topics, recent searches and results as picture cards. The page behind blurs and stops scrolling.

layout: overlayresults: cardsrecent searchesfocus trap

Click the round button above.

RESOURCE HUB · INSTANT RESULTS

No dropdown: results fill the page as cards the moment someone types, with tabs to narrow them to posts, pages or products. This one starts with a search already filled in.

layout: instantfilter: type tabsresults: cardspre-filled “design”
EDITORIAL ARCHIVE · UNDERLINE

A large, quiet field with just a line underneath that fills with color when focused, and an animated placeholder that suggests what to try.

layout: underlineanimated placeholdergrouped results
MOBILE-FIRST SITE · PILL + VOICE

A soft pill with a microphone button. In browsers that support speech input, visitors can tap it and say what they are looking for. It hides itself where speech is not available.

layout: pillvoice searchskin: soft
Try
BLOG SIDEBAR · SIDEBAR

The sidebar layout keeps results inside the column, pushing content down rather than floating over it, with popular tags underneath.

layout: sidebarresults inlinecompact

SIDEBAR

About this blogA sample sidebar box, shown to give the search widget some real neighbors.
APP DASHBOARD · INSET BUTTON

A dark, compact bar with the button tucked inside and a “/” hint. Press “/” while this section is on screen to jump straight into it.

layout: insetshortcut: /skin: dark
SIX SKINS

The classic bar in every skin. Click into one and type to see the results panel in the same style.

Light · pill

Soft · classic

Outline · inset

Glass · pill

Dark · classic

Neon · inset

106 elements for news, Search Box Advanced included.