--- title: Sidebar description: "`Sidebar`は、サイドバーにアイテムのリストを表示するコンポーネントです。" links: - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/sidebar/sidebar.style.ts - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/sidebar - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-sidebar--basic --- # Sidebar `Sidebar`は、サイドバーにアイテムのリストを表示するコンポーネントです。 ```tsx Documentation v2.2.0 Get Started Styling Theming Hirotomo Yamada hirotomo.yamada@avap.co.jp } /> ``` ## 使い方 ```tsx import { Sidebar } from "@yamada-ui/react" ``` ```tsx import { Sidebar } from "@/components/ui" ``` ```tsx import { Sidebar } from "@workspaces/ui" ``` ```tsx ``` ### フレームワークと統合する [Next.js](https://nextjs.org/)などのフレームワークと統合する場合は、フレームワークから提供されているリンクのコンポーネントを`linkProps.as`に設定します。また、ルーティングと同期させる場合は、フレームワークから提供されている現在のパスを取得する関数またはフックの返り値を`selectedValue`に設定します。 ```tsx "use client" import { usePathname } from "next/navigation" import Link from "next/link" function Layout({ children }: { children: React.ReactNode }) { const pathname = usePathname() return ( ) } ``` ### itemsを使う ```tsx const items = useMemo( () => [ { children: [ { label: "Overview", value: "/docs/get-started" }, { label: "CLI", value: "/docs/get-started/cli" }, { children: [ { label: "Next.js (App)", value: "/get-started/frameworks/next-app", }, { label: "Next.js (Pages)", value: "/get-started/frameworks/next-pages", }, { label: "Vite", value: "/get-started/frameworks/vite" }, { label: "React Router", value: "/get-started/frameworks/react-router", }, { label: "TanStack Start", value: "/get-started/frameworks/tanstack-start", }, { label: "TanStack Router", value: "/get-started/frameworks/tanstack-router", }, ], label: "Frameworks", value: "/get-started/frameworks", }, ], group: true, label: "Get Started", }, { children: [ { label: "Overview", value: "/styling/overview" }, { label: "Style Props", value: "/styling/style-props" }, ], group: true, label: "Styling", }, { children: [ { label: "Overview", value: "/theming/overview" }, { label: "Customization", value: "/theming/customization" }, ], group: true, label: "Theming", }, ], [], ) return ( } header={} items={items} /> } /> ) ``` ### バリアントを変更する ```tsx } header={} items={sidebarItems} /> } /> ``` ```tsx } header={} items={sidebarItems} /> } /> ``` ### カラースキームを変更する ```tsx } header={} items={sidebarItems} /> } /> ``` ### モードを変更するモードを変更する場合は、`mode`に`"offcanvas"`または`"icon"`を設定します。デフォルトは、`"offcanvas"`です。 ```tsx } header={} items={sidebarItems} /> } /> ``` ```tsx const items = useMemo( () => [ { children: [ { label: "Installation", startElement: , value: "/get-started/installation", }, { label: "CLI", startElement: , value: "/get-started/cli", }, ], label: "Get Started", startElement: , value: "/get-started", }, { children: [ { label: "Overview", startElement: , value: "/styling/overview", }, { label: "Style Props", startElement: , value: "/styling/style-props", }, ], label: "Styling", startElement: , value: "/styling", }, { children: [ { label: "Overview", startElement: , value: "/theming/overview", }, { label: "Customization", startElement: , value: "/theming/customization", }, ], label: "Theming", startElement: , value: "/theming", }, ], [], ) return ( } header={} items={items} /> } /> ) ``` ### 形を変更する ```tsx } header={} items={sidebarItems} /> } /> ``` ```tsx } header={} items={sidebarItems} /> } /> ``` ```tsx } header={} items={sidebarItems} /> } /> ``` ### 配置を変更する配置を変更する場合は、`placement`に`"start"`または`"end"`を設定します。デフォルトは、`"start"`です。 ```tsx } header={} items={sidebarItems} /> } /> ``` モバイル用の配置をオーバーライドする場合は、`drawerProps`に`placement`を設定します。 ```tsx } header={} items={sidebarItems} drawerProps={{ placement: "inline-end" }} /> } /> ``` ### ブレイクポイントを変更するモバイル用に切り替えるブレイクポイントを変更する場合は、`breakpoint`に値を設定します。この値は、[ブレイクポイント](https://yamada-ui.com/docs/theming/tokens/breakpoints.md)を参照しています。 ```tsx } header={} items={sidebarItems} /> } /> ``` ### ブレイクポイントを無効にするモバイル用に切り替えるブレイクポイントを無効にする場合は、`breakpoint`に`false`を設定します。 ```tsx } header={} items={sidebarItems} /> } /> ``` ### デフォルトで閉じた状態にするデフォルトで閉じた状態にする場合は、`disclosure.desktop.defaultOpen`を`false`に設定します。 ```tsx } header={} items={sidebarItems} /> } /> ``` ### 特定の項目を選択済みにする特定の項目を選択済みにする場合は、`defaultSelectedValue`に項目の値を設定します。 ```tsx } header={} items={sidebarItems} /> } /> ``` ### 特定の項目を展開済みにする最初から特定の項目を展開済みにする場合は、`defaultExpandedValue`に項目の値を設定します。 ```tsx } header={} items={sidebarItems} /> } /> ``` ### 項目を無効にする項目を無効にする場合は、`disabled`を設定します。 ```tsx const items = useMemo( () => [ { children: [ { label: "Installation", value: "/get-started/installation" }, { label: "CLI", value: "/get-started/cli" }, { children: [ { label: "Next.js (App)", value: "/get-started/frameworks/nextjs-app", }, { label: "Next.js (Pages)", value: "/get-started/frameworks/nextjs-pages", }, { label: "Vite", value: "/get-started/frameworks/vite" }, { label: "React Router", value: "/get-started/frameworks/react-router", }, { label: "TanStack Start", value: "/get-started/frameworks/tanstack-start", }, { label: "TanStack Router", value: "/get-started/frameworks/tanstack-router", }, ], label: "Frameworks", value: "/get-started/frameworks", }, ], disabled: true, label: "Get Started", value: "/get-started", }, { children: [ { label: "Overview", value: "/styling/overview" }, { disabled: true, label: "Style Props", value: "/styling/style-props" }, ], label: "Styling", value: "/styling", }, { children: [ { label: "Overview", value: "/theming/overview" }, { label: "Customization", value: "/theming/customization" }, ], label: "Theming", value: "/theming", }, ], [], ) return ( } header={} items={items} /> } /> ) ``` ### ローカルストレージに値を保存する ```tsx const [defaultOpen, setDefaultOpen] = useLocalStorage({ key: "sidebar-expanded", defaultValue: true, getInitialValueInEffect: false, }) const disclosure = useDisclosure({ defaultOpen, onClose: () => setDefaultOpen(false), onOpen: () => setDefaultOpen(true), }) return ( } header={} items={sidebarItems} /> } /> ) ``` ### Cookieに値を保存する ```tsx preview functional iframe client const key = "sidebar-expanded" const getStorage = useCallback(() => { const match = document.cookie.match(new RegExp(`(^| )${key}=([^;]+)`)) return match ? match[2] === "true" : true }, []) const setStorage = useCallback((value: boolean) => { document.cookie = `${key}=${value}; max-age=31536000; path=/` }, []) const disclosure = useDisclosure({ defaultOpen: getStorage(), onClose: () => setStorage(false), onOpen: () => setStorage(true), }) return ( } header={} items={sidebarItems} /> } /> ) ``` ### グループガイドラインを表示するグループガイドラインを表示する場合は、`withGroupGuideLine`を`true`に設定します。 ```tsx } header={} items={sidebarItems} /> } /> ``` ### ガイドラインを表示するガイドラインを表示する場合は、`withGuideLine`を`true`に設定します。 ```tsx } header={} items={sidebarItems} /> } /> ``` ### セパレーターを追加する ```tsx const items = useMemo( () => [ { children: [ { label: "Installation", value: "/get-started/installation" }, { label: "CLI", value: "/get-started/cli" }, { children: [ { label: "Next.js (App)", value: "/get-started/frameworks/nextjs-app", }, { label: "Next.js (Pages)", value: "/get-started/frameworks/nextjs-pages", }, { label: "Vite", value: "/get-started/frameworks/vite" }, { label: "React Router", value: "/get-started/frameworks/react-router", }, { label: "TanStack Start", value: "/get-started/frameworks/tanstack-start", }, { label: "TanStack Router", value: "/get-started/frameworks/tanstack-router", }, ], label: "Frameworks", value: "/get-started/frameworks", }, ], label: "Get Started", value: "/get-started", }, { children: [ { label: "Overview", value: "/styling/overview" }, { label: "Style Props", value: "/styling/style-props" }, ], label: "Styling", value: "/styling", }, { children: [ { label: "Overview", value: "/theming/overview" }, { label: "Customization", value: "/theming/customization" }, ], label: "Theming", value: "/theming", }, ], [], ) return ( } header={} items={items} withHandle={false} contentProps={{ css: { "& > li": { _after: { borderBottomWidth: "1px", mt: "{side-panel-space}", mx: "calc({side-panel-space} * -1)", }, }, }, gap: "{side-panel-space}", py: "{side-panel-space}", }} footerProps={{ borderTopWidth: "1px" }} headerProps={{ borderBottomWidth: "1px" }} /> } /> ) ``` ### インジケーターを非表示にするインジケーターを非表示にする場合は、`indicatorHidden`を`true`に設定します。 ```tsx } header={} indicatorHidden items={sidebarItems} /> } /> ``` ### アニメーションを無効にする展開・折りたたみ時のアニメーションを無効にする場合は、`animated`を`false`に設定します。 ```tsx } header={} items={sidebarItems} /> } /> ``` ### リサイズハンドルを無効にするリサイズハンドルを無効にする場合は、`withHandle`を`false`に設定します。デフォルトは、`true`です。 ```tsx } header={} items={sidebarItems} withHandle={false} /> } /> ``` ### 非同期で読み込む項目の子要素を非同期で読み込む場合は、`children`の代わりに`asyncChildren`を使用します。 ```tsx const items = useMemo( () => [ { asyncChildren: async () => { await wait(1000) return [ { label: "Installation", value: "/get-started/installation" }, { label: "CLI", value: "/get-started/cli" }, { asyncChildren: async () => { await wait(1000) return [ { label: "Next.js (App)", value: "/get-started/frameworks/nextjs-app", }, { label: "Next.js (Pages)", value: "/get-started/frameworks/nextjs-pages", }, { label: "Vite", value: "/get-started/frameworks/vite" }, { label: "React Router", value: "/get-started/frameworks/react-router", }, { label: "TanStack Start", value: "/get-started/frameworks/tanstack-start", }, { label: "TanStack Router", value: "/get-started/frameworks/tanstack-router", }, ] }, label: "Frameworks", value: "/get-started/frameworks", }, ] }, label: "Get Started", value: "/get-started", }, { asyncChildren: async () => { await wait(1000) return [ { label: "Overview", value: "/styling/overview" }, { label: "Style Props", value: "/styling/style-props" }, ] }, label: "Styling", value: "/styling", }, { asyncChildren: async () => { await wait(1000) return [ { label: "Overview", value: "/theming/overview" }, { label: "Customization", value: "/theming/customization" }, ] }, label: "Theming", value: "/theming", }, ], [], ) return ( } header={} items={items} /> } /> ) ``` ### ローディングスキームを変更する ```tsx const items = useMemo( () => [ { asyncChildren: async () => { await wait(1000) return [ { label: "Installation", value: "/get-started/installation" }, { label: "CLI", value: "/get-started/cli" }, ] }, label: "Get Started", value: "/get-started", }, { asyncChildren: async () => { await wait(1000) return [ { label: "Overview", value: "/styling/overview" }, { label: "Style Props", value: "/styling/style-props" }, ] }, label: "Styling", value: "/styling", }, { asyncChildren: async () => { await wait(1000) return [ { label: "Overview", value: "/theming/overview" }, { label: "Customization", value: "/theming/customization" }, ] }, label: "Theming", value: "/theming", }, ], [], ) return ( } header={} items={items} loadingScheme="dots" /> } /> ) ``` ### 項目をすべて展開・折りたたむ項目をすべて展開または折りたたむ場合は、`controlRef`を使用します。 ```tsx const controlRef = useRef(null) const items = useMemo( () => [ { children: [ { label: "Installation", value: "/get-started/installation" }, { label: "CLI", value: "/get-started/cli" }, { children: [ { label: "Next.js (App)", value: "/get-started/frameworks/nextjs-app", }, { label: "Next.js (Pages)", value: "/get-started/frameworks/nextjs-pages", }, { label: "Vite", value: "/get-started/frameworks/vite" }, { label: "React Router", value: "/get-started/frameworks/react-router", }, { label: "TanStack Start", value: "/get-started/frameworks/tanstack-start", }, { label: "TanStack Router", value: "/get-started/frameworks/tanstack-router", }, ], label: "Frameworks", value: "/get-started/frameworks", }, ], label: "Get Started", value: "/get-started", }, { children: [ { label: "Overview", value: "/styling/overview" }, { label: "Style Props", value: "/styling/style-props" }, ], label: "Styling", value: "/styling", }, { children: [ { label: "Overview", value: "/theming/overview" }, { label: "Customization", value: "/theming/customization" }, ], label: "Theming", value: "/theming", }, ], [], ) return ( } header={} items={items} /> } /> controlRef.current?.expand()}> Expand All controlRef.current?.collapse()}> Collapse All ) ``` ### 要素をカスタマイズする ```tsx } header={} items={sidebarItems} startElement={{ group: ({ expanded }) => expanded ? : , item: , }} /> } /> ``` ```tsx }} footer={} header={} items={sidebarItems} /> } /> ``` ```tsx }} footer={} header={} items={sidebarItems} render={{ item: ({ children, endElement, group, label, selected, value, itemProps, linkProps, triggerProps, onSelectedChange, }) => { return ( {group ? ( <> onSelectedChange(value)} > {label} { ev.preventDefault() ev.stopPropagation() })} > {children} ) : ( <> {label} { ev.preventDefault() ev.stopPropagation() }} > {endElement.item} { ev.preventDefault() ev.stopPropagation() }} /> )} ) }, }} /> } /> ``` ### インジケーターをカスタマイズする ```tsx } header={} indicator={({ expanded }) => (expanded ? : )} items={sidebarItems} indicatorProps={{ _expanded: { transform: "rotate(0deg)" } }} /> } /> ``` ### 制御する ```tsx const [selectedValue, setSelectedValue] = useState( "/get-started/installation", ) const [expandedValue, setExpandedValue] = useState(["/get-started"]) const desktopDisclosure = useDisclosure({ defaultOpen: true }) const mobileDisclosure = useDisclosure() return ( } header={} items={sidebarItems} /> } /> Selected Value: {selectedValue} Expanded Value: {expandedValue.join(", ")} Desktop Open: {desktopDisclosure.open.toString()} Mobile Open: {mobileDisclosure.open.toString()} ) ``` ## Props ### Sidebar.Root | Prop | Default | Type | Description | | ---------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | | `as` | - | `As` | The HTML element to render. | | `asChild` | - | `boolean` | Merges its props onto its immediate child. | | `css` | - | `CSSObject \| CSSObject[]` | The CSS object. | | `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. | | `variant` | `"subtle"` | `"outline" \| "solid" \| "subtle" \| "surface"` | The variant of the component. | | `breakpoint` | `"md"` | `Exclude \| false` | The breakpoint to use for the sidebar. If `false`, the sidebar will be always visible. | | `controlRef` | - | `RefObject` | Ref of the sidebar callbacks. | | `defaultExpandedValue` | - | `string[]` | The initial expanded value of the sidebar. | | `defaultSelectedValue` | - | `string` | The initial selected value of the sidebar. | | `disclosure` | - | `{ desktop?: Omit, void \| Promise>, "timing"> \| undefined; mobile?: Omit<...> \| undefined; }` | The disclosure props for the desktop and mobile. | | `expandedValue` | - | `string[]` | The expanded value of the sidebar. | | `onExpandedChange` | - | `(value: string[]) => void` | The callback invoked when expanded value changes. | | `onSelectedChange` | - | `(value: string) => void` | The callback invoked when selected value changes. | | `selectedValue` | - | `string` | The selected value of the sidebar. | ### Sidebar.Content | Prop | Default | Type | Description | | ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | | `as` | - | `As` | The HTML element to render. | | `asChild` | - | `boolean` | Merges its props onto its immediate child. | | `css` | - | `CSSObject \| CSSObject[]` | The CSS object. | | `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. | | `items` | - | `SidebarItem[]` | If provided, generate elements based on items. | ### Sidebar.Footer | Prop | Default | Type | Description | | ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | | `as` | - | `As` | The HTML element to render. | | `asChild` | - | `boolean` | Merges its props onto its immediate child. | | `css` | - | `CSSObject \| CSSObject[]` | The CSS object. | | `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. | ### Sidebar.Group | Prop | Default | Type | Description | | -------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | | `as` | - | `As` | The HTML element to render. | | `asChild` | - | `boolean` | Merges its props onto its immediate child. | | `css` | - | `CSSObject \| CSSObject[]` | The CSS object. | | `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. | | `contentProps` | - | `Omit` | Props for the content component. | | `items` | - | `SidebarItemWithValue[]` | If provided, generate elements based on items. | | `label` | - | `ReactNode` | The label of the group. | | `labelProps` | - | `HTMLStyledProps<"span">` | Props for the label component. | ### Sidebar.GroupContent | Prop | Default | Type | Description | | ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | | `as` | - | `As` | The HTML element to render. | | `asChild` | - | `boolean` | Merges its props onto its immediate child. | | `css` | - | `CSSObject \| CSSObject[]` | The CSS object. | | `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. | ### Sidebar.GroupLabel | Prop | Default | Type | Description | | ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | | `as` | - | `As` | The HTML element to render. | | `asChild` | - | `boolean` | Merges its props onto its immediate child. | | `css` | - | `CSSObject \| CSSObject[]` | The CSS object. | | `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. | ### Sidebar.Handle | Prop | Default | Type | Description | | ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | | `as` | - | `As` | The HTML element to render. | | `asChild` | - | `boolean` | Merges its props onto its immediate child. | | `css` | - | `CSSObject \| CSSObject[]` | The CSS object. | | `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. | ### Sidebar.Header | Prop | Default | Type | Description | | ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | | `as` | - | `As` | The HTML element to render. | | `asChild` | - | `boolean` | Merges its props onto its immediate child. | | `css` | - | `CSSObject \| CSSObject[]` | The CSS object. | | `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. | ### Sidebar.Item | Prop | Default | Type | Description | | ------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | | `as` | - | `As` | The HTML element to render. | | `asChild` | - | `boolean` | Merges its props onto its immediate child. | | `css` | - | `CSSObject \| CSSObject[]` | The CSS object. | | `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. | | `value` | - | `string` | The value of the item. | | `animated` | `true` | `boolean` | If `true`, the sidebar item will be animated. | | `asyncChildren` | - | `() => Promise` | If provided, the sidebar item will be rendered as an async sidebar item. | | `contentProps` | - | `Omit` | Props for the content component. | | `defaultOpen` | - | `boolean` | If `true`, the element will be initially opened. | | `disabled` | `false` | `boolean` | If `true`, the tree item will be disabled. | | `endElement` | - | `SidebarItemReactNode` | The element to display at the end of the item. | | `endElementProps` | - | `SidebarItemEndElementProps` | Props for the end component. | | `external` | `false` | `boolean` | If `true`, the link will open in new tab. | | `indicator` | - | `ReactNodeOrFunction` | The sidebar item indicator icon to use. | | `indicatorProps` | - | `SidebarItemIndicatorProps` | Props for the indicator component. | | `items` | - | `SidebarItemWithValue[]` | If provided, generate elements based on items. | | `label` | - | `ReactNode` | The label to display in the item. | | `labelProps` | - | `SidebarItemLabelProps` | Props for the label component. | | `linkProps` | - | `SidebarItemLinkProps` | Props for the link component. | | `loadingScheme` | `"oval"` | `Loading.Scheme` | The loading scheme. | | `onClose` | - | `() => void \| Promise` | Callback invoked to close the element. | | `onOpen` | - | `() => void \| Promise` | Callback invoked to open the element. | | `open` | - | `boolean` | If `true`, the element will be opened. | | `render` | - | `SidebarItemRender` | If provided, the sidebar item will be rendered with custom components. | | `startElement` | - | `SidebarItemReactNode` | The element to display at the start of the item. | | `startElementProps` | - | `SidebarItemStartElementProps` | Props for the start component. | | `tooltipProps` | - | `Omit` | Props for the tooltip component. | | `triggerProps` | - | `SidebarItemTriggerProps` | Props for the trigger component. | ### Sidebar.ItemContent | Prop | Default | Type | Description | | ------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `as` | - | `As` | The HTML element to render. | | `asChild` | - | `boolean` | Merges its props onto its immediate child. | | `css` | - | `CSSObject \| CSSObject[]` | The CSS object. | | `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. | | `enter` | - | `any` | Custom `enter`. | | `exit` | - | `any` | Custom `exit`. A target to animate to when this component is removed from the tree. This component **must** be the first animatable child of an `AnimatePresence` to enable this exit animation. This limitation exists because React doesn't allow components to defer unmounting until after an animation is complete. Once this limitation is fixed, the `AnimatePresence` component will be unnecessary. | | `initial` | - | `any` | Custom `initial`. Properties, variant label or array of variant labels to start in. Set to `false` to initialise with the values in `animate` (disabling the mount animation) | | `animationOpacity` | `true` | `boolean` | If `true`, the opacity of the content will be animated. | | `delay` | `0` | `number \| MotionLifecycleProps` | Custom `delay` definition for `enter` and `exit`. | | `duration` | `0.2` | `number \| MotionLifecycleProps` | Custom `duration` definition for `enter` and `exit`. | | `open` | - | `boolean` | Show the component. triggers when enter or exit states. | | `transition` | - | `MotionLifecycleProps` | Custom `transition` definition for `enter` and `exit`. | | `transitionEnd` | - | `MotionLifecycleProps` | Custom `transitionEnd` definition for `enter` and `exit`. | | `unmountOnExit` | - | `boolean` | If `true`, the element will unmount when `open={false}` and animation is done. | ### Sidebar.ItemEndElement | Prop | Default | Type | Description | | ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | | `as` | - | `As` | The HTML element to render. | | `asChild` | - | `boolean` | Merges its props onto its immediate child. | | `css` | - | `CSSObject \| CSSObject[]` | The CSS object. | | `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. | ### Sidebar.ItemIndicator | Prop | Default | Type | Description | | ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | | `as` | - | `As` | The HTML element to render. | | `asChild` | - | `boolean` | Merges its props onto its immediate child. | | `css` | - | `CSSObject \| CSSObject[]` | The CSS object. | | `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. | ### Sidebar.ItemLabel | Prop | Default | Type | Description | | ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | | `as` | - | `As` | The HTML element to render. | | `asChild` | - | `boolean` | Merges its props onto its immediate child. | | `css` | - | `CSSObject \| CSSObject[]` | The CSS object. | | `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. | ### Sidebar.ItemLink | Prop | Default | Type | Description | | ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | | `as` | - | `As` | The HTML element to render. | | `asChild` | - | `boolean` | Merges its props onto its immediate child. | | `css` | - | `CSSObject \| CSSObject[]` | The CSS object. | | `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. | ### Sidebar.ItemStartElement | Prop | Default | Type | Description | | ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | | `as` | - | `As` | The HTML element to render. | | `asChild` | - | `boolean` | Merges its props onto its immediate child. | | `css` | - | `CSSObject \| CSSObject[]` | The CSS object. | | `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. | ### Sidebar.ItemTrigger | Prop | Default | Type | Description | | ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | | `as` | - | `As` | The HTML element to render. | | `asChild` | - | `boolean` | Merges its props onto its immediate child. | | `css` | - | `CSSObject \| CSSObject[]` | The CSS object. | | `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. | ### Sidebar.MainPanel | Prop | Default | Type | Description | | ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | | `as` | - | `As` | The HTML element to render. | | `asChild` | - | `boolean` | Merges its props onto its immediate child. | | `css` | - | `CSSObject \| CSSObject[]` | The CSS object. | | `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. | ### Sidebar.Menu | Prop | Default | Type | Description | | ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | | `as` | - | `As` | The HTML element to render. | | `asChild` | - | `boolean` | Merges its props onto its immediate child. | | `css` | - | `CSSObject \| CSSObject[]` | The CSS object. | | `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. | ### Sidebar.MenuButton | Prop | Default | Type | Description | | ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | | `as` | - | `As` | The HTML element to render. | | `asChild` | - | `boolean` | Merges its props onto its immediate child. | | `css` | - | `CSSObject \| CSSObject[]` | The CSS object. | | `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. | ### Sidebar.SidePanel | Prop | Default | Type | Description | | -------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | | `as` | - | `As` | The HTML element to render. | | `asChild` | - | `boolean` | Merges its props onto its immediate child. | | `css` | - | `CSSObject \| CSSObject[]` | The CSS object. | | `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. | | `animated` | `true` | `boolean` | If `true`, the sidebar item will be animated. | | `content` | - | `ReactNode` | The content of the sidebar. | | `contentProps` | - | `SidebarContentProps` | Props for the content component. | | `drawerProps` | - | `Omit< | Drawer.RootProps, \| "body" \| "cancel" \| "children" \| "footer" \| "header" \| "middle" \| "onCancel" \| "onClose" \| "onMiddle" \| "onOpen" \| "onSuccess" \| "open" \| "success" \| "title" \| "trigger" > `| Props for the drawer component. | |`endElement`| - |`string \| number \| bigint \| boolean \| ReactElement> \| Iterable \| ... 4 more ... \| { ...; }`| The element to display at the end of the item. | |`endElementProps`| - |`SidebarItemEndElementProps`| Props for the end component. | |`footer`| - |`ReactNode`| The footer of the sidebar. | |`footerProps`| - |`SidebarFooterProps`| Props for the footer component. | |`groupContentProps`| - |`Omit`| Props for the group content component. | |`groupProps`| - |`Omit`| Props for the group component. | |`handleProps`| - |`SidebarHandleProps`| Props for the handle component. | |`header`| - |`ReactNode`| The header of the sidebar. | |`headerProps`| - |`SidebarHeaderProps`| Props for the header component. | |`indicator`| - |`string \| number \| bigint \| boolean \| ReactElement> \| Iterable \| ReactPortal \| Promise<...> \| ((props: SidebarItemCallBackProps) => ReactNode)`| The sidebar item indicator icon to use. | |`indicatorHidden`|`false`|`boolean`| If`true`, hide the tree indicator icon for all items. | | `indicatorProps`| - |`SidebarItemIndicatorProps`| Props for the indicator component. | |`itemContentProps`| - |`SidebarItemContentProps`| Props for the item content component. | |`itemProps`| - |`Omit< SidebarItemProps, "children" \| "items" \| "label" \| "open" \| "value" > `| Props for the item component. | |`items`| - |`SidebarItem[]`| If provided, generate elements based on items. | |`labelProps`| - |`SidebarItemLabelProps`| Props for the label component. | |`linkProps`| - |`SidebarItemLinkProps`| Props for the link component. | |`loadingScheme`|`"oval"`|`LoadingScheme`| The loading scheme. | |`menuProps`|`"md"`|`SidebarMenuProps`| Props for the menu component. | |`render`| - |`SidebarItemRender`| If provided, the sidebar item will be rendered with custom components. | |`startElement`| - |`string \| number \| bigint \| boolean \| ReactElement> \| Iterable \| ... 4 more ... \| { ...; }`| The element to display at the start of the item. | |`startElementProps`| - |`SidebarItemStartElementProps`| Props for the start component. | |`tooltipProps`| - |`Omit`| Props for the tooltip component. | |`triggerProps`| - |`SidebarItemTriggerProps`| Props for the trigger component. | |`withHandle`|`true`|`boolean`| If`true`, the sidebar will be rendered with a handle. | ### Sidebar.Trigger | Prop | Default | Type | Description | | ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | | `as` | - | `As` | The HTML element to render. | | `asChild` | - | `boolean` | Merges its props onto its immediate child. | | `css` | - | `CSSObject \| CSSObject[]` | The CSS object. | | `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. | ## 類似のコンポーネント - [Tabs](https://yamada-ui.com/docs/components/tabs.md): `Tabs`は、異なる表示領域を切り替えるコンポーネントです。 - [Breadcrumb](https://yamada-ui.com/docs/components/breadcrumb.md): `Breadcrumb`は、ユーザーがウェブサイトの階層を理解するのに役立つコンポーネントです。 - [LinkBox](https://yamada-ui.com/docs/components/link-box.md): `LinkBox`は、記事やカードなどの要素を一つのリンクとして機能させるコンポーネントです。 - [NativeAccordion](https://yamada-ui.com/docs/components/native-accordion.md): `NativeAccordion`は、HTMLの`details`要素を使用して情報を展開または折りたたんで表示するリストのコンポーネントです。 - [Pagination](https://yamada-ui.com/docs/components/pagination.md): `Pagination`は、コンテンツのページ分割とナビゲーションを管理するためのコンポーネントです。 - [Accordion](https://yamada-ui.com/docs/components/accordion.md): `Accordion`は、情報を展開または折りたたんで表示するリストのコンポーネントです。 - [Steps](https://yamada-ui.com/docs/components/steps.md): `Steps`は、複数のステップのプロセスの進行状況を表示するコンポーネントです。 - [Tree](https://yamada-ui.com/docs/components/tree.md): `Tree`は、階層データを展開可能なツリー形式で表示するコンポーネントです。 ## 使用しているコンポーネント・フック - [Collapse](https://yamada-ui.com/docs/components/collapse.md): `Collapse`は、要素を展開または折りたたんで表示するコンポーネントです。 - [Loading](https://yamada-ui.com/docs/components/loading.md): `Loading`は、データの読み込み中などの待機時間に表示するコンポーネントです。 - [Motion](https://yamada-ui.com/docs/components/motion.md): `Motion`は、`Motion`にYamada UIのStyle Propsを拡張した便利なコンポーネントです。 - [Drawer](https://yamada-ui.com/docs/components/drawer.md): `Drawer`は、画面の端から表示されるパネルのコンポーネントです。 - [Icon](https://yamada-ui.com/docs/components/icon.md): `Icon`は、プロジェクトに使用できる一般的なアイコンコンポーネントです。 - [Tooltip](https://yamada-ui.com/docs/components/tooltip.md): `Tooltip`は、要素の補足など短い情報を表示するコンポーネントです。 - [useBreakpoint](https://yamada-ui.com/docs/hooks/use-breakpoint.md): `useBreakpoint`は、現在のブレイクポイントを返すカスタムフックです。このフックは、ウィンドウのサイズの変更を監視し、適切な値を返します。 - [useValue](https://yamada-ui.com/docs/hooks/use-value.md): `useValue`は、`useBreakpointValue`と`useColorModeValue`を組み合わせたカスタムフックです。 - [useAsyncCallback](https://yamada-ui.com/docs/hooks/use-async-callback.md): `useAsyncCallback`は、非同期コールバックを管理するためのカスタムフックです。 - [useDescendants](https://yamada-ui.com/docs/hooks/use-descendants.md): `useDescendants`は、子要素を管理するためのカスタムフックです。 - [useDisclosure](https://yamada-ui.com/docs/hooks/use-disclosure.md): `useDisclosure`は、一般的な開閉や切り替えのシナリオを処理するのに役立つカスタムフックです。`Modal`、`Dialog`、`Drawer`などのコンポーネントを制御するために使用できます。 - [useWindowEvent](https://yamada-ui.com/docs/hooks/use-window-event.md): `useWindowEvent`は、`window`へ指定されたイベントリスナーを割り当てるカスタムフックです。