Navigation

Provide terminal-native local navigation, command menus, hierarchical trails, and workflow progress.

Overview

Provide terminal-native local navigation, command menus, hierarchical trails, and workflow progress.

Installation

npx @mwillbanks/tuil add tabs menu menubar breadcrumbs stepper tab-select pagination outline

The CLI writes source-owned components beneath the destination configured in tuil.config.ts; the default import below assumes src/components/tuil.

Loading executable example…

Components and subcomponents

API	Signature	Description
`Tabs`	`function Tabs`	Public function Tabs.
`Menu`	`function Menu`	Public function Menu.
`Menubar`	`function Menubar`	Public function Menubar.
`Breadcrumbs`	`function Breadcrumbs`	Public function Breadcrumbs.
`Stepper`	`function Stepper`	Public function Stepper.
`TabSelect`	`constant TabSelect`	Public constant TabSelect.
`Pagination`	`function Pagination`	Public function Pagination.
`Outline`	`function Outline`	Public function Outline.

Interaction

Arrow keys move within the active navigation model; Enter selects or activates.

API and events

Selections and value changes are reported through component callbacks.

Every interactive component publishes semantic roles, labels, state, and focus identity through the renderer's SemanticRegistry. Callback failures flow to the owning application's error boundary.

Documentation flow diagram. props and runtime state; semantic registration; focus and input routing; callback or state update; rerender; S0 leads to S1; S1 leads to S2; S2 leads to S3 — **Documentation flow diagram.** props and runtime state; semantic registration; focus and input routing; callback or state update; rerender; S0 leads to S1; S1 leads to S2; S2 leads to S3

Example

import type { ComponentProps } from "react";
import { Tabs } from "@/components/tuil/navigation/navigation";

export function Example(props: ComponentProps<typeof Tabs>) {
  return <Tabs {...props} />;
}

Registry-installed components are source-owned: customize the generated file in your application, and use the package reference for the shared runtime contracts.