Neumorphism UI

Sidebar

デスクトップで縮小でき、モバイルではパネルとして開くアプリの常設ナビゲーションに使います。

プレビュー

ワークスペースのナビゲーション

概要と設定のメニュー項目に、アイコンへの縮小、ツールチップ、内容側の切り替えを組み合わせます。

プレビューを読み込んでいます。

インストール

この Registry を初めて使う場合は、先に 基本設定と共通スタイルの導入 を完了してください。

npx shadcn@latest add @neumorphism-ui/sidebar

共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。

Registry JSON

使い方

Sidebar と SidebarInset を SidebarProvider で囲みます。リンクをグループ化して現在地を示し、内容のヘッダーに名前付き SidebarTrigger を置きます。

"use client";

import { Sidebar, SidebarContent, SidebarInset, SidebarMenu, SidebarMenuItem, SidebarMenuLink, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";

export default function Example() {
  return (
    <SidebarProvider className="min-h-80">
      <Sidebar>
        <SidebarContent>
          <SidebarMenu>
            <SidebarMenuItem><SidebarMenuLink href="/projects" isActive>Projects</SidebarMenuLink></SidebarMenuItem>
            <SidebarMenuItem><SidebarMenuLink href="/settings">Settings</SidebarMenuLink></SidebarMenuItem>
          </SidebarMenu>
        </SidebarContent>
      </Sidebar>
      <SidebarInset>
        <header className="p-4"><SidebarTrigger /></header>
        <main className="p-4">Your projects</main>
      </SidebarInset>
    </SidebarProvider>
  );
}

API リファレンス

SidebarProvider が desktop・mobile 状態を管理します。Ctrl/Cmd+B は、その Provider のコンテンツ（モバイル Sheet を含む）にフォーカスがあるときに対応する Sidebar を切り替えます。デスクトップでは offcanvas または icon 幅に折りたたみ、モバイルでは既存の Sheet を再利用します。メニュー、tooltip、focus は既存のニューモーフィズム token を使います。

コンポーネントプロパティ型デフォルト説明
SidebarProviderdefaultOpen / open / onOpenChangeboolean / controlled state—デスクトップ sidebar の初期または controlled 開閉状態を管理します。
Sidebarcollapsible"offcanvas" | "icon" | "none""offcanvas"デスクトップでは offcanvas は折りたたむと非表示になり、icon はアイコン幅を維持します。none は全幅とメニューの文字を維持します。
Sidebarside / variant"left" | "right" / "sidebar" | "floating" | "inset"—配置する側と surface 表現を選びます。
SidebarTriggerlabelstring"Toggle sidebar"折りたたみボタンのアクセシブル名をローカライズします。
SidebarMenuButton / SidebarMenuLinkisActive / tooltipboolean / string—現在位置の表示と icon 折りたたみ時の tooltip を提供します。

アクセシビリティ

  • 01

    ナビゲーションリンクには実際の移動先と読み取れる名前を与え、現在位置には isActive を使用します。

  • 02

    icon 幅に折りたたんでもアクセシブル名を維持し、tooltip は名前の代替ではなく補助にします。

  • 03

    モバイル Sidebar は modal Sheet として Escape で閉じます。Ctrl または Command+B は、その Provider のコンテンツやモバイル Sheet にフォーカスがあるときだけ動作し、入力欄、文字変換中、処理済みのキーイベントはそのままにします。