لف التطبيق بـ SidebarProvider ثم ضع Sidebar وSidebarInset. ينطوي إلى شريط أيقونات على سطح المكتب ودرج على الجوال، وينعكس جانبه في RTL.
متى تستخدمه
استخدم Sidebar تنقّلًا رئيسيًا لتطبيق يتطلّب تسجيل الدخول: لوحة إدارة، أو أداة إدارة معاملات، أو لوحة تحكّم للمستفيد بعدّة أقسام. غلّف التطبيق بـ SidebarProvider، وضع Sidebar، واعرض الصفحات داخل SidebarInset.
للمواقع العامة ذات الروابط القليلة، ترويسة مع SlideoutMenu في الجوال أخفّ.
الخصائص
الخصائص التي يعرّفها Sidebar. سمات العنصر الأصلي تمرّ كما هي.
<Sidebar>
| الخاصية | النوع | الافتراضي | الوصف |
|---|
variant | "sidebar" | "floating" | "inset" | – | |
collapsible | "icon" | "none" | "offcanvas" | – | |
side | "start" | "end" | – | Logical side; flips with dir. Default 'start'. |
<SidebarProvider>
| الخاصية | النوع | الافتراضي | الوصف |
|---|
defaultOpen | boolean | – | Uncontrolled initial desktop state. Default true (expanded). |
open | boolean | – | Controlled desktop open state. |
onOpenChange | (open: boolean) => void | – | |
mobileBreakpoint | number | – | Viewport width (px) below which the mobile Drawer engages. Default 768. |
keyboardShortcut | boolean | – | Register Cmd/Ctrl+B to toggle. Default true. |
<SidebarTrigger>
| الخاصية | النوع | الافتراضي | الوصف |
|---|
asChild | boolean | – | |
<SidebarInset>
| الخاصية | النوع | الافتراضي | الوصف |
|---|
asChild | boolean | – | |
scrollable | boolean | – | Make the inset its own vertical scroll region: tall content scrolls inside
it (the sidebar + footer stay put) with zero consumer layout CSS - no
flex / min-block-size:0 / overflow-y:auto boilerplate. The whole inset
scrolls, header included; for a fixed header with only the body scrolling,
leave this off and compose a nested scroll region inside the inset (see the
App shell story). |
<SidebarGroupAction>
| الخاصية | النوع | الافتراضي | الوصف |
|---|
asChild | boolean | – | |
<SidebarMenuButton>
| الخاصية | النوع | الافتراضي | الوصف |
|---|
size | "sm" | "md" | "lg" | – | |
asChild | boolean | – | |
isActive | boolean | – | |
tooltip | react.ReactNode | – | Tooltip content shown only when the rail is collapsed (desktop). |
<SidebarMenuAction>
| الخاصية | النوع | الافتراضي | الوصف |
|---|
asChild | boolean | – | |
showOnHover | boolean | – | Reveal the action only on row hover/focus (CSS-driven). |
<SidebarMenuSkeleton>
| الخاصية | النوع | الافتراضي | الوصف |
|---|
showIcon | boolean | – | |
<SidebarMenuSubButton>
| الخاصية | النوع | الافتراضي | الوصف |
|---|
size | "sm" | "md" | – | |
asChild | boolean | – | |
isActive | boolean | – | |
إمكانية الوصول
تُعرض القوائم قوائمَ من الأزرار والروابط، ويُعلّم العنصر النشط بـ aria-current. تعرض المجموعات القابلة للطي aria-expanded. عند الطي إلى سكّة الأيقونات، يعرض كل عنصر تلميحًا لتبقى التسمية متاحة.
للمشغّل اسم متاح، ويوفّر SidebarProvider اختصار لوحة مفاتيح تضبطه بـ keyboardShortcut. في الجوال يفتح الشريط لوحًا بحصر التركيز.