شريط التنقّل الجانبي

شريط التنقّل الجانبي مكوّن تنقّل عمودي جانبي بحالات قابلة للتوسعة والطي.

Loading demo: nav-bar-real-world

التثبيت

npx sdaia-ui@latest add nav-bar

import { NavBar } from "@/components/ui/nav-bar"

<NavBar state="expanded" style="default" />

شريط تنقّل قياسي بالنمط الافتراضي. قم بتبديل حالة الموسَّع أو المطوي للمعاينة بكلا الحالتين.

Loading demo: nav-bar-default

شريط تنقّل بالنمط الرمادي.

Loading demo: nav-bar-gray

شريط تنقّل مع تطبيق لون الهوية البصرية.

Loading demo: nav-bar-brand

تخطيط شريط التنقّل مُحسَّن لشاشات الجوال.

Loading demo: nav-bar-mobile

خصائص مكوّن NavBar.

Prop	Type	Default	Required
variant	'default' \| 'gray' \| 'brand'	'default'	optional
collapsed	boolean	false	optional
mobile	boolean	false	optional
onToggle	() => void	-	optional
headerProps	Omit<HeaderItemProps, 'variant' \| 'size'>	-	optional
footerProps	Omit<FooterItemProps, 'variant' \| 'size'>	-	optional
groups	NavBarGroup[]	[]	optional