Sidebar

Sidebars provide persistent app navigation with collapsible, resizable, and mobile-responsive layouts.

Try it

Usage

Wrap the layout in RuiSidebarProvider. Compose header, content, groups, and menu items with the sidebar sub-components.

import {
  RuiSidebarProvider,
  RuiSidebar,
  RuiSidebarHeader,
  RuiSidebarContent,
  RuiSidebarMenu,
  RuiSidebarMenuItem,
  RuiSidebarMenuButton,
  RuiSidebarInset,
  RuiSidebarTrigger,
} from '@ecopages/radiant-ui/sidebar';
 
<RuiSidebarProvider>
  <RuiSidebar collapsible="icon" defaultOpen>
    <RuiSidebarHeader>Acme</RuiSidebarHeader>
    <RuiSidebarContent>
      <RuiSidebarMenu>
        <RuiSidebarMenuItem>
          <RuiSidebarMenuButton href="/dashboard">Dashboard</RuiSidebarMenuButton>
        </RuiSidebarMenuItem>
      </RuiSidebarMenu>
    </RuiSidebarContent>
  </RuiSidebar>
  <RuiSidebarInset>
    <RuiSidebarTrigger />
    <main>Page content</main>
  </RuiSidebarInset>
</RuiSidebarProvider>

Collapsible modes

icon collapses to icons only. full hides the sidebar entirely. off keeps it always visible.

Active route matching

Enable matchActive with matchMode to highlight the current page in the menu automatically.

Theming

Sidebar surfaces map to semantic surface roles, never Tailwind palette steps:

Rounded corners use rounded-container; the collapsible pane in docs layout sits on surface-container-low. Overrides go at the theme layer, not in component CSS.

Accessibility

• The sidebar renders as a nav landmark with label as its accessible name.
• Collapsed icon-only mode preserves accessible names on menu buttons.
• The trigger button exposes whether the sidebar is expanded or collapsed.

API

RuiSidebar (<rui-sidebar>) coordinates the pane, resize, collapse, and active-route matching. Compose sections with the view helpers; RuiSidebarProvider wires the shell.

Attributes (<rui-sidebar>)

Attributes (<rui-sidebar-trigger>)

Events

View helpers

CSS classes

Public BEM classes (documented via @cssclass):

Theme roles