--- title: Sidebar description: "`Sidebar` is a component used to display a list of items in a 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` is a component used to display a list of items in a sidebar. ```tsx Documentation v2.2.0 Get Started Styling Theming Hirotomo Yamada hirotomo.yamada@avap.co.jp } /> ``` ## Usage ```tsx import { Sidebar } from "@yamada-ui/react" ``` ```tsx import { Sidebar } from "@/components/ui" ``` ```tsx import { Sidebar } from "@workspaces/ui" ``` ```tsx ``` ### Integrate with Next.js When integrating with frameworks such as [Next.js](https://nextjs.org/), set the link component provided by the framework to `linkProps.as`. To sync routing, set `selectedValue` to the current path obtained from the framework's function or hook. ```tsx "use client" import { usePathname } from "next/navigation" import Link from "next/link" function Layout({ children }: { children: React.ReactNode }) { const pathname = usePathname() return ( ) } ``` ### Use items ```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/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} /> } /> ) ``` ### Change Variant ```tsx } header={} items={sidebarItems} /> } /> ``` ```tsx } header={} items={sidebarItems} /> } /> ``` ### Change Color Scheme ```tsx } header={} items={sidebarItems} /> } /> ``` ### Change Mode To change the mode, set `mode` to `"offcanvas"` or `"icon"`. The default is `"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} /> } /> ) ``` ### Change Shape ```tsx } header={} items={sidebarItems} /> } /> ``` ```tsx } header={} items={sidebarItems} /> } /> ``` ```tsx } header={} items={sidebarItems} /> } /> ``` ### Change Placement To change the placement, set `placement` to `"start"` or `"end"`. The default is `"start"`. ```tsx } header={} items={sidebarItems} /> } /> ``` To override the placement on mobile, set `drawerProps` to `placement`. ```tsx } header={} items={sidebarItems} drawerProps={{ placement: "inline-end" }} /> } /> ``` ### Change Breakpoint To change the breakpoint for mobile, set `breakpoint` to the value. This value refers to [Breakpoints](https://yamada-ui.com/docs/theming/tokens/breakpoints.md). ```tsx } header={} items={sidebarItems} /> } /> ``` ### Disable Breakpoint To disable the breakpoint for mobile, set `breakpoint` to `false`. ```tsx } header={} items={sidebarItems} /> } /> ``` ### Set Default Closed To have the sidebar closed by default, set `disclosure.desktop.defaultOpen` to `false`. ```tsx } header={} items={sidebarItems} /> } /> ``` ### Set Default Selected Item To have a specific item selected by default, set `defaultSelectedValue`. ```tsx } header={} items={sidebarItems} /> } /> ``` ### Set Default Expanded Items To have specific items expanded by default, set `defaultExpandedValue`. ```tsx } header={} items={sidebarItems} /> } /> ``` ### Disable an Item To disable specific items, set `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} /> } /> ) ``` ### Save Values to LocalStorage ```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} /> } /> ) ``` ### Save Values to 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} /> } /> ) ``` ### Show Group Guide Line To show group guide lines, set `withGroupGuideLine` to `true`. ```tsx } header={} items={sidebarItems} /> } /> ``` ### Show Guide Line To show guide lines, set `withGuideLine` to `true`. ```tsx } header={} items={sidebarItems} /> } /> ``` ### Add Separator ```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" }} /> } /> ) ``` ### Hide Indicator To hide the indicator, set `indicatorHidden` to `true`. ```tsx } header={} indicatorHidden items={sidebarItems} /> } /> ``` ### Disable Animation To disable animation when expanding and collapsing, set `animated` to `false`. ```tsx } header={} items={sidebarItems} /> } /> ``` ### Disable Resize Handle To disable the resize handle, set `withHandle` to `false`. The default is `true`. ```tsx } header={} items={sidebarItems} withHandle={false} /> } /> ``` ### Async Loading To load child items asynchronously, use `asyncChildren` instead of `children`. ```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} /> } /> ) ``` ### Change Loading Scheme ```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" /> } /> ) ``` ### Expand/Collapse All To expand or collapse all items, use `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 ) ``` ### Customize Element ```tsx } header={} items={sidebarItems} startElement={{ group: ({ expanded }) => expanded ? : , item: , }} /> } /> ``` ```tsx }} footer={} header={} items={sidebarItems} /> } /> ``` ### Customize Indicator ```tsx } header={} indicator={({ expanded }) => (expanded ? : )} items={sidebarItems} indicatorProps={{ _expanded: { transform: "rotate(0deg)" } }} /> } /> ``` ### Control ```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` | 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` | 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. | ## Similar Components - [Tabs](https://yamada-ui.com/docs/components/tabs.md): `Tabs` is a component for switching between different display areas. - [Breadcrumb](https://yamada-ui.com/docs/components/breadcrumb.md): `Breadcrumb` is a component that helps users understand the hierarchy of a website. - [LinkBox](https://yamada-ui.com/docs/components/link-box.md): `LinkBox` is a component that allows elements such as articles or cards to function as a single link. - [NativeAccordion](https://yamada-ui.com/docs/components/native-accordion.md): `NativeAccordion` is a component for a list that displays information in an expandable or collapsible manner using the HTML `details` element. - [Pagination](https://yamada-ui.com/docs/components/pagination.md): `Pagination` is a component for managing the pagination and navigation of content. - [Accordion](https://yamada-ui.com/docs/components/accordion.md): `Accordion` is a component for a list that displays information in an expandable or collapsible manner. - [Steps](https://yamada-ui.com/docs/components/steps.md): `Steps` is a component that displays the progress of a multi-step process. - [Tree](https://yamada-ui.com/docs/components/tree.md): `Tree` is a component used to display hierarchical data structures in an expandable tree format. ## Uses Components & Hooks - [Collapse](https://yamada-ui.com/docs/components/collapse.md): `Collapse` is a component that allows you to expand or collapse an element for display. - [Loading](https://yamada-ui.com/docs/components/loading.md): `Loading` is a component displayed during waiting times, such as when data is being loaded. - [Motion](https://yamada-ui.com/docs/components/motion.md): `Motion` is a convenient component that extends the Yamada UI Style Props to `Motion`. - [Drawer](https://yamada-ui.com/docs/components/drawer.md): `Drawer` is a component for a panel that appears from the edge of the screen. - [Icon](https://yamada-ui.com/docs/components/icon.md): `Icon` is a general icon component that can be used in your projects. - [Tooltip](https://yamada-ui.com/docs/components/tooltip.md): `Tooltip` is a component that displays short information, such as supplementary details for an element. - [useBreakpoint](https://yamada-ui.com/docs/hooks/use-breakpoint.md): `useBreakpoint` is a custom hook that returns the current breakpoint. This hook monitors changes in the window size and returns the appropriate value. - [useValue](https://yamada-ui.com/docs/hooks/use-value.md): `useValue` is a custom hook that combines `useBreakpointValue` and `useColorModeValue`. - [useAsyncCallback](https://yamada-ui.com/docs/hooks/use-async-callback.md): `useAsyncCallback` is a custom hook for managing asynchronous callbacks. - [useDescendants](https://yamada-ui.com/docs/hooks/use-descendants.md): `useDescendants` is a custom hook that manages descendants. - [useDisclosure](https://yamada-ui.com/docs/hooks/use-disclosure.md): `useDisclosure` is a custom hook that helps handle common open/close or toggle scenarios. It can be used to control components such as `Modal`, `Dialog`, `Drawer`, etc. - [useWindowEvent](https://yamada-ui.com/docs/hooks/use-window-event.md): `useWindowEvent` is a custom hook that assigns an event listener to `window`.