Components
Workspace and public navigation
A persistent creator rail and a focused public course header.
On this page
Purpose and composition
MainNav uses the shared shell predicate to choose the appropriate navigation for the route and session.
Anatomy
- Brand and contextual breadcrumbs
- Appearance control
- Feedback and new-course actions
- Grouped workspace rail
- Phone navigation disclosure
- Public course header action
Configuration and variants
| Input or variant | Contract |
|---|---|
| Workspace predicate | Authenticated workspace routes use the rail; auth and /classes routes use the public shell. |
| Groups | Teacher/student account context determines available links. |
| Active location | Current links expose aria-current. |
| New course | Creates a course through the app endpoint; documentation never calls a live endpoint. |
States and feedback
The reference shows desktop navigation, the full meaningful rail content, and the open phone menu in both themes. The skip link remains offscreen until keyboard focus.
Interaction and responsive behavior
Below 901px the fixed rail gives way to the mobile disclosure. Escape and outside interactions close the menu; selecting a destination closes it too.
Accessibility and known limits
The skip link targets main-content. The phone trigger exposes aria-expanded and a descriptive name. Do not remove the skip link from the source to improve a screenshot; avoid capturing unintended focus.
Source references
| File | Responsibility |
|---|---|
| src/components/MainNav.tsx | Navigation and disclosures |
| src/components/WorkspaceBreadcrumbs.tsx | Context |
| src/lib/navigation-shell.ts | Shell predicate |
Interface examples
Native TeachKit interfaces with fictional course, account, and learner records. Service responses and media are isolated demonstrations; no customer data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-22 · Revision 903bbf05ca9d · Documentation v2.0.0