ضع التطبيق داخل 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 | – | Kept for compatibility. Since 1.5.0 the inset is always the shell's vertical scroll region, so
this has no effect. For a fixed header with only the body scrolling, nest a 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 | – | |
إمكانية الوصول
تعرض القوائم عناصرها في قوائم HTML من الأزرار والروابط، ويحمل العنصر النشط aria-current. تحمل المجموعات القابلة للطي aria-expanded. عند الطي إلى شريط الأيقونات، يعرض كل عنصر تلميحاً لتبقى التسمية متاحة.
للمشغل اسم متاح. يوفر SidebarProvider اختصار لوحة مفاتيح تضبطه بـ keyboardShortcut. في الجوال، يفتح الشريط درجاً يحصر التركيز.