UiSvelte

Sidebar

Sidebar is a vertical navigation component that provides a structured layout with optional header and footer sections. It's commonly used within the Scaffold component for application navigation.

Preview

Main content area

Builder

Sections

The component accepts the following props:

Prop
Type
Default
Title

Description Error

No data

There are no records to display

⚠️ Important: Fixed Positioning and vh Utilities

Fixed Positioning

When used within the Scaffold component's start or end snippets, the Sidebar automatically receives fixed positioning.

Width and Margins

You must specify the Sidebar width using the class prop and apply corresponding margins to the main content:

  • If Sidebar has w-48, use ml-48 or mr-48 in Scaffold's mainClass
  • If Sidebar has w-64, use ml-64 or mr-64 in Scaffold's mainClass

vh Utilities with AppBar

When using Sidebar with an AppBar, apply vh-* utilities to ensure proper height calculation:

  • Use vh-16 when AppBar has h-16
  • Use vh-32 when both AppBar and BottomBar have h-16
  • Apply mt-16 to match the AppBar height

Complete Example with Scaffold

<Scaffold
  mainClass="lg:ml-48 vh-16 mt-16"
  startClass="vh-16 mt-16"
>
  {#snippet appBar()}
    <AppBar class="h-16">
      <!-- AppBar content -->
    </AppBar>
  {/snippet}

  {#snippet start()}
    <Sidebar class="w-48">
      {#snippet header()}
        <h3>Navigation</h3>
      {/snippet}

      <SideNav items={navItems} />

      {#snippet footer()}
        <Button variant="ghost">Sign Out</Button>
      {/snippet}
    </Sidebar>
  {/snippet}

  <!-- Main content -->
  <div class="p-4">
    <h1>Main Content</h1>
  </div>
</Scaffold>

In this example:

  • vh-16 calculates height as calc(100vh - 4rem)
  • mt-16 creates space for the fixed AppBar
  • ml-48 creates space for the fixed Sidebar

💡 Tip: The Sidebar component is designed to work seamlessly with the Scaffold component. For responsive layouts, consider using Tailwind's responsive prefixes (e.g., lg:ml-48) to show/hide the Sidebar on different screen sizes.

Responsive Layout Example

<Scaffold
  mainClass="lg:ml-48 vh-16 mt-16"
  startClass="invisible lg:visible vh-16 mt-16"
>
  {#snippet appBar()}
    <AppBar class="h-16">
      {#snippet start()}
        <IconButton
          icon="fluent:navigation-24-regular"
          onclick={() => drawerOpen = true}
          class="lg:hidden"
        />
      {/snippet}
    </AppBar>
  {/snippet}

  {#snippet start()}
    <Sidebar class="w-48">
      <SideNav items={navItems} />
    </Sidebar>
  {/snippet}

  <div class="p-4">Main content</div>
</Scaffold>

<!-- Mobile drawer -->
<Drawer bind:open={drawerOpen}>
  <Sidebar class="w-64">
    <SideNav items={navItems} />
  </Sidebar>
</Drawer>

This pattern shows the Sidebar on desktop screens (lg and above) and uses a Drawer for mobile devices.

© 2025 UiSvelte