Sidebar

Sidebar is a component used to display a list of items in a sidebar.

Usage

import { Sidebar } from "@yamada-ui/react"

<Sidebar.Root>
  <Sidebar.SidePanel>
    <Sidebar.Header>
      <Sidebar.Menu />
      <Sidebar.MenuButton />
    </Sidebar.Header>
    <Sidebar.Content>
      <Sidebar.Item>
        <Sidebar.Item />
      </Sidebar.Item>
      <Sidebar.Item />
      <Sidebar.Group>
        <Sidebar.GroupLabel />
        <Sidebar.GroupContent>
          <Sidebar.Item>
            <Sidebar.Item />
          </Sidebar.Item>
          <Sidebar.Item />
        </Sidebar.GroupContent>
      </Sidebar.Group>
    </Sidebar.Content>
    <Sidebar.Footer>
      <Sidebar.Menu />
      <Sidebar.MenuButton />
    </Sidebar.Footer>
    <Sidebar.Handle />
  </Sidebar.SidePanel>
  <Sidebar.MainPanel>
    <Sidebar.Trigger />
  </Sidebar.MainPanel>
</Sidebar.Root>

Integrate with Next.js

When integrating with frameworks such as Next.js, 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.

"use client"

import { usePathname } from "next/navigation"
import Link from "next/link"

function Layout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname()

  return (
    <Sidebar.Root>
      <Sidebar.SidePanel linkProps={{ as: Link }} selectedValue={pathname} />
    </Sidebar.Root>
  )
}

Use items

Change Variant

Change Color Scheme

Change Mode

To change the mode, set mode to "offcanvas" or "icon". The default is "offcanvas".

Change Shape

Change Placement

To change the placement, set placement to "start" or "end". The default is "start".

To override the placement on mobile, set drawerProps to placement.

Change Breakpoint

To change the breakpoint for mobile, set breakpoint to the value. This value refers to Breakpoints.

Disable Breakpoint

To disable the breakpoint for mobile, set breakpoint to false.

Set Default Closed

To have the sidebar closed by default, set disclosure.desktop.defaultOpen to false.

Set Default Selected Item

To have a specific item selected by default, set defaultSelectedValue.

Set Default Expanded Items

To have specific items expanded by default, set defaultExpandedValue.

Disable an Item

To disable specific items, set disabled.

Save Values to LocalStorage

Show Group Guide Line

To show group guide lines, set withGroupGuideLine to true.

Show Guide Line

To show guide lines, set withGuideLine to true.

Add Separator

Hide Indicator

To hide the indicator, set indicatorHidden to true.

Disable Animation

To disable animation when expanding and collapsing, set animated to false.

Disable Resize Handle

To disable the resize handle, set withHandle to false. The default is true.

Async Loading

To load child items asynchronously, use asyncChildren instead of children.

Change Loading Scheme

Expand/Collapse All

To expand or collapse all items, use controlRef.

Customize Element

Customize Indicator

Control

Props

Similar Components

Tabs

Tabs is a component for switching between different display areas.

Breadcrumb

Breadcrumb is a component that helps users understand the hierarchy of a website.

LinkBox

LinkBox is a component that allows elements such as articles or cards to function as a single link.

NativeAccordion

NativeAccordion is a component for a list that displays information in an expandable or collapsible manner using the HTML details element.

Pagination

Pagination is a component for managing the pagination and navigation of content.

Accordion

Accordion is a component for a list that displays information in an expandable or collapsible manner.

Steps

Steps is a component that displays the progress of a multi-step process.

Tree

Tree is a component used to display hierarchical data structures in an expandable tree format.

Uses Components & Hooks

Collapse

Collapse is a component that allows you to expand or collapse an element for display.

Loading

Loading is a component displayed during waiting times, such as when data is being loaded.

Motion

Motion is a convenient component that extends the Yamada UI Style Props to Motion.

Drawer

Drawer is a component for a panel that appears from the edge of the screen.

Icon

Icon is a general icon component that can be used in your projects.

Tooltip

Tooltip is a component that displays short information, such as supplementary details for an element.

useBreakpoint

useBreakpoint is a custom hook that returns the current breakpoint. This hook monitors changes in the window size and returns the appropriate value.

useValue

useValue is a custom hook that combines useBreakpointValue and useColorModeValue.

useAsyncCallback

useAsyncCallback is a custom hook for managing asynchronous callbacks.

useDescendants

useDescendants is a custom hook that manages descendants.

useDisclosure

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

useWindowEvent is a custom hook that assigns an event listener to window.