Components
Creator section navigation
Keep a creator in the same course while they move between identity, lessons, instructions, registration and integrations.
On this page
Purpose and usage
Keep a creator in the same course while they move between identity, lessons, instructions, registration and integrations.
Anatomy
| Part | Contract |
|---|---|
| Desktop sidebar | Course-section links |
| Phone trigger | Active label, icon and chevron |
| Menu | Absolutely positioned listbox options |
| Content | White bordered section panel |
Variants and configuration
| Input or variant | Behavior |
|---|---|
| items | label, href and icon |
| Active destination | Pathname match, with first item fallback |
| Routing | Selected phone option calls router.push |
| Layout | SidebarLayout controls md breakpoint |
State coverage
| State | Implemented behavior |
|---|---|
| Desktop | Sidebar visible |
| Phone | Dropdown replaces sidebar |
| Open | Options remain attached below trigger |
| Route changed | Active item derives from new pathname |
Interaction and composition
- Use resolveCourseSidebar for actual course destinations.
- Use native-width parent context for isolated captures.
- Reserve room for the full open menu and its shadow.
- CourseEditLayout is a separate implementation; select the wrapper deliberately.
Accessibility and readiness
Use Headless UI’s actual listbox and test arrow keys, Escape, focus restoration and route announcements. Full-menu capture does not establish keyboard success. The current capture includes real navigation plus an isolated open specimen.
Source references
| File | Responsibility |
|---|---|
| src/components/SidebarLayout.tsx | Responsive creator shell |
| src/components/SidebarNav.tsx | Desktop destinations |
| src/components/SidebarNavDropdown.tsx | Phone Headless UI Listbox |
| src/constants/sidebars.tsx | Course destination definitions |
Examples from the app
Actual TeachKit UI with Thomas McGee’s course content. Session, progress and connection specimens are simulated; no student data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision d8cf23d0a329 · Documentation v0.1