Componentnavigation0.44 KB gzipZero dependencies

Sidebar Layout

Sticky sidebar plus fluid content layout.

Preview

Live Preview

Fluid content area — shrinks and grows with the viewport.

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add sidebar-layout

Or install the full npm package:

npm install bigbullui

Usage

Open in StackBlitz

import { SidebarLayout } from "@/components/ui/sidebar-layout";

<SidebarLayout sidebar={<nav>Menu</nav>}><main>Content</main></SidebarLayout>

Usage guidance

Use Sidebar Layout when a ticket stub surface needs Sticky sidebar plus fluid content layout. Keep props minimal and prefer composition with sibling stubs.

Avoid Sidebar Layout for long form flows or dense data grids where a dedicated layout block fits better.

Source code

sidebar-layout.tsx

Zero dependencies (only React + utils). Copy and paste directly into your project:

"use client";

import * as React from "react";
import { cn } from "./lib/utils";

export interface SidebarLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
  sidebar: React.ReactNode;
  children: React.ReactNode;
  sidebarWidth?: number;
  sticky?: boolean;
}

export function SidebarLayout({ sidebar, children, sidebarWidth = 260, sticky = true, className, ...props }: SidebarLayoutProps) {
  return (
    <div className={cn("mx-auto flex w-full max-w-6xl items-start gap-8 px-4", className)} {...props}>
      <aside
        style={{ width: sidebarWidth }}
        className={cn("hidden shrink-0 md:block", sticky && "sticky top-6 max-h-[calc(100vh-3rem)] overflow-y-auto")}
      >
        {sidebar}
      </aside>
      <div className="min-w-0 flex-1">{children}</div>
    </div>
  );
}

Props

Prop	Type	Description
sidebar	React.ReactNode	Sidebar content (required).
sidebarWidth	number	Sidebar px (default 260).
sticky	boolean	Sticky sidebar (default true).