Product Navigation

Product Navigation

A compact navigation with two rich menus. Choose Technical deck for three icon-led columns, Command workspace for a section rail and detail cards, or Editorial atlas for wide numbered groups.

import { ProductNavigation } from './product-navigation/src/react';

<ProductNavigation brand="TRIDENT" actionUrl="/contact" direction="technical" />

HTML download

Keep component.css, component.js, poster.webp and the assets directory together. The supplied component.html includes static menu markup. This minimal host mounts automatically and shows the poster without JavaScript:

<link rel="stylesheet" href="./component.css">
<div
  data-arclen-ui="product-navigation"
  data-settings='{"direction":"atlas","initialOpen":true,"initialMenu":"solutions"}'
></div>
<noscript>
  <img src="./poster.webp" alt="Product Navigation preview" style="display:block;max-width:100%;height:auto">
</noscript>
<script src="./component.js" defer></script>

Edit the JSON in data-settings to configure the navigation. The script mounts each matching host automatically.

Vanilla JavaScript from source

For lifecycle control, use the installed source in a TypeScript project with a bundler that compiles TypeScript and handles the bundled SVG and font imports. Add a <div id="navigation"></div> host and import the core and stylesheet in your application entry:

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

const navigation = mount(document.querySelector<HTMLElement>('#navigation')!, {
  direction: 'atlas', initialOpen: true, initialMenu: 'solutions'
});
// navigation.update({ brand: 'North' });
// navigation.pause(); navigation.resume(); navigation.destroy();

Core exports defaults, resolveSettings, render and mount. The React component also exports Component.

Use the label, description and destination lists in matching order. Product links form three groups of three; Technical deck has eight use cases beside a six-agent directory; the other compositions use two solution groups of four. Missing supplementary destinations fall back to the home destination. Unsafe URL schemes and invalid settings throw a TypeError. Agent logos are bundled locally.

Hover or activate either desktop menu. Arrow Down opens a menu and focuses its first item; Escape closes and returns focus to the trigger. Below 810px, Technical deck uses the right menu button and independently expandable sections. Products and Solutions can remain open together. Agent and use-case links form two columns. The whole navigation scrolls on short screens. Closed content is inert. Command workspace section buttons change the visible group on desktop.

Reduced motion settles every change immediately. Pause stops interaction and removes transitions; resume restores them. A temporary frame loop advances active changes and stops when they settle. No frame loop runs while idle. Destroy removes owned listeners, observers and content. Without JavaScript, header destinations and any initially open menu links remain usable; toggles require JavaScript. Set initialOpen: true when a static expanded fallback is wanted.

Technical deck has a separate agent directory and an eight-item use case grid. Edit agentLabels, agentIcons, agentUrls, agentHeading, useCaseHeading, and solutionPanelWidth to configure it. The brand label remains the accessible name of the compact mark.

Settings

| Setting | Default | Purpose | | --- | --- | --- | | direction | "technical" | Composition | | brand | "TRIDENT" | Brand | | homeUrl | "/" | Home destination | | productsLabel | "Platform" | Products label | | solutionsLabel | "Use cases" | Solutions label | | productHeadings | ["Run agents", "See every step", "Build with Trident"] | Group headings | | productLabels | ["Agent runtime", "Task routing", "Tool permissions", "Run traces", "Run history", "Context search", "Sandbox", "MCP gateway", "Trident CLI"] | Link labels | | productDetails | ["Keep each agent run on track, from its first call to its last.", "Route tasks between agents, tools and the right next step.", "Choose which tools an agent can use, and when to ask you.", "Follow every model call, tool action and handoff in one trace.", "Revisit past runs with the inputs, outputs and context intact.", "Find the context an agent needs across your connected sources.", "Test agent behaviour in isolation before connecting live tools.", "Connect agents to your tools through one controlled endpoint.", "Start runs, inspect results and automate work from your terminal."] | Descriptions | | productUrls | ["/platform/runtime", "/platform/routing", "/platform/permissions", "/platform/traces", "/platform/history", "/platform/context", "/platform/sandbox", "/platform/mcp", "/docs/cli"] | Destinations | | agentHeading | "Agent ecosystem" | Agent heading | | useCaseHeading | "Agent workflows" | Use case heading | | agentLabels | ["Codex", "Claude", "Gemini", "Devin", "Cursor", "Grok"] | Agent names | | agentIcons | ["codex", "claude", "gemini", "devin", "cursor", "grok"] | Agent icon IDs | | agentUrls | ["/integrations/codex", "/integrations/claude", "/integrations/gemini", "/integrations/devin", "/integrations/cursor", "/integrations/grok"] | Agent destinations | | solutionPanelWidth | 900 | Solutions panel width | | solutionHeadings | ["Build & ship", "Operate & improve"] | Group headings | | solutionLabels | ["Support agents", "Sales agents", "Coding agents", "Content agents", "Research agents", "Product agents", "Ops agents", "Security agents"] | Link labels | | solutionDetails | ["Give support agents the context and tools to resolve requests.", "Connect CRM tasks to agents, with a trace of every action.", "Run coding agents through scoped tools and reviewable steps.", "Move from a brief to a draft, with human review before release.", "Coordinate parallel research and keep sources with each run.", "Turn feedback into tracked research, specs and follow-up tasks.", "Delegate routine workflows and keep approvals in your hands.", "Inspect sensitive actions before an agent reaches live systems."] | Descriptions | | solutionUrls | ["/use-cases/support", "/use-cases/sales", "/use-cases/coding", "/use-cases/content", "/use-cases/research", "/use-cases/product", "/use-cases/operations", "/use-cases/security"] | Destinations | | productBadges | ["Core", "", "", "", "", "", "", "", "SDKs"] | Product badges | | directLabels | ["Pricing", "Changelog", "Docs"] | Header links | | directUrls | ["/pricing", "/changelog", "/docs"] | Header destinations | | actionLabel | "Talk to Trident" | Action label | | actionUrl | "/contact" | Action destination | | solutionNote | "Give agents the tools. Keep every run in view." | Solutions callout | | navigationLabel | "Trident navigation" | Accessible name | | menuLabel | "Open Trident navigation" | Mobile toggle label | | initialOpen | false | Start open | | initialMenu | "products" | Starting menu | | openOnHover | true | Open on hover | | motion | true | Animate changes | | duration | 800 | Panel duration | | fullWidth | true | Technical full width | | maxWidth | 1280 | Maximum width | | panelWidth | 800 | Panel width | | inset | 16 | Outer inset | | surface | "#1f1f1f" | Dark surface | | textColor | "#ffffff" | Dark text | | lightSurface | "#f4f3ee" | Light surface | | lightText | "#242621" | Light text | | accent | "#b7db86" | Accent |