ナビゲーションと開示@neumorphism-ui/sidebar

Sidebar

SidebarProvider が desktop・mobile 状態と Ctrl/Cmd+B を管理します。デスクトップでは offcanvas または icon 幅に折りたたみ、モバイルでは既存の Sheet を再利用します。メニュー、tooltip、focus は既存のニューモーフィズム token を使います。

@neumorphism-ui/sidebar

Registry JSON

プレビュー

概要

現在のプロジェクトの主要情報を確認します。

インストール

npx shadcn@latest add @neumorphism-ui/sidebar

CLI が npm 依存関係、base token、utils、コンポーネントソースを順番に処理します。

この Registry を初めて使う場合は、先に namespace の設定を完了してください。

使い方

Import

"use client";
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInset,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuLink,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar";

Example

export default function Example() {
  return <SidebarProvider className="min-h-80">
    <Sidebar collapsible="icon">
      <SidebarHeader><strong>Workspace</strong></SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>ナビゲーション</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuItem><SidebarMenuLink href="#overview" isActive tooltip="概要"><span aria-hidden="true">⌂</span><span>概要</span></SidebarMenuLink></SidebarMenuItem>
              <SidebarMenuItem><SidebarMenuLink href="#settings" tooltip="設定"><span aria-hidden="true">⚙</span><span>設定</span></SidebarMenuLink></SidebarMenuItem>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
    </Sidebar>
    <SidebarInset><header className="p-3"><SidebarTrigger label="サイドバーを切り替え" /></header><section id="overview" className="p-4">ワークスペース概要</section></SidebarInset>
  </SidebarProvider>;
}

API リファレンス

コンポーネント	プロパティ	型	デフォルト	説明
`SidebarProvider`	`defaultOpen / open / onOpenChange`	`boolean / controlled state`	`—`	デスクトップ sidebar の初期または controlled 開閉状態を管理します。
`Sidebar`	`collapsible`	`"offcanvas" \| "icon" \| "none"`	`"offcanvas"`	折りたたみ時に完全に隠すか icon 幅で残すか指定します。
`Sidebar`	`side / variant`	`"left" \| "right" / "sidebar" \| "floating" \| "inset"`	`—`	配置する側と surface 表現を選びます。
`SidebarTrigger`	`label`	`string`	`"Toggle sidebar"`	折りたたみボタンのアクセシブル名をローカライズします。
`SidebarMenuButton / SidebarMenuLink`	`isActive / tooltip`	`boolean / string`	`—`	現在位置の表示と icon 折りたたみ時の tooltip を提供します。

プレビュー

インストール

使い方

Import

Example

API リファレンス

アクセシビリティ