Find-a-Part Ribbon

Ribbon widget demo

The ribbon is expanded on load. Scroll down and it slides under the header like any content, leaving a Find a Part tab; click the tab to pin it back under the header. Click a pill to open its search form, click it again or use × to close the form, and Hide to fold the whole ribbon. Hidden below 768px by design.

Event log

API

const ribbon = window.smpWidgetFindPartsRibbon('findPartsRibbon', {
    collapseOnScroll: true,   // data-collapse-on-scroll
    activeTab: null           // 'vehicle' | 'PART' | 'XPART' | 'VIN' | 'VEH' | 'licensePlate'
});
ribbon.expand();          // show the bar
ribbon.collapse();        // hide it (shows the tab)
ribbon.openTab('PART');   // open a form, focus its first field
ribbon.closePanel();      // close the open form
ribbon.destroy();         // remove listeners before the DOM goes away

Integration notes

Ships in css/styles.css, js/main.js and images/spritemap/spritemap.svg. No other dependencies.

Markup

First child of .page-content, right after .page-header. One per page.
This page is the reference markup. Keep class names, the pill/pane data-bs-target pairs and data-action values; ids may be renamed together.
Colors follow <body data-brand="…">.

Init / dispose

Markup present at load initializes itself. For Blazor-rendered markup:

// after render
const el = document.getElementById('findPartsRibbon');
window.smpHelpers.initFormElements(el);      // .js-select, input masks
// bind live data (see below), then:
window.smpWidgetFindPartsRibbon('findPartsRibbon');
el.addEventListener('search.ribbon', e => /* run the search */ 0);

// before the DOM is disposed / re-rendered
el.smpRibbon?.destroy();

Data

The <script> under the ribbon markup is demo data only. Bind your own with smpHelpers.initiateTomSelect(select, settings) (Year, Make, State) and smpHelpers.initiateTypeahead(input, settings) (Part #, Competitor #, Vehicle by Text), using load(query, callback). Reload dependent lists (Make → Model → Engine) in your change handler; focus moves to the next field automatically.

Events

`search.ribbon`	`{ searchType, data, form }` — Search clicked or Enter. The host runs the search. The form stays open.
`save.ribbon`	same payload — "Save vehicle search" clicked.
`show.tab.ribbon` / `hide.tab.ribbon`	a form opened / closed.
`expand.ribbon` / `collapse.ribbon`	the bar became visible / hidden.

searchType: vehicle, PART, XPART, VIN, VEH, licensePlate. data is keyed by field name, e.g. { year, make, model, engine }; empty fields are null.

Behavior

Scrolls under the header like content; the "Find a Part" tab appears once it's out of view and pins it back under the header.
Pill opens a form and focuses its first field; selects advance focus to the next field, then to Search. Enter searches. Same pill, ×, Esc or an outside click closes the form (an outside click also unpins).
Hide at the top folds the bar; the tab unfolds it. Nothing closes on search or save.
The tab hides while a page's own sticky tab bar is pinned; header menus always paint above the ribbon.
Hidden below 768px. Pills wrap three per row below the hamburger breakpoint.