StickyBar
Base
Initial value and state control
Use the defaultHide property to provide an initial state (whether closed or not) to the uncontrolled StickyBar, or use the hide property to manage the value in a controlled way.
Not controlled
Controlled
You must create a state to manage visibility through the hide property when using the StickyBar controlled.
Without the close button
Use the irremovable property to remove the close button from the StickyBar.
Even without the close button you can control the visibility of the StickyBar normally through the hide property.
Sections
Use the StickyBar.Section subcomponent to partition the contents of the StickyBar into different sections.
Fluid
Use the fluid property to expand the section across all available horizontal space.
Stretched
Use the stretch property to expand the section to the vertical limits of the StickyBar.
Fluid and stretched
You can use the fluid and stretch properties at the same time if necessary.
Customization
Use the backgroundColor property to add a custom background color to StickyBar.
In addition, use the hook useStickyBar to obtain colors with appropriate contrast for the background color of the StickyBar.
Composition with other layout components
Use the StickyBarGroup component to appropriately position one or more StickyBar in the top corner of the page.
The styles of StickyBarGroup automatically interact with the styles of Navbar, Sidebar and Main to compose a layout pattern for pages. Since version 8.14.0 this behavior also works when these components are separated into different micro frontends.
Uses the disabledAutoPositioning property to disable automatic positioning of the component.
This property can be useful in scenarios where the page layout will be organized by an external library or some custom style.