Sidebar

RefineUI

Product

󰕋Overview󰵫Components󰄸Tokens

Account

󰁱Settings

󰉗Pelagornis

󱑎

OverviewMain

SidebarTrigger가 사이드바를 열고 닫는 버튼입니다. SidebarProvider 안이라면 어디에 두든 그 자리가 위치입니다. 이 페이지에서는 본문 시작에 두었습니다. 접으면 사이드바는 사라집니다. 가장자리에 마우스를 올리면 잠시 열리고, 트리거를 누르면 다시 펼쳐집니다.

계약

Overview

Machine-readable contract from Component Spec.

component: sidebarexport: Sidebarversion: 1attributes: data-refineui=sidebar

Anatomy

Part	data-refineui
root	sidebar
brand	sidebar-brand
content	sidebar-content
footer	sidebar-footer
group	sidebar-group
group_label	sidebar-group-label
header	sidebar-header
link	sidebar-link
nav	sidebar-nav
peek	sidebar-peek
peek_edge	sidebar-peek-edge
peek_inset	sidebar-peek-inset
peek_panel	sidebar-peek-panel
peek_pin	sidebar-peek-pin
peek_surface	sidebar-peek-surface
provider	sidebar-provider
trigger	button

States

Scope	Category	Values
component	pseudo	focus-visible
component	environment	forced-colors, dir

Focus

Section	Property	Value
visual	required	true
visual	selector	:focus-visible

Layout

Property	Value
direction	logical
rtl	true

설치

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

사용법

import {
  Sidebar,
  SidebarHeader,
  SidebarBrand,
  SidebarContent,
  SidebarNav,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarLink,
  SidebarFooter
} from "@refineui/react";

<Sidebar>
  <SidebarHeader>
    <SidebarBrand>
      <Logo />
      My App
    </SidebarBrand>
  </SidebarHeader>
  <SidebarContent>
    <SidebarNav>
      <SidebarGroup>
        <SidebarGroupLabel>Main</SidebarGroupLabel>
        <SidebarLink href="/" active>Dashboard</SidebarLink>
        <SidebarLink href="/projects">Projects</SidebarLink>
        <SidebarLink href="/tasks">Tasks</SidebarLink>
      </SidebarGroup>
      <SidebarGroup>
        <SidebarGroupLabel>Settings</SidebarGroupLabel>
        <SidebarLink href="/settings">Preferences</SidebarLink>
        <SidebarLink href="/profile">Profile</SidebarLink>
      </SidebarGroup>
    </SidebarNav>
  </SidebarContent>
  <SidebarFooter>
    <p>© 2024</p>
  </SidebarFooter>
</Sidebar>

API 레퍼런스

Sidebar

루트 사이드바 컨테이너(<aside> 요소).

SidebarHeader

헤더 섹션.

SidebarBrand

브랜드/로고 영역.

SidebarContent

메인 콘텐츠 영역. ScrollArea가 내장되어 있어 hover 시 오버레이 스크롤바가 나타나고, 링크와 그룹 레이블에 가장자리 blur가 적용됩니다. 다른 ScrollArea로 감싸지 마세요. SidebarFooter의 내용은 스크롤 영역 밖에 남습니다.

SidebarNav

내비게이션 컨테이너(<nav> 요소).

SidebarGroup

관련 링크를 그룹화합니다.

SidebarGroupLabel

그룹 레이블.

SidebarLink

Prop	Default	Type	Description
active	false	boolean	현재 페이지를 표시합니다(`aria-current="page"`).

SidebarFooter

푸터 섹션.

SidebarProvider

사이드바가 펼쳐져 있는지를 가집니다. 도킹된 Sidebar와 트리거를 함께 감싸면, 트리거를 사이드바 밖에 둘 수 있습니다.

Prop	Default	Type	Description
open	—	boolean	펼침 상태. 생략하면 provider가 상태를 가집니다.
defaultOpen	true	boolean	`open`을 생략했을 때의 처음 펼침 상태.
onOpenChange	—	(open: boolean) => void	트리거가 토글할 때 호출됩니다.
id	—	string	도킹된 사이드바 id. 트리거의 `aria-controls`가 이 id를 가리킵니다.

SidebarTrigger

provider를 토글하는 Button입니다. 렌더하는 자리가 위치입니다. 기본 variant는 secondary입니다.

<SidebarProvider id="app-sidebar" open={open} onOpenChange={setOpen}>
  <SidebarTrigger layout="icon" size="sm" aria-label={open ? "Close sidebar" : "Open sidebar"}>
    <PanelIcon />
  </SidebarTrigger>
  <Sidebar id="app-sidebar">{/* nav */}</Sidebar>
</SidebarProvider>

Sidebar peek (접힌 상태 호버)

도킹된 사이드바가 접혀 있을 때의 조합형 플라이아웃 — 가장자리 호버 시 메인 영역 위에 떠 있는 패널이 나타납니다(콘텐츠는 리플로우되지 않음).

<SidebarPeek enabled={collapsed} widthPercent={28} mode="contained" onPin={expand}>
  <SidebarPeekEdge />
  <SidebarPeekPanel>
    <SidebarPeekPin>{/* pin control */}</SidebarPeekPin>
    <Sidebar>...</Sidebar>
  </SidebarPeekPanel>
  <SidebarPeekInset>{/* main + toggle */}</SidebarPeekInset>
</SidebarPeek>

peek 레이어를 고정 앱 헤더 아래에 맞출 때는 mode="viewport"와 --refineui-sidebar-peek-viewport-offset을 사용하세요.