Page layout

A collection of components which let you compose an application's page layout.

Deprecated

This package is deprecated. Use our new navigation system.

Examples Code Usage Changelog

Installation

Package installation information
Install	`yarn add @atlaskit/page-layout`
Source	Bitbucket.org, (opens new window)
npm	@atlaskit/page-layout, (opens new window)
Bundle	unpkg.com, (opens new window)

Props

PageLayout props

`children`
Required
Description	React children!
Type	`string \| number \| boolean \| React.ReactElement<any, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal`

`onLeftSidebarCollapse`
Description	Called when left-sidebar is collapsed.
Type	`(leftSidebarState: LeftSidebarState) => void`

`onLeftSidebarExpand`
Description	Called when left-sidebar is expanded.
Type	`(leftSidebarState: LeftSidebarState) => void`

`skipLinksLabel`
Description	No description.
Default	`"Skip to:"`
Type	`string`

`testId`
Description	A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
Type	`string`

`testId`
Description	A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
Type	`string`

TopNavigation props

`children`
Required
Description	React children!
Type	`string \| number \| boolean \| React.ReactElement<any, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal`

`height`
Description	The height of the slot.
Type	`number`

`id`
Description	No description.
Type	`string`

`isFixed`
Description	Sets the position to fixed.
Type	`boolean`

`shouldPersistHeight`
Description	It saves the height in local storage.
Type	`boolean`

`skipLinkTitle`
Description	No description.
Type	`string`

`testId`
Description	A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
Type	`string`

Main props

`children`
Required
Description	React children!
Type	`string \| number \| boolean \| React.ReactElement<any, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal`

`id`
Description	No description.
Type	`string`

`isFixed`
Description	Sets the position to fixed.
Type	`boolean`

`shouldPersistWidth`
Description	It saves the width in local storage.
Type	`boolean`

`skipLinkTitle`
Description	No description.
Type	`string`

`testId`
Description	A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
Type	`string`

`width`
Description	The width of the slot.
Type	`number`

Content props

`children`
Required
Description	React children
Type	`string \| number \| boolean \| React.ReactElement<any, string \| React.JSXElementConstructor<any>> \| Iterable<ReactNode> \| React.ReactPortal`

`testId`
Description	A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
Type	`string`

LeftSidebar props

`children`
Required
Description	React children!
Type	`string \| number \| boolean \| React.ReactElement<any, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal`

`collapsedState`
Description	Controls whether the LeftSidebar mounts in a collapsed state, this will override the setting in localStorage.
Type	`"collapsed" \| "expanded"`

`id`
Description	No description.
Type	`string`

`isFixed`
Description	Sets the position to fixed.
Type	`boolean`

`onFlyoutCollapse`
Description	Called when left-sidebar is collapsed and the mouse leaves the area.
Type	`() => void`

`onFlyoutExpand`
Description	Called after flyout delay when left-sidebar is collapsed and the mouse enters the area.
Type	`() => void`

`onResizeEnd`
Description	Called when left-sidebar resize ends using mouse or touch.
Type	`(leftSidebarState: LeftSidebarState) => void`

`onResizeStart`
Description	Called when left-sidebar resize starts using mouse or touch.
Type	`(leftSidebarState: LeftSidebarState) => void`

`overrides`
Description	You can override prop(s) for the mentioned component(s).
Type	`{ ResizeButton?: { render?: (Component: React.ElementType<ResizeButtonProps, keyof React.JSX.IntrinsicElements>, props: ResizeButtonProps) => React.ReactElement<...>; }; }`

`resizeButtonLabel`
Description	Display label for the expand/collapse button for the left sidebar.
Type	`string`

`resizeGrabAreaLabel`
Description	Display label for grab area/slider to resize the left side bar. This will be rendered through assistive technologies.
Type	`string`

`shouldPersistWidth`
Description	It saves the width in local storage.
Type	`boolean`

`skipLinkTitle`
Description	No description.
Type	`string`

`testId`
Description	A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
Type	`string`

`valueTextLabel`
Description	The `aria-valuetext` allows people relying on assistive technologies, particularly screen readers, to determine the purpose of the slider. The default value is "Width". The aria-valuenow property is automatically appended to the valueTextLabel. For Example, valueTextLabel="Width" will render aria-valuetext="Width 62%”.
Type	`string`

`width`
Description	Controls the width when LeftSidebar mounts, this will override the setting in localStorage.
Type	`number`

LeftSidebarWithoutResize props

`children`
Required
Description	React children!
Type	`string \| number \| boolean \| React.ReactElement<any, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal`

`id`
Description	No description.
Type	`string`

`isFixed`
Description	Sets the position to fixed.
Type	`boolean`

`shouldPersistWidth`
Description	It saves the width in local storage.
Type	`boolean`

`skipLinkTitle`
Description	No description.
Type	`string`

`testId`
Description	A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
Type	`string`

`width`
Description	The width of the slot.
Type	`number`

RightSidebar props

`children`
Required
Description	React children!
Type	`string \| number \| boolean \| React.ReactElement<any, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal`

`id`
Description	No description.
Type	`string`

`isFixed`
Description	Sets the position to fixed.
Type	`boolean`

`shouldPersistWidth`
Description	It saves the width in local storage.
Type	`boolean`

`skipLinkTitle`
Description	No description.
Type	`string`

`testId`
Description	A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
Type	`string`

`width`
Description	The width of the slot.
Type	`number`

LeftPanel props

`children`
Required
Description	React children!
Type	`string \| number \| boolean \| React.ReactElement<any, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal`

`id`
Description	No description.
Type	`string`

`isFixed`
Description	Sets the position to fixed.
Type	`boolean`

`shouldPersistWidth`
Description	It saves the width in local storage.
Type	`boolean`

`skipLinkTitle`
Description	No description.
Type	`string`

`testId`
Description	A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
Type	`string`

`width`
Description	The width of the slot.
Type	`number`

RightPanel props

`children`
Required
Description	React children!
Type	`string \| number \| boolean \| React.ReactElement<any, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal`

`id`
Description	No description.
Type	`string`

`isFixed`
Description	Sets the position to fixed.
Type	`boolean`

`shouldPersistWidth`
Description	It saves the width in local storage.
Type	`boolean`

`skipLinkTitle`
Description	No description.
Type	`string`

`testId`
Description	A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
Type	`string`

`width`
Description	The width of the slot.
Type	`number`

Was this page helpful?

We use this feedback to improve our documentation.