Sidebar

Exports

Import these components from @mbsw/ui.

Sidebar

SidebarHeader

SidebarContent

SidebarFooter

SidebarTrigger

Props

The tables list common props for each component. See the full types for supported prop combinations and inherited HTML and Radix props.

Sidebar props
Prop	Type	Requirement
`asChild`	`boolean`	Optional
`collapsed`	`boolean`	Optional
`defaultCollapsed`	`boolean`	Optional
`onCollapsedChange`	`((collapsed: boolean) => void)`	Optional
`labels`	`Partial<SidebarLabels>`	Optional

SidebarTrigger

SidebarTrigger props
Prop	Type	Requirement
`asChild`	`boolean`	Conditional
`children`	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	Optional

Type reference

Show full types

Full TypeScript definitions, including prop combinations and inherited props.

import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactElement, type RefAttributes } from 'react';

type DataAttributes = {
    [key: `data-${string}`]: boolean | number | string | undefined;
};

export type SidebarLabels = {
    collapse: string;
    expand: string;
};

export type SidebarProps = HTMLAttributes<HTMLElement> & DataAttributes & {
    asChild?: boolean;
    collapsed?: boolean;
    defaultCollapsed?: boolean;
    onCollapsedChange?: (collapsed: boolean) => void;
    labels?: Partial<SidebarLabels>;
};

export type SidebarHeaderProps = HTMLAttributes<HTMLDivElement> & DataAttributes;

export type SidebarContentProps = HTMLAttributes<HTMLDivElement> & DataAttributes;

export type SidebarFooterProps = HTMLAttributes<HTMLDivElement> & DataAttributes;

export type SidebarTriggerProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'disabled'> & DataAttributes & {
    /** The replacement toggle must remain focusable after expansion. */
    disabled?: never;
    asChild?: boolean;
    children?: ReactElement;
};

export declare const Sidebar: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & DataAttributes & {
    asChild?: boolean;
    collapsed?: boolean;
    defaultCollapsed?: boolean;
    onCollapsedChange?: (collapsed: boolean) => void;
    labels?: Partial<SidebarLabels>;
} & RefAttributes<HTMLElement>>;

export declare const SidebarHeader: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & DataAttributes & RefAttributes<HTMLDivElement>>;

export declare const SidebarFooter: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & DataAttributes & RefAttributes<HTMLDivElement>>;

export declare const SidebarContent: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & DataAttributes & RefAttributes<HTMLDivElement>>;

export declare const SidebarTrigger: {
    (props: SidebarTriggerProps & {
        asChild?: false;
    } & RefAttributes<HTMLButtonElement>): ReactElement | null;
    (props: SidebarTriggerProps & {
        asChild: true;
    } & RefAttributes<HTMLElement>): ReactElement | null;
};