Layout
Layout belongs to the Layout category. Start with demos and usage, then use the API tables to finish integration and styling decisions.
Use the quick jump panel to reach overview, usage, demos, and API first, then continue through the full page.
Version history is grouped by release so you can quickly see what changed for this component across published versions.
2026-10-02
let a host viewport decide isMobile and expose the drawer state
expose the region visibility props in the basic example
follow the viewport and drop the sidebar gaps on mobile
keep the drawer navigation expanded on mobile
re-publish the layout variables inside the mobile drawer
collapse the fixed tab when the header is hidden
drop the sidebar-adjacent spacing when the sidebar is hidden
reserve and paint nothing for a zero-width sidebar
adjust transition durations and add margin to layout triggers
align surface-layering assertions with the current recipe
expose the region visibility props in the basic example
collapse the fixed tab when the header is hidden
drop the sidebar-adjacent spacing when the sidebar is hidden
reserve and paint nothing for a zero-width sidebar
re-publish the layout variables inside the mobile drawer
let a host viewport decide isMobile and expose the drawer state
follow the viewport and drop the sidebar gaps on mobile
keep the drawer navigation expanded on mobile
align surface-layering assertions with the current recipe
adjust transition durations and add margin to layout triggers
2026-05-17
replace DialogContent with DialogPopup for mobile layout
2026-04-30
remove unused properties from LayoutClassicRootProps
2026-03-03
add background color to sidebar for better visibility
optimize layout styles
2026-02-08
add background color to tab and content variants
2026-02-07
update main and root styles for layout variants
2026-02-07
add tabVisible and footerVisible props to LayoutProps
2026-01-29
add LayoutContent component and update layout structure
2026-01-27
add customizable header, tab, and footer heights
2026-01-23
add default props for side, variant, and collapsible
2026-01-14
replace mobile media query with isMobile boolean for improved layout handling
2026-01-09
adjust breadcrumb spacing and enhance content area for better layout consistency
2026-01-08
update max-width values in configuration and layout files for consistent styling
2026-01-07
replace sizeRatio with pxToRem function for improved sidebar width calculations and update mobile layout styles
2026-01-01
replace drawerContentVariants with drawerPopupVariants for improved layout handling
2025-12-09
add z-index to mobile drawer for improved visibility
2025-12-09
adjust header and layout styles for improved consistency and overflow handling
2025-11-18
implement Layout components
rename theme variable to themeContext for consistency across layout components
implement Layout components
rename theme variable to themeContext for consistency across layout components