Preview

Usage

<cs-app-layout-toolbar id="my-layout">
  <div slot="navigation">
    <cs-side-navigation></cs-side-navigation>
  </div>
  <div slot="breadcrumbs">
    <cs-breadcrumb-group></cs-breadcrumb-group>
  </div>
  <div slot="content">
    <cs-container header="Section">Content</cs-container>
  </div>
  <div slot="tools">Help content</div>
</cs-app-layout-toolbar>
<script>
  const layout = document.getElementById('my-layout');
  layout.toolbarDrawers = [
    { id: 'notifications', trigger: { iconName: 'notification' }, ariaLabels: { drawerName: 'Notifications' }, badge: true }
  ];
</script>

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

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-content-header-overlapboolean

Disables overlap between contentHeader and content slots.

disable-content-paddingsboolean

If true, disables outer paddings for the content slot.

drawersArray<AppLayoutToolbarProps.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) - (Optional) the button that opens and closes the active drawer. If not set, a corresponding trigger button is not displayed, while the drawer might be displayed, but opened using a custom trigger.
• ariaLabels (DrawerAriaLabels) - the labels for the interactive elements of the drawer.
• badge (boolean) - (Optional) Adds a badge to the corner of the icon to indicate a state change. For example: Unread notifications.
• resizable (boolean) - (Optional) if the drawer is resizable or not.
• defaultSize (number) - (Optional) starting size of the drawer. if not set, defaults to 290.
• onResize (({ size: number }) => void) - (Optional) 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.
• resizeHandle (string) - (Optional) Label for the resize handle.

footer-selectorstring

CSS selector for the application footer.

header-selectorstring

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

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

Minimum main content panel width in pixels.

navigation-hideboolean

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

navigation-openboolean

State of the navigation drawer.

navigation-trigger-hideboolean

If true, the navigation trigger is not displayed at all, while navigation drawer might be displayed, but opened using a custom trigger.

navigation-widthnumber

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

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

tools-openboolean

State of the tools drawer.

tools-widthnumber

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.