Shell Lab

Use the configuration panel to experiment with different shell and navigation setups. Resize the browser to test responsive behavior and collapse breakpoints.

Active Config

{
  "variant": "section",
  "height": "fill",
  "sideNavBreakpoint": "md",
  "sideNavMode": "show",
  "topNavMode": "show",
  "showBanner": false,
  "showFooter": false,
  "showFooterIcons": true,
  "showTopContent": true,
  "sideNavHeadingStyle": "link",
  "showSuperheading": false,
  "showSubheading": false,
  "headingIconStyle": "navicon",
  "showHeaderEndContent": false,
  "showNestedItems": true,
  "isCollapsible": true,
  "isResizable": false,
  "collapseToggleLocation": "sidenav",
  "mobileNavMode": "auto",
  "mobileNavSide": "auto",
  "topNavAlignment": "start",
  "topNavStyle": "items",
  "showTopNavHeading": true,
  "topNavHeadingStyle": "link",
  "topNavHeadingIconStyle": "navicon",
  "showTopNavSuperheading": false,
  "showTopNavSubheading": false
}

Content Block 1

Sample content to test scroll behavior in fill vs auto height mode. The shell should handle overflow correctly regardless of content length.

Content Block 2

Sample content to test scroll behavior in fill vs auto height mode. The shell should handle overflow correctly regardless of content length.

Content Block 3

Sample content to test scroll behavior in fill vs auto height mode. The shell should handle overflow correctly regardless of content length.

Content Block 4

Sample content to test scroll behavior in fill vs auto height mode. The shell should handle overflow correctly regardless of content length.

Content Block 5

Sample content to test scroll behavior in fill vs auto height mode. The shell should handle overflow correctly regardless of content length.

Content Block 6

Sample content to test scroll behavior in fill vs auto height mode. The shell should handle overflow correctly regardless of content length.

Content Block 7

Sample content to test scroll behavior in fill vs auto height mode. The shell should handle overflow correctly regardless of content length.

Content Block 8

Sample content to test scroll behavior in fill vs auto height mode. The shell should handle overflow correctly regardless of content length.

Content Block 9

Sample content to test scroll behavior in fill vs auto height mode. The shell should handle overflow correctly regardless of content length.

Content Block 10

Sample content to test scroll behavior in fill vs auto height mode. The shell should handle overflow correctly regardless of content length.