Carregando…

Sidebar

Layout

Composable app-shell sidebar — provider, collapsible rail, mobile sheet, groups/menu/submenu.

Instalação via CLI

$ npx kikitocn add sidebar

Interno:

@/lib/utils@/components/ui/cn/button@/components/ui/cn/input@/components/ui/cn/skeleton@/components/ui/cn/tooltip@radix-ui/react-slot

Exemplo de uso

SidebarExample.tsx

import { Sidebar } from "@/components/ui/cn/sidebar/Sidebar";

export function SidebarExample() {
  return (
    <Sidebar SidebarProvider="div" Sidebar="left" />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`SidebarProvider`	`{ defaultOpen?, open?, onOpenChange? } & React.ComponentProps<'div'>`	—	Contexto raiz — cookie de persistência, atalho ⌘/Ctrl+B, breakpoint mobile (1240px)
`Sidebar`	`{ side?: 'left'\|'right', variant?: 'sidebar'\|'floating'\|'inset', collapsible?: 'offcanvas'\|'icon'\|'none' }`	—	Painel em si — no mobile vira sheet off-canvas automaticamente
`SidebarTrigger`	`React.ComponentProps<typeof Button>`	—	Botão que chama toggleSidebar() — ícone PanelLeft
`SidebarInset`	`React.ComponentProps<'main'>`	—	Área de conteúdo principal (irmã da Sidebar dentro do Provider)
`SidebarHeader / SidebarContent / SidebarFooter`	`React.ComponentProps<'div'>`	—	Regiões verticais da sidebar
`SidebarGroup / SidebarGroupLabel / SidebarGroupAction / SidebarGroupContent`	`React.ComponentProps<'div'> (+ asChild em Label/Action)`	—	Agrupamento de itens de menu com label opcional
`SidebarMenu / SidebarMenuItem / SidebarMenuButton`	`SidebarMenuButtonProps: { asChild?, isActive?, variant?, size?, tooltip? }`	—	Lista de navegação — tooltip aparece automaticamente quando colapsada em rail de ícone
`SidebarMenuAction / SidebarMenuBadge / SidebarMenuSkeleton`	`—`	—	Ação secundária por item, badge numérico, placeholder de loading
`SidebarMenuSub / SidebarMenuSubItem / SidebarMenuSubButton`	`—`	—	Submenu indentado (1 nível)
`SidebarRail`	`React.ComponentProps<'button'>`	—	Faixa fina na borda pra arrastar/clicar e alternar a sidebar
`SidebarInput / SidebarSeparator`	`—`	—	Input de busca (reaproveita <Input> CN) e separador
`useSidebar`	`() => SidebarContextValue`	—	Hook pra ler/controlar o estado (state, open, isMobile, toggleSidebar, ...)

Voltar para Layout

Carregando…

Prop

Tipo

Padrão

Descrição

SidebarProvider

{ defaultOpen?, open?, onOpenChange? } & React.ComponentProps<'div'>

—

Contexto raiz — cookie de persistência, atalho ⌘/Ctrl+B, breakpoint mobile (1240px)

Sidebar

{ side?: 'left'|'right', variant?: 'sidebar'|'floating'|'inset', collapsible?: 'offcanvas'|'icon'|'none' }

—

Painel em si — no mobile vira sheet off-canvas automaticamente

SidebarTrigger

React.ComponentProps<typeof Button>

—

Botão que chama toggleSidebar() — ícone PanelLeft

SidebarInset

React.ComponentProps<'main'>

—

Área de conteúdo principal (irmã da Sidebar dentro do Provider)

SidebarHeader / SidebarContent / SidebarFooter

React.ComponentProps<'div'>

—

Regiões verticais da sidebar

SidebarGroup / SidebarGroupLabel / SidebarGroupAction / SidebarGroupContent

React.ComponentProps<'div'> (+ asChild em Label/Action)

—

Agrupamento de itens de menu com label opcional

SidebarMenu / SidebarMenuItem / SidebarMenuButton

SidebarMenuButtonProps: { asChild?, isActive?, variant?, size?, tooltip? }

—

Lista de navegação — tooltip aparece automaticamente quando colapsada em rail de ícone

SidebarMenuAction / SidebarMenuBadge / SidebarMenuSkeleton

—

—

Ação secundária por item, badge numérico, placeholder de loading

SidebarMenuSub / SidebarMenuSubItem / SidebarMenuSubButton

—

—

Submenu indentado (1 nível)

SidebarRail

React.ComponentProps<'button'>

—

Faixa fina na borda pra arrastar/clicar e alternar a sidebar

SidebarInput / SidebarSeparator

—

—

Input de busca (reaproveita <Input> CN) e separador

useSidebar

() => SidebarContextValue

—

Hook pra ler/controlar o estado (state, open, isMobile, toggleSidebar, ...)