Sidebar

RefineUI

Product

󰕋Overview󰵫Components󰄸Tokens

Account

󰁱Settings

󰉗Pelagornis

󱑎

Main

Contract

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

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

Installation

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

Usage

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 Reference

Sidebar

Root sidebar container (<aside> element).

SidebarHeader

Header section.

SidebarBrand

Brand/logo area.

SidebarContent

Main content area.

SidebarNav

Navigation container (<nav> element).

SidebarGroup

Groups related links.

SidebarGroupLabel

Label for a group.

SidebarLink

Prop	Default	Type	Description
active	false	boolean	Marks the current page (`aria-current="page"`).

SidebarFooter

Footer section.

Sidebar peek (collapsed hover)

Composable flyout when the docked sidebar is collapsed — edge hover reveals a floating panel over the main area (content does not reflow).

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

Use mode="viewport" with --refineui-sidebar-peek-viewport-offset when the peek layer should align below a fixed app header.