Skip to content
DOL Studio

KidLmsNavbar

Design: extension Code: Code only KID kidlmsheader

Live preview

Inline preview (dropdown open by default — shows multi-student + parent hub chrome)
Simulate (closed state — click avatar pill to toggle)

Click avatar pill ở góc phải để mở dropdown phụ huynh + multi-student switcher.

Import & files

Import
import { KidLmsNavbar } from "@/components/Domains/DolKid/ui/KidLmsNavbar";
Source file
components/Domains/DolKid/ui/KidLmsNavbar.tsx

Examples

Examples 1
  • Requires Playground context

AI context

AI context

Markdown summary safe to paste into Claude / ChatGPT / Cursor — includes name, status, import, props, axes, examples, figma source. 

# KidLmsNavbar
Domain: kid · Category: navigation
Design: extension · Code: code-only


## Description
Top navbar for KID LMS - logo, profile dropdown, help. KID-specific styling.


## Import
```ts
import { KidLmsNavbar } from "@/components/Domains/DolKid/ui/KidLmsNavbar";
```
Source: `components/Domains/DolKid/ui/KidLmsNavbar.tsx`


## Examples
- **Requires Playground context**

Related

  • KidPillTabs

    KIDCode only
  • Bin

    KidAvatarDropdownMenu

    KIDCode only
  • L
    lms

    LMS Role Sidebar

    Design only
  • Kid Card
    Pressable surface

    KidCard

    KIDCode only

  • Số đếm

    KidPracticeCard

    KIDCode only
  • Chọn ảnh đại diện

    KidAvatarPickerModal

    KIDCode only

Status legend

Status legend
Stable
Design + code shipped, full DS parity.
Partial
Design ready, some variants/states missing in code.
Coded
Implemented in code; design canon may not yet exist.
Design only / Code only
One side present; awaiting the other.

Phase 1.X-5.2 detail view — read-only metadata. Code preview + recipe + live demo deferred (need @dol/ui registry integration).