Commerce Navigation

Commerce Navigation

A complete shop navigation with four category collections, searchable items and a mobile drawer. Storefront pairs a broad shopping header with a product grid, grouped overview links and a campaign card.

React

import { CommerceNavigation } from './commerce-navigation/src/react';

export default function Shop() {
  return <CommerceNavigation
    brand="VELT"
    initialState="closed"
    stageHeight={844}
    storefrontFeatureTitle="Training for every day."
    bagCount={2}
  />;
}

The wrapper imports the component stylesheet. className, style and paused are optional wrapper props. Each mounted instance owns its navigation and search state.

HTML and vanilla JavaScript

Use the HTML download for a complete page with its scripts, fonts and images. In a JavaScript project with a bundler, import the core and stylesheet:

import { mount } from './commerce-navigation/src/core';
import './commerce-navigation/src/styles.css';

const host = document.querySelector<HTMLElement>('#shop-navigation')!;
const navigation = mount(host, {
  initialState: 'category-2',
  stageHeight: 800,
});

navigation.update({ bagCount: 3 });
navigation.pause();
navigation.resume();
// Before removing the host:
navigation.destroy();

update merges a validated patch with the current settings and resets interaction state to initialState. Invalid settings throw TypeError before changing the mounted content. destroy removes owned markup, event listeners and observers. Repeated destruction is safe.

Catalogue content

The settings panel is generated from the component manifest. Seven navigation labels have seven corresponding destinations. The middle four labels open the four category collections; their destinations power the category's View all action.

Item titles, destinations, images and descriptions are ordered lists of exactly 16 entries: four entries per category. These same titles are searched, along with their category heading. Change titles and image descriptions together when replacing campaign imagery. Six overview links appear in each desktop collection. Storefront arranges them as two groups of three below the product grid. Its feature heading has a separate Storefront feature title control.

The bundled VELT campaign shows training apparel and accessories in five photographs. These photographs are curated across the four collections; the sixteen item entries are not sixteen separate photographed products. Bundled image names are velt-top, velt-shorts, velt-hoodie, velt-accessories and velt-campaign. The velt-logo identity is the default brand logo. Clear Brand logo to display Brand name as text, or supply your own image. Replace images with HTTPS addresses or raster base64 data URLs. Browser object URLs are accepted for local uploads but require conversion to portable data or an HTTPS address before sharing. Destinations accept HTTPS URLs, local fragments and relative paths. Credentials, script URLs and protocol-relative URLs are rejected. The default fragment links are demonstration destinations; set your shop routes before publishing.

Interaction

On desktop, hover or activate a category to open it. The pointer can move into its panel. Arrow Down moves from a category button to its first link; Left and Right switch category buttons. Escape closes an open surface and restores focus. Search supports live filtering, clear, empty results, click-outside dismissal and Escape. Press / while focus is inside the component to open search.

The navigation switches to its mobile menu at container widths of 1199px or less. A menu button opens the internal drawer. Choose a category, use All categories to return, or close the menu. The drawer and search keep keyboard focus within their active controls. All open content scrolls inside the component so it remains reachable at short heights. The height control sets the complete component height. The plain backdrop has its own colour setting. Storefront search shows text results after a query is entered.

pause stops visual transitions while controls remain usable. Reduced motion, hidden documents and offscreen instances also settle transitions immediately. The component has no continuous animation loop. Without JavaScript, a plain catalogue of category and item links remains available. Missing optional observers fall back to window resizing and bounded CSS transitions.

Assets

Archivo, Alumni Sans, Anton and Inter are bundled under SIL Open Font License 1.1, with full notices in assets/fonts. Original VELT campaign and identity artwork is included under the Arclen UI Pro artwork licence. Asset hashes and byte sizes are recorded in assets/inventory.json.