1. Home
2. Menu Tool Layouts
3. Liquid Float Layout

# Liquid Float Layout

A flexible floating layout system that allows elements to flow and position themselves dynamically based on content and available space.

## Overview

The Liquid Float Layout provides a fluid positioning system where elements can float and reposition themselves naturally, similar to how liquid adapts to its container. This layout is particularly useful for tool panels, menus, and dynamic content that needs to adapt to varying screen sizes and content lengths.

## Basic Usage

Main Content

[0] 0 1 ✕ FPS mujoco Maxlen [0] 0 Scene Camera Render Connection

Background Color

Color

# World Transform

Position

X Y Z Rotation

X Y Z Scale

V HemisphereLight-[light-default-hemi]

skyColor

# groundColor

# Intensity

V Show Helper

Hide

DirectionalLight-[light-default-direct]

Color

# Intensity

V Show Helper

Hide

Gizmo

Enable

Add Group 1 Group 3 Object 1 Object 2 Object 7 Group 2 Group 4 Object 3 Object 4 Group 5 Object 5 Object 6 ```tsx
<LiquidLayoutView
  left={<SceneGraph cardClassName="h-full"/>}
  right={<ControlTabs/>}
  top={<TopToolbar/>}
  bottom={<PlaybackControl/>}
>
  <MainPlaceholder/>
</LiquidLayoutView>
```