Skip to Content

Layout

Sidebar

Composes Dawn's responsive application navigation and its collapsed state.

@dawn/ui/components/sidebar

Preview

Rendered from @dawn/ui

Dawn

Workspace

Berlin clinic

Usage

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

SidebarProviderSidebarSidebarHeaderSidebarContentSidebarFooterSidebarGroupSidebarGroupLabelSidebarGroupContentSidebarMenuSidebarMenuItemSidebarMenuButtonSidebarMenuActionSidebarMenuBadgeSidebarMenuSubSidebarMenuSubItemSidebarMenuSubButtonSidebarInputSidebarSeparatorSidebarTriggerSidebarRailSidebarInsetSidebarMenuSkeletonuseSidebar
Last updated on