Skip to content
DOL Studio

Sidebar

Design: Stable Code: Coded navmenu 15 Figma sets .Sidebar/Menu item/Content/HV General

Live preview

Sidebar — full nav composition
Color emphasis — primary (brand) vs tertiary (slate)
color="primary"
color="tertiary"
Sub-items — level=2 with left indent

Import & files

Import
import { Sidebar } from "@dol/ui/sidebar";
Source file
packages/@dol/ui/src/sidebar/Sidebar.tsx

Figma source

Figma source 15 sets
Page
Sidebar
Sets
15
Primary set
.Sidebar/Menu item/Content/HV General · 12 variants Open in Figma →
Showing: .Sidebar/Menu item/Content/HV General
11 other sets (+ 3 more not listed)
  • Menu drawer/Menu item/Student view/1st 2 variants Figma →
  • Sideba menu item content/Data check, nhập liệu 3 variants Figma →
  • Sidebar menu item content/Admin General 12 variants Figma →
  • Sidebar User item/Section seperator 6 variants Figma →
  • Sidebar/Menu item/1st 12 variants Figma →
  • Sidebar/Menu item/2nd 10 variants Figma →
  • Sidebar/Menu item/Clean/1st 16 variants Figma →
  • Sidebar/Menu item/Clean/2nd 20 variants Figma →
  • Sidebar/Menu item/Student view/1st 9 variants Figma →
  • Sidebar/Menu item/Student view/2nd (New) 6 variants Figma →
  • Sidebar/Menu item/Student view/Block sub menu 2 variants Figma →

AI context

AI context

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

# Sidebar
Slug: `sidebar`
Domain: general · Category: navigation
Design: stable · Code: coded


## Description
15 sets covering nav items, menu drawers, and HV-General menu states. Pairs with LMS-role sidebar for role-scoped views.


## Import
```ts
import { Sidebar } from "@dol/ui/sidebar";
```
Source: `packages/@dol/ui/src/sidebar/Sidebar.tsx`


## Figma source
Page: Sidebar
Sets: 15
Primary: .Sidebar/Menu item/Content/HV General
Open: https://www.figma.com/design/DqRd7UQkNGcdvYL5fwZxlf/?node-id=14215-191072

Related

  • L
    lms

    LMS Role Sidebar

    Design only
  • Pressed

    Tabbar, Toggle

    Coded
    1. 1
    2. 2
      2
    3. 3
      3

    Steps

    Coded

  • Pagination

    Coded
  • HomeSectionCurrent

    Breadcrumb

    Coded
  • Nav item

    NavItem

    Code 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).