A floating bar is a fixed, non-modal interface element that keeps key information visible while users scroll. It can expand to reveal secondary content and appears as a bottom sheet on smaller touch devices.

The floating bar is a non-modal component, meaning the page content remains interactive. The component provides a body slot and two header slots which are visible in their respective states: expanded and collapsed.

The floating bar maxes at 85vh (including 32px top/bottom margins). On smaller viewports, the layout switches to a bottom sheet, which can expand to 95vh with a blocking scrim at the limit. When body content exceeds the height limit, it becomes vertically scrollable.

When the expandable property is set to false, the floating bar stays fixed in its collapsed state. The visual cues and controls for expansion are hidden, preventing any expansion. This configuration is suited for lightweight, self-contained content where a body slot is not required.

The component adapts by viewport width:

The Floating Bar has a default fixed width of 420px. When fit-content is set to true, it hugs content until it reaches the maximum width of 560px.

This behavior does not apply to the bottom sheet layout. In a bottom sheet, the component’s width automatically adjusts to its content once the screen exceeds 560px, regardless of the fit-content setting.

Horizontal alignment applies only in floating bar layout: center by default, with options for start/end and a CSS inline-offset for precise positioning (RTL supported). In bottom sheet layout, the component is always centered.

The Floating Bar is always in a fixed position. Its visibility can be configured by consumers, normally by scroll position or position of other content within the viewport, which triggers an entry and exit animation.

By default, the Floating bar adapts to a light mode environment and appears light. In a dark mode environment, we recommend changing the Floating Bars appearance to dark.

The floating bar provides expand() and collapse() methods for programmatic control. These methods enable external triggers like timers, scroll positions, or user interactions outside the component to control its expanded state. Both methods require the component to be visible and expandable to function.