adx design system · Chapter 02

Navigation always know where you stand

A document moves through stages, reviews and files. These are the pieces that keep the reader oriented — crumbs that double as the page header, tabs for in-page views, and the stepper that draws the whole approval path.

Navigation anatomyLive from adx
CM Review
Designer Review
CM Final
Published
The trail above and the stage strip below bracket every document page.
Views

One page, many views

Segmented controls carry the in-page views: the tab bar for lists, the file tabs with live counts on a register, and the stage strip that shows how far a document has travelled.

AdxTabBar
Try it — the selection is real state, exactly as the app renders it.
dot = something to look at · admin tab bars stay text-only (no icons)
FileTabs / PageStageStrip
CM Review
Designer Review
CM Final
Published
the register chrome: tabs with counts on top, the stage strip under the header
Workflow stepper

Every stage, one glance

The approval path as a single line — who acted, when, where the document stands now, and the rework arc looping back to an earlier stage. The same component draws every document type's flow.

AdxStepper
Draft
2026-06-10
Somchai Jaidee
CM Review
2026-06-11
Anan
Change Request
2026-06-12
Pim
CM Final
Published
state: done | current | upcoming | rejected | revising | bypassed · loops draws the rework arc
Accordion

Long pages, folded neatly

Settings and report pages fold their sections behind the same two-weight headings the rest of the system uses. A lazy variant fetches its content on first expand, so a heavy page opens light.

AdxAccordion

by document type

Panel content — any children. Headings use the same two-weight pair as AdxHeading.
allowMultiple keeps more than one open · AdxLazyAccordionItem fetches on first expand

You know the way, now act

Orientation done — the next chapter is the hands: buttons, icon actions and the badges that label a row.

FoundationsFormsDataFeedback