Side Bar

View source Report an issue

SideBar exports components that combine to form the elements that you would expect to commonly see in a top-level side-bar. However, the SideBar is not limited to these components, as any component may sit within the SideBar to create a flexible and custom UI. In its default expandable state, a user can hover or tap the SideBar, or focus any element within to expand it.

SideBar can be paired with NavigationMenuVertical to create a top-level or second-level menu, with an initial Icon only state, before expanding to reveal the text content alongside.

<SideBar className="h-75" type="static">
  <SideBar.Body>
    <NavigationMenuVertical>
      <NavigationMenuVertical.Link active href="/">
        <Icon is={Dashboard} />
        Home
      </NavigationMenuVertical.Link>
      <NavigationMenuVertical.Link href="/settings">
        <Icon is={Settings} />
        Settings
      </NavigationMenuVertical.Link>
      <NavigationMenuVertical.Link href="/notifications">
        <Icon is={Bell} />
        Notifications
      </NavigationMenuVertical.Link>
    </NavigationMenuVertical>
  </SideBar.Body>
</SideBar>

Additionally, components within SideBar can use the useSidebarState() hook to access the dynamic collapsed/expanded state of the side-bar for any required UI changes.

const Component = () => {
  const { isExpanded } = useSidebarState()
  return <div className={isExpanded ? 'p-4' : 'p-2'} />
}
const App = () => (
  <SideBar>
    <SideBar.Body>
      <Component />
    </SideBar.Body>
  </SideBar>
)

SideBar type

SideBar can be rendered in one of two states, static or expandable.

static will render at the fully expanded width of the side bar and will not bind any of the hover, touch, or keyboard events to expand or collapse the side bar container.

expandable will render the side bar at a reduced size and will bind the necessary events to expand the container to its expanded size.

SideBar components

SideBar.Brand renders a styled link, with SideBar.BrandLogo rendering an image primarily intended for the Atom logo, and SideBar.BrandName, rendering a Text component primarily intended to display the name of the current app.

Additional structural components are available within SideBar to allow for correctly positioned elements. SideBar.Header and SideBar.Footer will remain stuck to the top and bottom of the SideBar if the contents overflows and introduces a scrollbar.

<SideBar className="h-100">
  <SideBar.Header>
    <SideBar.Brand href="atomlearning.co.uk">
      <SideBar.BrandLogo src="https://space-1.atomlearning.com/static/f61e49cfb245016e612a34818e27dcfb.svg" className="w-[55px]" />
      <SideBar.BrandName>Admin Panel</SideBar.BrandName>
    </SideBar.Brand>
  </SideBar.Header>
  <SideBar.Body>
    <NavigationMenuVertical>
      <NavigationMenuVertical.Link active href="/">
        <Icon is={Dashboard} />
        Home
      </NavigationMenuVertical.Link>
      <NavigationMenuVertical.Link href="/settings">
        <Icon is={Settings} />
        Settings
      </NavigationMenuVertical.Link>
      <NavigationMenuVertical.Link href="/notifications">
        <Icon is={Bell} />
        Notifications
      </NavigationMenuVertical.Link>
    </NavigationMenuVertical>
  </SideBar.Body>
  <SideBar.Footer className="pl-6">
    <Avatar name="Alice Smith" size="md">
      <Avatar.Image
        src="https://picsum.photos/id/447/200/200"
      />
    </Avatar>
  </SideBar.Footer>
</SideBar>

API Reference

SideBar

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`offset`	`string` \| `number`	`0px`	-
`theme`	`Record<string, string>`	-	-
`type`	`"static"` \| `"expandable"`	`expandable`	-

SideBar.Header

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-

SideBar.Body

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-

SideBar.Footer

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-

SideBar.Brand

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-

SideBar.BrandLogo

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`fluid`	`boolean`	-	-

SideBar.BrandName

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`family`	`"body"` \| `"display"` \| `"mono"` \| `Partial<Record<Breakpoint, "body" \| "display" \| "mono">>`	-	-
`noCapsize`	`boolean`	-	-
`size`	`Partial<Record<Breakpoint, "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "4xl">>` \| `"xs"` \| `"sm"` \| `"md"` \| `"lg"` \| `"xl"` \| `"2xl"` \| `"3xl"` \| `"4xl"`	-	-
`weight`	`"bold"` \| `"normal"` \| `Partial<Record<Breakpoint, "bold" \| "normal">>`	-	-