Components
Section navigation
Keep the current settings task clear on desktop and phone.
On this page
Purpose and composition
SidebarLayout composes a heading, local section navigation, and its content. SidebarNavDropdown replaces the section list at narrow widths.
Anatomy
- Section heading
- Desktop section links
- Mobile listbox trigger and attached options
- Content panel
Configuration and variants
| Input or variant | Contract |
|---|---|
| items | Each item has label, href, and icon. |
| Current route | Exact pathname match selects the active item; the first item is the fallback. |
| Selection | Listbox selection navigates through the router. |
States and feedback
Current, closed, open, and keyboard-highlighted options come from native links and Headless UI listbox behavior.
Interaction and responsive behavior
The dropdown appears below 768px. Its options remain attached to the trigger; capture the entire open control rather than cropping the options away.
Accessibility and known limits
Use the library’s keyboard and focus handling. The selector represents navigation, not an editable form field.
Source references
| File | Responsibility |
|---|---|
| src/components/SidebarLayout.tsx | Section composition |
| src/components/SidebarNav.tsx | Desktop links |
| src/components/SidebarNavDropdown.tsx | Phone listbox |
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