Navigation, Forms & Data

Navigation

Global navigation only carries persistent cross-page entries; in-page action buttons must not be mixed into it. The current location must be conveyed by at least two of these three signals: page heading, highlighted nav menu item, and breadcrumbs. On mobile, after the menu opens, focus should move inside the menu automatically, and the menu should close and return to the originating page through standard operations.

Buttons

A single action area usually has one primary button. Button text uses a "verb + object" format (e.g. "Save settings", "Download SVG") instead of an ambiguous single "OK". High-risk or irreversible actions must be paired with danger colors and require a confirmation dialog before executing.

Links navigate; buttons change state. The two cannot be swapped based on appearance alone.

Forms

• Place form labels above their controls, with supporting guidance and error messages nearby.
• Required states must be clearly identifiable before submission, not only revealed after validation fails.
• Format validation should preserve the user's previous input and, on failure, automatically move focus to an error summary or the first failing field.
• Never convey success or validation errors through color alone.
• For anything involving passwords, access tokens, or personal sensitive information, the form must clearly state why it collects the data, where it is stored, and how it is destroyed.

Data Tables

Headers must clearly describe the data dimensions using proper th tags. In data tables, right-align numeric columns and left-align text columns; timestamps must state a specific timezone or show a tooltip with the full absolute time alongside relative time. On narrow screens, prioritize core columns and allow horizontal scrolling within the container.

Dialogs

Use modal dialogs only when the current flow must be interrupted. When a dialog opens, focus moves to its heading or first actionable element; when it closes, focus returns to the triggering button. Avoid forcing forms with many inputs or regular detail pages into dialogs.