Hiyve Components - v1.0.0
    Preparing search index...

    Interface SidebarProps

    Props for the Sidebar component

    interface SidebarProps {
        activeTab: string;
        children?: ReactNode;
        className?: string;
        collapsed?: boolean;
        collapsible?: boolean;
        colors?: Partial<SidebarColors>;
        elevation?: number;
        headerTitle?: string;
        icons?: Partial<SidebarIcons>;
        labels?: Partial<SidebarLabels>;
        onCollapsedChange?: (collapsed: boolean) => void;
        onTabChange: (tabId: string) => void;
        onWidthChange?: (width: number) => void;
        persistWidth?: boolean;
        position?: SidebarPosition;
        renderContent?: (tabId: string) => ReactNode;
        renderProps?: SidebarRenderProps;
        resizable?: boolean;
        showCollapseButton?: boolean;
        showHeader?: boolean;
        showTabLabels?: "auto" | TabLabelMode;
        storageKey?: string;
        styles?: Partial<SidebarStyles>;
        sx?: SxProps<Theme>;
        tabs: SidebarTab[];
        tabVariant?: SidebarTabVariant;
        width?: number;
    }
    Index

    Properties

    activeTab children? className? collapsed? collapsible? colors? elevation? headerTitle? icons? labels? onCollapsedChange? onTabChange onWidthChange? persistWidth? position? renderContent? renderProps? resizable? showCollapseButton? showHeader? showTabLabels? storageKey? styles? sx? tabs tabVariant? width?

    Properties

    activeTab: string

    Currently active tab ID

    children?: ReactNode

    Content to render for the active tab

    className?: string

    Additional class name

    collapsed?: boolean

    Whether the sidebar is collapsed

    collapsible?: boolean

    Whether the sidebar is collapsible

    colors?: Partial<SidebarColors>

    Custom colors

    elevation?: number

    Elevation level (0-24)

    headerTitle?: string

    Header title (if showHeader is true)

    icons?: Partial<SidebarIcons>

    Custom icons

    labels?: Partial<SidebarLabels>

    Custom labels for i18n

    onCollapsedChange?: (collapsed: boolean) => void

    Callback when collapsed state changes

    onTabChange: (tabId: string) => void

    Callback when active tab changes

    onWidthChange?: (width: number) => void

    Callback when width changes (for resizable)

    persistWidth?: boolean

    Persist width to localStorage (requires resizable)

    position?: SidebarPosition

    Position of the sidebar

    renderContent?: (tabId: string) => ReactNode

    Function to render content based on active tab ID

    renderProps?: SidebarRenderProps

    Custom render props

    resizable?: boolean

    Whether the sidebar is resizable

    showCollapseButton?: boolean

    Whether to show the close/collapse button in header

    showHeader?: boolean

    Whether to show a header above tabs

    showTabLabels?: "auto" | TabLabelMode

    Tab label display mode: 'auto' = responsive based on width (default), or explicit mode

    storageKey?: string

    Custom localStorage key for width persistence (default: 'hiyve-sidebar-width')

    styles?: Partial<SidebarStyles>

    Custom styles

    sx?: SxProps<Theme>

    MUI sx prop for root element

    tabs: SidebarTab[]

    Array of tab definitions

    tabVariant?: SidebarTabVariant

    Tab display variant

    width?: number

    Current width (controlled)

    Settings

    Member Visibility

    On This Page

    Properties