App layout

Preview

Basic
Instances

Your instance listing would appear here.

Select an instance to view its details, or choose an action from the menu.

Usage

<cs-app-layout content-type="default" navigation-open tools-open>
  <cs-side-navigation slot="navigation"></cs-side-navigation>
  <div slot="content">
    <cs-content-layout>
      <cs-header slot="header" variant="h1">Page title</cs-header>
      <cs-container header="Section">Content</cs-container>
    </cs-content-layout>
  </div>
  <cs-help-panel slot="tools" header="Help">
    Contextual help content.
  </cs-help-panel>
</cs-app-layout>

Properties

active-drawer-idstring | null

The active drawer id. If you want to clear the active drawer, use null.

analytics-metadataAppLayoutProps.AnalyticsMetadata

Specifies additional analytics-related metadata.

  • instanceIdentifier - A unique string that identifies this component instance in your application.
  • flowType - Identifies the type of flow represented by the component. Note: This API is currently experimental.
aria-labelsAppLayoutProps.Labels

Aria labels for the drawer operating buttons. Use this property to ensure accessibility.

  • navigation (string) - Label for the landmark that wraps the navigation drawer.
  • navigationClose (string) - Label for the button that closes the navigation drawer.
  • navigationToggle (string) - Label for the button that opens the navigation drawer.
  • notification (string) - Label for the region that contains notification messages.
  • tools (string) - Label for the landmark that wraps the tools drawer.
  • toolsClose (string) - Label for the button that closes the tools drawer.
  • toolsToggle (string) - Label for the button that opens the tools drawer.
  • drawers (string) - Label for the landmark that wraps the active drawer.
  • drawersOverflow (string) - Label for the ellipsis button with any overflow drawers.
  • drawersOverflowWithBadge (string) - Label for the ellipsis button with any overflow drawers, with a badge.

Example:

{
  navigation: "Navigation drawer",
  navigationClose: "Close navigation drawer",
  navigationToggle: "Open navigation drawer",
  notifications: "Notifications",
  tools: "Help panel",
  toolsClose: "Close help panel",
  toolsToggle: "Open help panel",
  drawers: "Drawers",
  drawersOverflow: "Overflow drawers",
  drawersOverflowWithBadge: "Overflow drawers (Unread notifications)"
}
content-typeAppLayoutProps.ContentType default: 'default'

Determines the default behavior of the component based on some predefined page layouts. Individual properties will always take precedence over the default coming from the content type.

disable-body-scrollboolean

Activates a backwards-compatibility mode for applications with non-fixed headers and footers.

disable-content-header-overlapboolean

Disables overlap between contentHeader and content slots.

disable-content-paddingsboolean default: false

If true, disables outer paddings for the content slot.

drawersArray<AppLayoutProps.Drawer>

Drawers property. If you set both drawers and tools, drawers will take precedence. Each Drawer is an item in the drawers wrapper with the following properties:

  • id (string) - the id of the drawer.
  • content (unknown) - the content in the drawer.
  • trigger (DrawerTrigger) - the button that opens and closes the active drawer.
  • ariaLabels (DrawerAriaLabels) - the labels for the interactive elements of the drawer.
  • badge (boolean) - Adds a badge to the corner of the icon to indicate a state change. For example: Unread notifications.
  • resizable (boolean) - if the drawer is resizable or not.
  • defaultSize (number) - starting size of the drawer. if not set, defaults to 290.
  • onResize (({ size: number }) => void) - Fired when the active drawer is resized.

DrawerTrigger

  • iconName (IconProps.Name) - (Optional) Specifies the icon to be displayed.
  • iconSvg (unknown) - (Optional) Specifies the SVG of a custom icon. For more information, see SVG icon guidelines

DrawerAriaLabels

  • drawerName (string) - Label for the drawer itself, and for the drawer trigger button tooltip text.
  • closeButton (string) - (Optional) Label for the close button.
  • triggerButton (string) - (Optional) Label for the trigger button. When badge is true, include the badge information in the label (for example, "Notifications, has unread messages").
  • resizeHandle (string) - (Optional) Label for the resize handle.
footer-selectorstring default: ''

CSS selector for the application footer.

header-selectorstring default: ''

CSS selector for the application header.

header-variant'default' | 'high-contrast'

Determines the visual treatment for the breadcrumbs and notifications slots. Specifically:

  • default - Does not apply any visual treatment.
  • high-contrast - Applies high-contrast to both slots. Use in conjunction with headerVariant="high-contrast" in ContentLayout.
max-content-widthnumber default: 0

Maximum main content panel width in pixels.

If set to Number.MAX_VALUE, the main content panel will occupy the full available width.

min-content-widthnumber default: 280

Minimum main content panel width in pixels.

navigation-hideboolean default: false

If true, the navigation drawer is not displayed at all.

navigation-openboolean default: false

State of the navigation drawer.

navigation-widthnumber default: 280

Navigation drawer width in pixels.

split-panel-openboolean

State of the split panel.

split-panel-preferencesAppLayoutProps.SplitPanelPreferences

Controls the split panel preferences.

By default, the preference is { position: 'bottom' }.

On smaller screens, the panel is forced to the 'bottom' position and the 'side' preference becomes disabled.

split-panel-sizenumber

The size of the split panel in pixels.

sticky-notificationsboolean

If true, the notification slot is rendered above the scrollable content area so it is always visible.

tools-hideboolean default: false

If true, the tools drawer is not displayed at all.

tools-openboolean default: false

State of the tools drawer.

tools-widthnumber default: 290

Tools drawer width in pixels.

Slots

breadcrumbs

Use this slot to add the breadcrumb group component to the app layout.

content

Main content.

contentHeader

Top area of the page content.

navigation

Navigation drawer.

notifications

Displayed on top of the main content in the scrollable area.

Conceived to contain notifications (flash messages).

splitPanel

Use this slot to add the split panel component to the app layout.

Note: If provided, this property should be set to null or undefined if a split panel should not be rendered.

tools

Tools drawer.

Events

drawerChangeCustomEvent<AppLayoutProps.DrawerChangeDetail>

Fired when the active drawer is toggled.

navigationChangeCustomEvent<AppLayoutProps.ChangeDetail>

Fired when the navigation drawer is toggled.

splitPanelPreferencesChangeCustomEvent<AppLayoutProps.SplitPanelPreferences>

Fired when the split panel preferences change.

splitPanelResizeCustomEvent<AppLayoutProps.SplitPanelResizeDetail>

Fired when the split panel is resized.

splitPanelToggleCustomEvent<AppLayoutProps.ChangeDetail>

Fired when the split panel is toggled.

toolsChangeCustomEvent<AppLayoutProps.ChangeDetail>

Fired when the tools drawer is toggled.