Skip to content

Sidebar2 - Allow custom height or CSS variable for .nav-scrollable element #1158

@prizmasoftware

Description

@prizmasoftware

Problem

Currently, the Sidebar2 component renders a scrollable content area (.nav-scrollable) with a hardcoded height defined via scoped CSS:

@media (min-width: 641px) {
    .nav-scrollable[b-xxxxxxx] {
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}

This prevents consumers from overriding the height or using a custom layout with a footer, as the height gets reapplied after window resizing due to media queries or re-rendering.

Expected Behavior
As a library consumer, I would like to:

Override the scrollable content height via a CSS variable (e.g. --bb-sidebar-content-height)

Or pass a parameter like ContentHeight to the Sidebar2 component

Or have the ability to disable internal height styling entirely and manage layout externally

Why This Matters
When using a layout with a fixed footer, the hardcoded height causes the last few sidebar items to be hidden behind the footer, especially on smaller screen heights. Using global CSS or inline styles doesn't work due to scoped CSS and internal media queries.

Proposed Solution
Add support for one of the following:

A CSS variable like --bb-sidebar-content-height used in the scoped style

A ContentHeight parameter on the Sidebar2 component

An option to disable or override internal height behavior (similar to class or style passthrough)

This would make Sidebar2 much easier to integrate into complex layouts without resorting to JavaScript interop hacks.

Thank You!
Thanks for the great component library — this is the only issue I’ve had while integrating Sidebar2 into a real-world layout.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions