Layout
Layout component is used to create the main layout of an app. Layout currently comes with one main configuration: two-column.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
navOpen | nav-open | Controls whether the navigation is hidden off-screen or not. Defaults to `true` for wide viewports, and `false` otherwise. | boolean | — |
persistNavState | persist-nav-state | Controls whether the navigation's open/closed state is persisted across page loads. This is useful for multi-page apps, where clicks on links trigger a full page load. | boolean | false |
syncNavState | sync-nav-state | Controls whether the navigation's open/closed state and width is synced across tabs/windows on the same origin. This is useful for long-lived app sessions where you may have multiple tabs/windows open at once. | boolean | false |
padding | padding | Controls the padding of the default main section slot. When set to “none”, the nav and header slots will still have padding. | 'm' | 'none' | 'm' |
sticky | sticky | Controls whether the layout's header has sticky positioning. | boolean | false |
stickyFooter | sticky-footer | Controls whether the layout's footer has sticky positioning. | boolean | false |
Slots
| Slot name | Description |
|---|---|
Default slot | The default main section content. |
nav | Used to place content inside the navigation sidebar. |
top-bar | Used to place the [Top Bar](../top-bar/) component. |
header | Used to place content inside the header section. This slot can be made sticky by utilizing the `sticky` property on the layout component. |
footer | Used to place content inside the footer section. This slot can be made sticky by utilizing the `stickyFooter` property on the layout component. |
drawer | Used to place additional content/details relating to a selected item. |
nav-toggle | Used to place a own nav-toggle component, for cases where you might need to add a tooltip. |
CSS Properties
CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.
| Property | Description | Default |
|---|---|---|
--n-layout-padding | Controls the padding around the main layout area (the main slot), using our spacing tokens. | var(--n-space-l) |
--n-layout-drawer-inline-size | Controls the width of the drawer area, when used. | 320px |
--n-layout-background-color | Controls the background color of the layout, using color tokens. | var(--n-color-background) |
Dependencies
This component is internally dependent on the following components:
- <nord-icon>
Icon
Icons are used to provide additional meaning or in places where text label doesn’t fit. Icon component allows you to display an icon from the Nordicons library.
- <nord-nav-toggle>
NavToggle
Nav toggle is meant for hiding and showing the primary navigation. This component is used internally in the Layout component, but can also be used separate to further customize the behavior.
Usage
This section includes guidelines for designers and developers about the usage of this component in different contexts.
Do
- To visually group content in a layout section, use the Card component.
- To lay out a set of smaller components, use the Stack component.
Don’t
- Never put layout component inside another HTML landmark.
- Don’t use when you need a vertical or horizontal layout system. Use Stack component instead.
Additional considerations
- Layout component uses
<main>element internally which is an HTML sectioning element which by default defines an ARIA landmark role. For that reason you should never put layout component inside another HTML landmark.
Theming
Please see the Accent color and Top Bar theming sections in our theming documentation for detailed guidelines.
Integration
For integration guidelines, please see Web Components documentation .