Layout
Sidebar
Composes Dawn's responsive application navigation and its collapsed state.
@dawn/ui/components/sidebarPreview
Rendered from @dawn/uiUsage
import {
Sidebar,
SidebarContent,
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
SidebarProvider,
} from "@dawn/ui/components/sidebar";
export const AppNavigation = () => (
<SidebarProvider>
<Sidebar collapsible="icon">
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Workspace</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton isActive>Overview</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
</Sidebar>
</SidebarProvider>
);API
SidebarProvider defaultOpen / openboolean- Initializes or controls the desktop expanded state.
Sidebar collapsibleoffcanvas | icon | none- Sets how the desktop sidebar collapses.
Sidebar variantsidebar | floating | inset- Sets the boundary, spacing, and inset treatment.
Exports
SidebarProviderSidebarSidebarHeaderSidebarContentSidebarFooterSidebarGroupSidebarGroupLabelSidebarGroupContentSidebarMenuSidebarMenuItemSidebarMenuButtonSidebarMenuActionSidebarMenuBadgeSidebarMenuSubSidebarMenuSubItemSidebarMenuSubButtonSidebarInputSidebarSeparatorSidebarTriggerSidebarRailSidebarInsetSidebarMenuSkeletonuseSidebarLast updated on