Core UI

Sidebar

Collapsible navigation panel for organizing app navigation and content.

Installation

Import 
import { Sidebar } from '@svelte-atoms/core/sidebar';

Preset Configuration

Customize the sidebar appearance using presets

You can customize the default styles for Sidebar components by defining presets in your configuration:

Examples

Explore different sidebar variations

Left Sidebar

Sidebar from the left side

Code 
<script lang="ts">
  import { Sidebar, animateSidebarContent } from '@svelte-atoms/core/sidebar';
  import { Button } from '@svelte-atoms/core/button';
  
  let leftOpen = $state(false);
</script>

<Sidebar.Root bind:open={leftOpen}>
  <div class="flex min-h-96 w-full">
    <Sidebar.Content
      animate={animateSidebarContent({ '0': '96px', '1': '320px' })}
      class="overflow-hidden border-r p-4"
    >
      <h3 class="mb-4 font-semibold">Details</h3>
      <div class="space-y-3">
        <p class="text-muted-foreground w-40 text-sm">
          Additional information and details can be displayed here.
        </p>
        <Button 
          size="sm" 
          variant="outline" 
          onclick={() => (leftOpen = false)}
        >
          Close
        </Button>
      </div>
    </Sidebar.Content>

    <main class="flex-1 p-4">
      <Button onclick={() => (leftOpen = true)}>
        Open Left Sidebar
      </Button>
    </main>
  </div>
</Sidebar.Root>

Right Sidebar

Sidebar from the right side

Code 
<script lang="ts">
  import { Sidebar, animateSidebarContent } from '@svelte-atoms/core/sidebar';
  import { Button } from '@svelte-atoms/core/button';
  
  let rightOpen = $state(false);
</script>

<Sidebar.Root bind:open={rightOpen}>
  <div class="flex min-h-96 w-full">
    <main class="flex-1">
      <Button onclick={() => (rightOpen = true)}>
        Open Right Sidebar
      </Button>
    </main>

    <Sidebar.Content
      animate={animateSidebarContent({ '0': '96px', '1': '320px' })}
      class="border-l p-4"
    >
      <h3 class="mb-4 font-semibold">Details</h3>
      <div class="space-y-3">
        <p class="text-muted-foreground w-40 text-sm">
          Additional information and details can be displayed here.
        </p>
        <Button 
          size="sm" 
          variant="outline" 
          onclick={() => (rightOpen = false)}
        >
          Close
        </Button>
      </div>
    </Sidebar.Content>
  </div>
</Sidebar.Root>

API Reference

Sidebar.Root Props

Prop
Type
Default
Description
open
boolean
false
Open
disabled
boolean
false
Disabled
width
string | number
''
Width
factory
Factory<SidebarBond>
undefined
Factory
bond
Bond
undefined
Bond object for component communication
base
Component | Snippet
undefined
Base component or snippet to render
preset
PresetModuleName | string
undefined
Preset module name for styling
variants
VariantDefinition | Function
undefined
Variant definition or function to resolve variants
class
ClassValue | ClassValue[]
undefined
CSS class(es) to apply to the element
as
string
undefined
HTML tag to render as
global
boolean
false
Whether to use global styles
initial
NodeFunction
undefined
Function called on initial render
enter
TransitionFunction
undefined
Transition function for entering
exit
TransitionFunction
undefined
Transition function for exiting
animate
NodeFunction
undefined
Animation function
onmount
NodeFunction
undefined
Function called when element is mounted
ondestroy
NodeFunction
undefined
Function called when element is destroyed
children
Snippet
undefined
Children content snippet

Sidebar.Content Props

Prop
Type
Default
Description
bond
Bond
undefined
Bond object for component communication
base
Component | Snippet
undefined
Base component or snippet to render
preset
PresetModuleName | string
undefined
Preset module name for styling
variants
VariantDefinition | Function
undefined
Variant definition or function to resolve variants
class
ClassValue | ClassValue[]
undefined
CSS class(es) to apply to the element
as
string
undefined
HTML tag to render as
global
boolean
false
Whether to use global styles
initial
NodeFunction
undefined
Function called on initial render
enter
TransitionFunction
undefined
Transition function for entering
exit
TransitionFunction
undefined
Transition function for exiting
animate
NodeFunction
undefined
Animation function
onmount
NodeFunction
undefined
Function called when element is mounted
ondestroy
NodeFunction
undefined
Function called when element is destroyed
children
Snippet
undefined
Children content snippet

Accessibility

Built-in Accessibility Features

  • • Keyboard navigation (Escape to close)
  • • Focus trap when open
  • • ARIA attributes for navigation
  • • Screen reader announcements
  • • Backdrop click to dismiss
Previous
Scrollable
Next
Stack