sidebar/composition

18 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Sidebar basic layout structure

A complete Sidebar layout uses this composition: SidebarProvider as the root, containing Sidebar which includes SidebarHeader, SidebarContent (with SidebarGroup components), SidebarFooter, and SidebarRail. Outside the Sidebar, you can use SidebarInset to wrap main content and SidebarTrigger to toggle the sidebar.

SidebarGroup component structure

A SidebarGroup contains: SidebarGroupLabel - The label for the group. SidebarGroupAction (optional) - An action button for the group. SidebarGroupContent - The content area of the group.

SidebarMenuItem with action and badge example

This example shows how to combine SidebarMenuButton with SidebarMenuAction and SidebarMenuBadge in a SidebarMenuItem.

SidebarMenuSub submenu example

This example shows how to create nested submenus using SidebarMenuSub within a SidebarMenuItem, containing SidebarMenuSubItem components with SidebarMenuSubButton.

Sidebar composition structure

The Sidebar component uses this composition: SidebarProvider wraps Sidebar, which contains SidebarHeader, SidebarContent (with nested SidebarGroup components, each containing SidebarGroupLabel, SidebarGroupAction, SidebarGroupContent, and SidebarMenu), SidebarFooter, and SidebarRail. Outside Sidebar: SidebarInset and SidebarTrigger. SidebarMenu contains SidebarMenuItem elements, which can have SidebarMenuButton, SidebarMenuAction, SidebarMenuBadge, and SidebarMenuSub with SidebarMenuSubItem children.

Sidebar component composition structure

The Sidebar layout hierarchy is: SidebarProvider contains Sidebar, SidebarInset, and SidebarTrigger. Within Sidebar: SidebarHeader, SidebarContent (containing SidebarGroup components), SidebarFooter, and SidebarRail. Each SidebarGroup contains SidebarGroupLabel, SidebarGroupAction, SidebarGroupContent, and SidebarMenu. SidebarMenu contains SidebarMenuItem components, which can have SidebarMenuButton, SidebarMenuAction, SidebarMenuBadge, and SidebarMenuSub (with SidebarMenuSubItem). SidebarMenuSub items contain SidebarMenuSubButton.

SidebarHeader component usage

Use SidebarHeader to add a sticky header to the sidebar positioned at the top. Typically contains a SidebarMenu with workspace switchers or branding.

SidebarFooter component usage

Use SidebarFooter to add a sticky footer to the sidebar positioned at the bottom. Typically contains user menus, settings, or actions.

SidebarContent component usage

SidebarContent wraps the content of the sidebar and is a scrollable region between the header and footer. Contains SidebarGroup components.

SidebarGroup composition and collapsibility

A SidebarGroup contains SidebarGroupLabel, optional SidebarGroupAction, and SidebarGroupContent. To make a SidebarGroup collapsible, wrap it in a Collapsible component with defaultOpen className, render SidebarGroupLabel as CollapsibleTrigger with a ChevronDown icon that rotates using group-data-open/collapsible:rotate-180, and wrap SidebarGroupContent in CollapsibleContent.

SidebarMenu usage

SidebarMenu is used for building a menu within a SidebarGroup and contains SidebarMenuItem components. Typically maps over data to render menu items.

SidebarMenuButton render prop and isActive

SidebarMenuButton renders a button by default but accepts a render prop to render different components such as Link or anchor tag. Use the isActive prop to mark a menu item as active.

SidebarMenuAction component

SidebarMenuAction renders an action within a SidebarMenuItem, typically positioned after the SidebarMenuButton. Used for additional controls like add buttons.

SidebarMenuSub structure

SidebarMenuSub renders a submenu within a SidebarMenu and contains SidebarMenuSubItem components. Each SidebarMenuSubItem contains SidebarMenuSubButton.

SidebarMenuBadge component

SidebarMenuBadge renders a badge within a SidebarMenuItem, typically showing a count or label.

SidebarMenuSkeleton component

SidebarMenuSkeleton renders a loading skeleton for a SidebarMenu. Typically used inside SidebarMenuItem components in an array map to show loading state.

SidebarTrigger component

SidebarTrigger renders a button that toggles the sidebar. Can be customized by accessing the toggleSidebar function from the useSidebar hook.

SidebarRail component

SidebarRail renders a rail within a Sidebar that can be used as a resize handle or toggle control for adjusting sidebar width.

Give your agent this brain