Caroa UI

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>

Props (Sidebar)

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

On this page