Sidebar

A side panel with groups of navigation.

Sidebar.tsx

import {
  Button,
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarHeader,
  Text,
  Tree,
  TreeItem
} from 'alinea/components'
import {IcRoundAdd, LucideFile, LucideFolder} from 'alinea/dashboard/icons'

export function SidebarExample() {
  return (
    <div style={{display: 'flex', width: 280, height: 320}}>
      <Sidebar aria-label="Content">
        <SidebarHeader>
          <Text weight="semibold">Oak &amp; Loom</Text>
        </SidebarHeader>
        <SidebarContent scroll>
          <SidebarGroup aria-labelledby="pages-label">
            <SidebarGroupLabel id="pages-label">Pages</SidebarGroupLabel>
            <Tree aria-label="Pages" defaultExpandedKeys={['products']}>
              <TreeItem id="home" title="Home" icon={LucideFile} />
              <TreeItem id="products" title="Products" icon={LucideFolder}>
                <TreeItem id="shirt" title="Linen shirt" icon={LucideFile} />
              </TreeItem>
            </Tree>
          </SidebarGroup>
        </SidebarContent>
        <SidebarFooter>
          <Button color="secondary" icon={IcRoundAdd}>
            Create new
          </Button>
        </SidebarFooter>
      </Sidebar>
    </div>
  )
}

Props

`<Sidebar>`

A column next to the SidebarInset, eg. the content tree or entry details. Place it in a ResizablePanel to make it resizable. On small screens it covers the layout.

PropTypeDefaultDescription

side'left' | 'right'Default 'left'The edge of the layout the sidebar is placed on, defaults to left. Exposed as data-side for styling.

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.

`<SidebarHeader>`

PropTypeDefaultDescription

children*ReactNodeDefault –

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.

`<SidebarContent>`

Fills the space between the header and footer

PropTypeDefaultDescription

scrollbooleanDefault –Scroll the content when it overflows, leave off when children scroll

refRef<HTMLDivElement>Default –

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.

`<SidebarFooter>`

PropTypeDefaultDescription

children*ReactNodeDefault –

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.

`<SidebarGroup>`

A section of the sidebar, optionally titled with a SidebarGroupLabel

PropTypeDefaultDescription

children*ReactNodeDefault –

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.

`<SidebarGroupLabel>`

PropTypeDefaultDescription

idstringDefault –Defaults to an id that labels the surrounding SidebarGroup

Also accepts className and style and data-* attributes.

`<SidebarGroupAction>`

Places a small control, eg. a Button or DropdownMenuTrigger with size="sm", at the end of the group label.

PropTypeDefaultDescription

children*ReactNodeDefault –

Also accepts className and style and data-* attributes.

`<SidebarInset>`

The main content column next to the sidebars

PropTypeDefaultDescription

children*ReactNodeDefault –

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.