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 |
defaultNavWidth | default-nav-width | Initial width (in pixels) of the navigation sidebar when no value has been persisted. Changing this value between loads also re-seeds the persisted width for existing users, so design changes propagate without manual localStorage resets. | number | 250 |
minNavWidth | min-nav-width | Minimum width (in pixels) the navigation sidebar can be resized to via drag or keyboard. | number | 220 |
maxNavWidth | max-nav-width | Maximum width (in pixels) the navigation sidebar can be resized to via drag or keyboard. | number | 400 |
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 |
hideDefaultNavToggle | hide-default-nav-toggle | Suppresses the built-in `<nord-nav-toggle>` rendered as the fallback for the `nav-toggle` slot. Set this when you've placed your own `<nord-nav-toggle>` elsewhere inside the layout (e.g. inside `<nord-header>`) and want the layout's default one hidden. | 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. As an alternative, `<nord-nav-toggle>` can be placed anywhere inside `<nord-layout>` (e.g. inside a `<nord-header>`) — the layout listens for clicks and hover on any descendant `<nord-nav-toggle>` and drives toggle / peek behaviour accordingly. When using that placement, set `hide-default-nav-toggle` to suppress the layout's built-in fallback toggle. |
| Event | Detail Type | Description |
|---|---|---|
nav-open-change | NavOpenChangeEvent | Dispatched when the navigation open state changes, regardless of the trigger (user toggle, peek, focus, programmatic). The event's `navOpen` property contains the new state. |
nav-resize | NavResizeEvent | Dispatched when the navigation sidebar width changes. The event's `width` property contains the new width in pixels. |
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) |
--n-layout-nav-border-color | Controls the color of the border between the navigation and the main content area when the nav is open on wide screens. | var(--n-color-border) |
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. Used internally by `<nord-layout>` as the default contents of its `nav-toggle` slot. Can also be placed **anywhere inside `<nord-layout>`** (e.g. inside a `<nord-header>` next to the page title) — the layout listens for clicks on any descendant `<nord-nav-toggle>` and toggles the navigation accordingly. Outside of a `<nord-layout>` it renders as a presentational button with no behaviour. The two displayed icons can be customised via the `icon` and `icon-active` attributes. The first is shown in the resting state; the second replaces it on hover/focus (≥ 768px). Set `auto-hide` to have the toggle disappear automatically when the ancestor `<nord-layout>`'s nav is open (on wide viewports), mirroring the built-in fallback toggle's behaviour.
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 .