@atlaskit/navigation-system/constellation/layout/code.mdx

The latest navigation system for Atlassian apps.

---
title: Layout
description: Layout components define a page's structure and the areas for navigation and content.
order: 3
props:
  packageName: '@atlaskit/navigation-system'
  exports:
    - Root
    - Banner
    - TopNav
    - TopNavStart
    - TopNavMiddle
    - TopNavEnd
    - SideNav
    - SideNavHeader
    - SideNavBody
    - SideNavFooter
    - Main
    - MainStickyHeader
    - PanelLayout
    - Panel
    - PanelSplitter
    - SideNavToggleButton
---

import SectionMessage from '@atlaskit/section-message';

## Props

### Root

The root component of the navigation system, wrapping the entire view.

<TSMorphProps exportName="Root" packageName="@atlaskit/navigation-system" />

### Banner

The banner layout area. It will always be displayed at the top of the screen.

<TSMorphProps exportName="Banner" packageName="@atlaskit/navigation-system" />

### TopNav

The top nav layout area. It will display at the top of the screen, below the banner if one is
present.

<TSMorphProps exportName="TopNav" packageName="@atlaskit/navigation-system" />

### TopNavStart

Wrapper for the top navigation actions on the inline-start (left) side of the top navigation.

<TSMorphProps exportName="TopNavStart" packageName="@atlaskit/navigation-system" />

### TopNavMiddle

Wrapper for the actions in the middle of the top navigation.

<TSMorphProps exportName="TopNavMiddle" packageName="@atlaskit/navigation-system" />

### TopNavEnd

Wrapper for the top navigation actions on the inline-end (right) side of the top navigation.

<TSMorphProps exportName="TopNavEnd" packageName="@atlaskit/navigation-system" />

### SideNav

Use the SideNav area to render side navigation items. It will show on the left (inline start) of the
screen.

<TSMorphProps exportName="SideNav" packageName="@atlaskit/navigation-system" />

{/* Not using level 4 heading for side nav layout areas as they won't be added to table of contents */}

### SideNavHeader

The top part of the side nav.

<TSMorphProps exportName="SideNavHeader" packageName="@atlaskit/navigation-system" />

### SideNavBody

The main content of the side nav, filling up the middle section. It acts as a scroll container.

<TSMorphProps exportName="SideNavBody" packageName="@atlaskit/navigation-system" />

### SideNavFooter

The bottom part of the side nav.

<TSMorphProps exportName="SideNavFooter" packageName="@atlaskit/navigation-system" />

### Main

Use the Main area for the main page content.

<TSMorphProps exportName="Main" packageName="@atlaskit/navigation-system" />

### MainStickyHeader

The sticky header of the main layout area.

<TSMorphProps exportName="MainStickyHeader" packageName="@atlaskit/navigation-system" />

### PanelLayout

Use `PanelLayout` to render a local panel beside page content inside `Main`. It manages responsive
inline and overlay positioning, sizing, and pointer and keyboard resizing. The caller supplies the
panel content and controls whether it is open; no panel-system provider is required.

```tsx
import { PanelLayout } from '@atlaskit/navigation-system/layout/panel-layout';
```

Mount one local-panel host per navigation `Root`, including closed `PanelLayout` and
`LayoutWithPanel` instances. Keep the host mounted and use `isPanelOpen` to open or close it so that
resized widths are retained. Switch content through the same host using `panel` and `panelKey`.

Use `defaultPanelWidth` for an initial width, or pair `panelWidth` with `onPanelWidthChange` to
control it. Available space can constrain the rendered width. Use `onResizeEnd` for persistence or
analytics after a completed resize, and provide localized `panelLabel` and `resizeLabel` values.

`PanelLayout` contains the layout and resizing responsibilities extracted from
`@atlassian/panel-system`. That package's `LayoutWithPanel` remains an adapter that connects panel
state and routed content to `PanelLayout`.

The separate [`Panel`](#panel) component is a layout area rendered alongside `Main` under `Root`.
`PanelLayout` wraps content inside `Main` and includes its own resize control.

<TSMorphProps exportName="PanelLayout" packageName="@atlaskit/navigation-system" />

### Panel

The Panel layout area is rendered to the right (inline end) of the Main area. On small viewports,
the Panel slot will become an overlay.

<TSMorphProps exportName="Panel" packageName="@atlaskit/navigation-system" />

### Panel splitter

A component that allows the user to resize a layout area.

<TSMorphProps exportName="PanelSplitter" packageName="@atlaskit/navigation-system" />

### SideNavToggleButton

Button for toggling the side nav. It should be used in the top bar.

<TSMorphProps exportName="SideNavToggleButton" packageName="@atlaskit/navigation-system" />