Sidebar

インポート

'use client'

基本的な使い方

<SidebarProvider>
  <Sidebar>
    <SidebarHeader>
      <h2>アプリ名</h2>
    </SidebarHeader>
    <SidebarContent>
      <SidebarMenu>
        <SidebarMenuItem>
          <SidebarMenuButton asChild>
            <a href="/">
              <Icon name="Home" />
              ホーム
            </a>
          </SidebarMenuButton>
        </SidebarMenuItem>
        <SidebarMenuItem>
          <SidebarMenuButton asChild>
            <a href="/settings">
              <Icon name="Settings" />
              設定
            </a>
          </SidebarMenuButton>
        </SidebarMenuItem>
      </SidebarMenu>
    </SidebarContent>
    <SidebarFooter>
      <p>フッター</p>
    </SidebarFooter>
  </Sidebar>
  <main>
    <SidebarTrigger />
    メインコンテンツ
  </main>
</SidebarProvider>

Prop	Type	Default	Description
`side`	`'left' \| 'right'`	`'left'`	サイドバーの位置
`variant`	`'sidebar' \| 'floating' \| 'inset'`	`'sidebar'`	サイドバーのスタイル
`collapsible`	`'offcanvas' \| 'icon' \| 'none'`	`'offcanvas'`	折りたたみ方式

Sidebar

インポート

基本的な使い方

Props (Sidebar)

On this page