React 组件

UGSidebar 侧边栏

UGSidebar 适合后台系统主导航、知识库侧栏与多模块工作台布局。

导入方式

按需从包入口导入组件，并在应用入口引入一次样式文件。

tsx

import { UGSidebar } from '@ug666/ui-react'

完整能力预览

内置搜索、多级菜单、展开折叠和移动端抽屉。

团队工作台

侧边栏用于组织导航，内容区可以承载不同业务页面。

项目

成员

待办

状态展示

可通过折叠状态在不同屏幕宽度下切换导航密度。

尺寸展示

内置标准宽度与折叠宽度两种展示模式。

展开：w-64折叠：w-16

代码示例

适合在后台布局组件中长期复用。

tsx

import { Home, Layers3, Settings, Users } from 'lucide-react'
import { UGButton, UGSidebar } from '@ug666/ui-react'

const items = [
  { label: '首页', href: '/dashboard', icon: Home, active: true },
  {
    label: '组件库',
    icon: Layers3,
    children: [
      { label: '表单组件', href: '/dashboard/form', icon: Settings },
      { label: '反馈组件', href: '/dashboard/feedback', icon: Settings },
    ],
  },
  { label: '成员', href: '/dashboard/users', icon: Users },
  { label: '设置', href: '/dashboard/settings', icon: Settings },
]

export function DashboardSidebar() {
  return (
    <UGSidebar
      items={items}
      variant="dark"
      searchable
      collapsible
      footer={<UGButton variant="ghost">退出登录</UGButton>}
    />
  )
}

Props

属性	类型	默认值	说明
items	SidebarItem[]	[]	导航项列表，支持 children 多级菜单。
variant	'primary' \| 'dark'	'primary'	侧边栏视觉风格，dark 更适合浅色后台壳层。
collapsed	boolean	undefined	受控折叠状态。
defaultCollapsed	boolean	false	非受控折叠初始状态。
collapsible	boolean	false	显示内置展开/折叠按钮。
searchable	boolean	false	显示内置菜单搜索。
responsive	boolean	false	启用移动端抽屉模式。
mobileOpen	boolean	false	移动端抽屉是否打开。
footer	ReactNode	—	底部额外操作区域。